模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/AcInput.vue

@@ -1,144 +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">
                {{title}}
            </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";
import * as echarts from "echarts";

    export default {
        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: '年售电量情况'
                        }]
                    }]
                };
export default {
   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() {
                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);
         // 设置配置项
         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;
    }
.echarts-text-wrapper {
   position: absolute;
   top: 56%;
   left: 22.5%;
   width: 55%;
   text-align: center;
}

    .color-strip {
        height: 4px;
    }
.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;
    }
.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>