模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/triangleBarChart.vue

@@ -1,227 +1,282 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
   <div class="echarts-wrapper" @dblclick="dblclick">
      <div class="echarts-content" ref="chart">

    </div>
  </div>
      </div>
   </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    batteryGroup
  } from '@/assets/js/api'
  export default {
    name: "triangleBarChart",
    chart: "",
    chartData: {},
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
//引入chart字体自适应
import {
   chartFontsize
} from '@/assets/js/chartFontsize'
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
export default {
   name: "triangleBarChart",
   chart: "",
   chartData: {},
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
   },
   data() {
      return {
         websock: null
      }
   },
   methods: {
      findParents(node, select) {
         var parent = node.parentNode;
         if (parent === null || parent.className.indexOf(select) != -1) {
            return parent;
         } else {
            return this.findParents(parent, select);
         }
      },
      dblclick(e) {
         this.isAllScreen = !this.isAllScreen
         let parents = this.findParents(e.currentTarget, 'vdr')
         if (this.isAllScreen) {
            this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
            parents.style.transform = 'none';
            parents.style.width = '100%';
            parents.style.height = '100%';
            parents.style.position = 'fixed';
            parents.style.left = 0;
            parents.style.right = 0;
            parents.style.bottom = 0;
            parents.style.top = 0;
            parents.style.zIndex = 99999;
         } else {
            parents.style.transform = this.parentsStyle.transform;
            parents.style.width = this.parentsStyle.width;
            parents.style.height = this.parentsStyle.height;
            parents.style.position = this.parentsStyle.position;
            parents.style.left = 'initial';
            parents.style.right = 'initial';
            parents.style.bottom = 'initial';
            parents.style.top = 'initial';
            parents.style.zIndex = 'auto';
         }
         this.$options.chart.resize();
      },
      toParentPage(value) {
         if (typeof (value) == 'string') {
            window.parent.parent.postMessage({
               cmd: "syncPage",
               params: {
                  pageInfo: {
                     label: "电源实时告警",
                     name: "powerRealtimeInfo",
                     src: '#/powerRealtimeInfo/?alarmType=' + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
         this.$options.chart.on('click', (params) => {
            let name = params.name;
            checkboxs.dcz.map(item => {
               if (item.label == name) {
                  this.toParentPage(item.value)
               }
            })
         })
      },
      organizeData(data) {
         let inData = []
         data.data.map(item => {
            if (item > 10) {
               inData.push(item - 10);
            } else {
               inData.push(item);
            }
         })
         let option = {
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               },
               formatter: function (item) {
                  let str = item[0].axisValueLabel;
                  item.map(jtem => {
                     if (jtem.seriesName == 'outData') {
                        str += ':' + jtem.data
                     }
                  });
                  return str
               }
            },
            grid: {
               top: 20,
               right: 20,
               left: 50,
               bottom: 30
            },
            xAxis: [{
               type: 'category',
               data: data.xData,
               axisLine: {
                  lineStyle: {
                     color: '#022664'
                  }
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  color: '#FFFFFF',
                  fontSize: chartFontsize(14),
                  interval: 0
               }
            }, {
               show: false,
               type: 'category',
               data: data.xData,
               axisLine: {
                  lineStyle: {
                     color: '#022664'
                  }
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  color: '#FFFFFF',
                  fontSize: chartFontsize(14),
                  interval: 0
               }
            }],
            yAxis: [{
               splitLine: {
                  lineStyle: {
                     color: '#022664'
                  }
               },
               axisTick: {
                  show: false
               },
               axisLine: {
                  show: true,
                  lineStyle: {
                     color: '#022664'
                  }
               },
               axisLabel: {
                  color: '#FFFFFF',
                  fontSize: chartFontsize(14)
               },
            }],
            series: [{
               name: 'outData',
               type: 'pictorialBar',
               xAxisIndex: 0,
               data: data.data,
               barCategoryGap: "0%",
               barWidth: '50%',
               symbol: 'path://d="M150 50 L130 130 L170 130  Z',
               zlevel: 2,
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                     offset: 0,
                     color: "#65B3AD"
                  },
                  {
                     offset: 1,
                     color: "#9EFFDA"
                  }
                  ]),
                  opacity: 0.48
               },
            }, {
               name: 'inData',
               type: 'pictorialBar',
               xAxisIndex: 1,
               data: inData,
               barCategoryGap: "0%",
               barWidth: '30%',
               symbol: 'path://d="M150 50 L130 130 L170 130  Z',
               zlevel: 1,
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                     offset: 0,
                     color: "#65B3AD"
                  },
                  {
                     offset: 1,
                     color: "#9EFFDA"
                  }
                  ]),
                  opacity: 1
               },
            }]
         };
         // 设置配置项
         this.setOption(option);
      },
      setData(sendData) {
         if (sendData) {
            this.$options.chartData = sendData;
            this.organizeData(sendData)
         } else {
            this.postData()
         }
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/powerAlarm/batteryGroup/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = {
               xData: [],
               data: []
            }
            let resData = res.data;
            for (let key in resData) {
               optionData.xData.push(key);
               optionData.data.push(resData[key]);
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
         }
      },
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            if (JSON.stringify(this.$options.chartData) != '{}') {
               this.setData(this.$options.chartData);
            }
         }, 300)
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      }
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let inData = []
        data.data.map(item => {
          if (item > 10) {
            inData.push(item - 10);
          } else {
            inData.push(item);
          }
        })
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel;
              item.map(jtem => {
                if (jtem.seriesName == 'outData') {
                  str += ':' + jtem.data
                }
              });
              return str
            }
          },
          grid: {
            top: 20,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: data.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14),
              interval: 0
            }
          }, {
            show: false,
            type: 'category',
            data: data.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14),
              interval: 0
            }
          }],
          yAxis: [{
            splitLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#022664'
              }
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14)
            },
          }],
          series: [{
            name: 'outData',
            type: 'pictorialBar',
            xAxisIndex: 0,
            data: data.data,
            barCategoryGap: "0%",
            barWidth: '50%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 2,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "#65B3AD"
                },
                {
                  offset: 1,
                  color: "#9EFFDA"
                }
              ]),
              opacity: 0.48
            },
          }, {
            name: 'inData',
            type: 'pictorialBar',
            xAxisIndex: 1,
            data: inData,
            barCategoryGap: "0%",
            barWidth: '30%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "#65B3AD"
                },
                {
                  offset: 1,
                  color: "#9EFFDA"
                }
              ]),
              opacity: 1
            },
          }]
        };
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        batteryGroup(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              xData: [],
              data: []
            }
            let resData = res.data.data;
            for (let key in resData) {
              optionData.xData.push(key);
              optionData.data.push(resData[key]);
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      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() {
      this.websock.closeMyself()
      window.removeEventListener('resize', this.resize);
   }
}
</script>

<style scoped>

</style>