模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/AcInput.vue

@@ -1,146 +1,144 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                熔丝告警
            </div>
        </div>
    </div>
   <div class="echarts-wrapper">
      <div class="echarts-content" ref="chart"></div>
      <div class="echarts-text-wrapper">
         <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
         <div class="echarts-text">
            {{title}}
         </div>
      </div>
   </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "AcInput",
    chart: "",
    chartData: "",
    props: {
        acColor: {
            type:String,
            default: "#813a74"
        },
        resColor: {
            type:String,
            default: "#ff649d"
        },
    },
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(value) {
            let acColor = this.acColor;
            let resColor = this.resColor;
            let option = {
                title: {
                    text: value+'%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 40,
                    }
                },
                series: [
                    {
                        name: "",
                        type: 'gauge',
                        radius: '90%',
                        startAngle: 180.5,
                        endAngle: -0.5,
                        min: 0,
                        max: 100,
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 40,
                                color: [
                                    [
                                        value / 100, acColor
                                    ],
                                    [
                                        1, resColor
                                    ]
                                ]
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF0000',
                            }
                        },
                        data: [{
                            value: value,
                            name: '年售电量情况'
                        }]
                    }
                ]
            };
   name: "AcInput",
   chart: "",
   chartData: "",
   data() {
      return {
         acColor: '#813a74',
         resColor: '#ff649d',
         title: ''
      }
   },
   methods: {
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
      setData(sendData) {
         this.$options.chartData = sendData;
         this.acColor = sendData.acColor;
         this.resColor = sendData.resColor;
         this.title = sendData.title;
         let option = {
            title: {
               text: sendData.data + '%',
               x: 'center',
               y: 'center',
               textStyle: {
                  color: "#fff",
                  fontSize: 24,
               }
            },
            series: [{
               name: "",
               type: 'gauge',
               radius: '90%',
               startAngle: 180.5,
               endAngle: -0.5,
               min: 0,
               max: 100,
               title: {
                  show: false
               },
               detail: {
                  show: false
               },
               axisLine: {
                  show: true,
                  lineStyle: {
                     width: 20,
                     color: [
                        [
                           sendData.data / 100, this.acColor
                        ],
                        [
                           1, this.resColor
                        ]
                     ]
                  }
               },
               axisTick: {
                  show: false,
               },
               splitLine: {
                  show: false,
               },
               axisLabel: {
                  show: false
               },
               pointer: {
                  show: false,
               },
               itemStyle: {
                  normal: {
                     color: '#FF0000',
                  }
               },
               data: [{
                  value: sendData,
                  name: '年售电量情况'
               }]
            }]
         };

            // 设置配置项
            this.setOption(option);
        },
        resize() {
            this.setData(this.$options.chartData);
            this.$options.chart.resize();
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        let value = 10;
        this.setData(value);
         // 设置配置项
         this.setOption(option);
      },
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            if (JSON.stringify(this.$options.chartData) != '{}') {
               this.setData(this.$options.chartData);
            }
         }, 300)
      }
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
    }
      window.addEventListener('resize', this.resize);
   },
   destroyed() {
      window.removeEventListener('resize', this.resize);
   }
}
</script>

<style scoped>
.echarts-text-wrapper {
    position: absolute;
    top: 56%;
    left: 22.5%;
    width: 55%;
    text-align: center;
   position: absolute;
   top: 56%;
   left: 22.5%;
   width: 55%;
   text-align: center;
}
.color-strip {
    height: 4px;
}
.echarts-text {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 32px;
    background-color: #083880;
    border: 1px solid #01b1e0;
    border-radius: 16px;

.color-strip {
   height: 4px;
}

.echarts-text {
   display: inline-block;
   margin-top: 8px;
   padding: 8px 20px;
   background-color: #083880;
   border: 1px solid #01b1e0;
   border-radius: 16px;
   font-size: 12px;
}
</style>