模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/dischargeCircuit.vue

@@ -1,421 +1,581 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="dischargeCircuit">
   <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
      <div class="echarts-content" ref="dischargeCircuit">

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

<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
// 放电电流 页面
export default {
  name: "dischargeCircuit",
  chart: "",
  props: {
    id: {
      require: true,
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: ""
    },
    top: {
      type: Number,
      default: 15,
    },
    bottom: {
      type: Number,
      default: 60
    },
    space: {
      type: Number,
      default: 4
    },
  },
  data() {
    return {
   name: "dischargeCircuit",
   chart: "",
   chartData: {},
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
      name: {
         type: String,
         default: ""
      },
      top: {
         type: Number,
         default: 15,
      },
      bottom: {
         type: Number,
         default: 60
      },
      space: {
         type: Number,
         default: 4
      },
   },
   data() {
      return {
         userId: "",
         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.discharge.resize();
      },
      toParentPage(value) {
         if (typeof (value) == 'string') {
            window.parent.parent.postMessage({
               cmd: "syncPage",
               params: {
                  pageInfo: {
                     label: "电池实时告警",
                     name: "batteryrTimequery",
                     src: "#/batteryrTimequery/?alarmType=" + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.discharge.setOption(opt);
         this.$options.discharge.on('click', () => {
            let name = "放电电流"
            checkboxs.dcgj.map(item => {
               if (item.label == name) {
                  this.toParentPage(item.value)
               }
            })
         })
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/batteryAlarm/dischargeAnalysis/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         let self = this;
         let xAxisData = [];//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例']
         let maxYAxis = [];
         let xData = [];
         let data = [];
         if (res.code == 1) {
            let result = res.data;
            for (const key in result) {
               xAxisData.push(key);
               xData.push(result[key]);
               if (typeof (result[key]) == 'string') {
                  data.push(parseFloat(result[key].replace(/%/g, "")));
               } else {
                  data.push(result[key]);
               }
            }
            let maxInt = Math.max.apply(null, data) + 100;
            data.forEach(() => {
               maxYAxis.push(maxInt);
            });
            self.optionSet(xAxisData, maxYAxis, xData, data);
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      setData(dataList) {
         let self = this;
         // 存值
         self.$options.chartData = dataList;
         if (!dataList) {
            self.postData()
         } else {
            self.optionSet(dataList.xAxisData, dataList.maxYAxis, dataList.xData, dataList.data);
         }
      },
      // 获取对应数据
      getArrValue(value) {
         let test = 0;
         if (value == "告警总数比例" || value == "告警机房数比例") {
            test = 1;
         }
         return test;
      },
      // 图表配置
      optionSet(xAxisData, maxYAxis, xData, data) {
         let self = this;
         var option = {
            grid: {
               top: 40,
               right: 50,
               left: 50,
               bottom: 30
            },
            xAxis: [
               {
                  //左侧柱状图的x轴    下X轴
                  type: 'category',
                  gridIndex: 0,//y轴所在的 grid 的索引
                  // boundaryGap: false,
                  splitLine: 'none',
                  axisTick: 'none',
                  axisLine: {
                     show: true,
                     lineStyle: {
                        width: 2,
                        color: 'rgba(117,103,244,1)',
                     }
                  },
                  axisLabel: {
                     // verticalAlign: 'bottom',
                     align: 'center',
                     textStyle: {
                        color: '#FFFFFF',
                        fontSize: '12'
                     }
                  },
                  data: xAxisData,//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                  // inverse: true, //反转
               },
               {
                  // 左侧柱状图的Y轴        上X轴
                  gridIndex: 0,//y轴所在的 grid 的索引
                  splitLine: 'none',
                  axisTick: 'none',
                  axisLine: {
                     show: false
                  },
                  axisLabel: {
                     color: function (params, index) {
                        let colorList = [
                           "#EB6F49",
                           "#757EFA",
                           "#1A6AEF",
                           "#67E0E3",
                           "#FED601"
                        ];
                        return colorList[index];
                     },
                  },
                  // inverse: true, //反转
                  data: xData//[555,444,333,222,666],
               },
            ],
            yAxis: [
               {
                  //坐标轴  左Y轴
                  type: 'value',
                  // name: '数值',
                  min: 0,
                  max: maxYAxis[0],
                  // interval: 300,
                  axisLine: {
                     show: false,
                     // y坐标线样式
                     lineStyle: {
                        width: 3
                     },
                     // y坐标文字样式
                     itemStyle: {
                        width: 3,
                        color: "#ffffff"
                     }

    }
  },
  methods: {
    setOption(opt) {
      this.$options.discharge.setOption(opt);
    },
    setData() {
    var option = {
            grid: {
                left: '10%',
                right: '5%',
                bottom: '10%',
                top: '17%',
                z: 22
            },
            xAxis: [
                {
                    //左侧柱状图的x轴
                    type: 'category',
                    gridIndex: 0,//y轴所在的 grid 的索引
                    // boundaryGap: false,
                    splitLine: 'none',
                    axisTick: 'none',
                    axisLine: {
                        show:true,
                        lineStyle: {
                            width:2,
                            color: 'rgba(117,103,244,1)',
                        }
                    },
                    axisLabel: {
                        // verticalAlign: 'bottom',
                        align: 'center',
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: '12'
                        }
                    },
                    data: ['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                    // inverse: true, //反转
                },
                {
                    // 左侧柱状图的Y轴
                    gridIndex: 0,//y轴所在的 grid 的索引
                    splitLine: 'none',
                    axisTick: 'none',
                    axisLine: {
                        show:false
                    },
                    axisLabel:{
                        color:function (params,index) {
                        let colorList = [
                            "#EB6F49",
                            "#67E0E3",
                            "#FED601",
                            "#757EFA",
                            "#1A6AEF"
                        ];
                        return colorList[index];
                        },
                    },
                    data: [555,444,333,222,666],
                },
                ],
            yAxis: {
                //坐标轴
                axisLine: {
                    show: false,
                    // y坐标线样式
                    lineStyle:{
                    width:3  
                    },
                    // y坐标文字样式
                    itemStyle:{
                    width:3,
                    color:"#ffffff" 
                    }
                    
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff',
                    }
                },
                //分格线
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#000'
                    }
                }
            },
                
            
            series: [
                {
                    name: '低告警数量',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [555,0,0,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '告警机房总数',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,444,0,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '告警机房数比例',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,333,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '告警总数',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,222,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '告警总数比例',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,0,666],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '外框',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    barGap: '-1',
                    data: [1800,1800, 1800,1800,1800],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: 'rgba(255, 255, 255, 0.15)',
                            barBorderRadius: 6,
                        }
                    },
                    z: 0
                },
                {
                    name: '低告警数量',
                    type: 'pictorialBar',
                    // symbol: '../../assets/logo copy.png',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))),
                    z: 12,
                    data: [{
                        value: 555,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                    name: '告警机房总数',
                    type: 'pictorialBar',
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))),
                    z: 12,
                    data: [{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 444,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                    name: '告警机房数比例',
                    type: 'pictorialBar',
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))),
                    z: 12,
                    data: [{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 333,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                    name: '告警总数',
                    type: 'pictorialBar',
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))),
                    z: 12,
                    data: [{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 222,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                    name: '告警总数比例',
                    type: 'pictorialBar',
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))),
                    z: 12,
                    data: [{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 666,
                        symbolPosition: 'end'
                    }]
                },
            ]
        };
        this.setOption(option);
    },
    resize() {
        let self = this;
            setTimeout(function(){
                self.$options.discharge.resize();
                self.setData(null);
            })
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);
                  },
                  //坐标值标注
                  axisLabel: {
                     show: true,
                     textStyle: {
                        color: '#ffffff',
                     }
                  },
                  //分格线
                  splitLine: {
                     show: false,
                     lineStyle: {
                        color: '#000'
                     }
                  }
               },
               {//右Y轴
                  type: 'value',
                  // name: '比例',
                  min: 0,
                  max: 100,
                  // interval: 10,
                  axisLabel: {
                     formatter: '{value} %'
                  },
                  //分格线
                  splitLine: {
                     show: false,
                     lineStyle: {
                        color: '#000'
                     }
                  }
               }
            ],
            series: [
               // 低告警数量
               {
                  name: xAxisData[0],
                  type: 'bar',
                  xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                  yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  data: [data[0], 0, 0, 0, 0],
                  barWidth: 15,
                  itemStyle: {
                     normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                           'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
                        ].map((color, offset) => ({
                           color,
                           offset
                        }))),
                        barBorderRadius: 6
                     },
                  },
                  z: 2
               },
               // 告警总数
               {
                  name: xAxisData[1],
                  type: 'bar',
                  // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                  yAxisIndex: self.getArrValue(xAxisData[1]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  data: [0, data[1], 0, 0, 0],
                  barWidth: 15,
                  itemStyle: {
                     normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                           'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
                        ].map((color, offset) => ({
                           color,
                           offset
                        }))),
                        barBorderRadius: 6
                     },
                  },
                  z: 2
               },
               // 告警总数比例
               {
                  name: xAxisData[2],
                  type: 'bar',
                  // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                  yAxisIndex: self.getArrValue(xAxisData[2]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  data: [0, 0, data[2], 0, 0],
                  barWidth: 15,
                  itemStyle: {
                     normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                           'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
                        ].map((color, offset) => ({
                           color,
                           offset
                        }))),
                        barBorderRadius: 6
                     },
                  },
                  z: 2
               },
               // 告警机房总数
               {
                  name: xAxisData[3],
                  type: 'bar',
                  xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                  yAxisIndex: self.getArrValue(xAxisData[3]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  data: [0, 0, 0, data[3], 0],
                  barWidth: 15,
                  itemStyle: {
                     normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                           'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
                        ].map((color, offset) => ({
                           color,
                           offset
                        }))),
                        barBorderRadius: 6
                     },
                  },
                  z: 2
               },
               // 告警机房数比例
               {
                  name: xAxisData[4],
                  type: 'bar',
                  xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                  yAxisIndex: self.getArrValue(xAxisData[4]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  data: [0, 0, 0, 0, data[4]],
                  barWidth: 15,
                  itemStyle: {
                     normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                           'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
                        ].map((color, offset) => ({
                           color,
                           offset
                        }))),
                        barBorderRadius: 6
                     },
                  },
                  z: 2
               },
               // 外框
               {
                  name: '外框',
                  type: 'bar',
                  xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                  yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  barGap: '-1',
                  data: maxYAxis,//[1800,1800, 1800,1800,1800],
                  barWidth: 15,
                  itemStyle: {
                     normal: {
                        color: 'rgba(255, 255, 255, 0.15)',
                        barBorderRadius: 6,
                     }
                  },
                  z: 0
               },
               // 低告警数量
               {
                  name: xAxisData[0],
                  type: 'pictorialBar',
                  // symbol: '../../assets/logo copy.png',
                  symbolSize: [30, -30],
                  yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
                  ].map((color, offset) => ({
                     color,
                     offset
                  }))),
                  z: 12,
                  data: [{
                     value: data[0],
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }]
               },
               // 告警总数
               {
                  name: xAxisData[1],
                  type: 'pictorialBar',
                  // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                  symbolSize: [30, -30],
                  yAxisIndex: self.getArrValue(xAxisData[1]),
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
                  ].map((color, offset) => ({
                     color,
                     offset
                  }))),
                  z: 12,
                  data: [{
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: data[1],
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }]
               },
               // 告警总数比例
               {
                  name: xAxisData[2],
                  type: 'pictorialBar',
                  yAxisIndex: self.getArrValue(xAxisData[2]),
                  // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                  symbolSize: [30, -30],
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
                  ].map((color, offset) => ({
                     color,
                     offset
                  }))),
                  z: 12,
                  data: [{
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: data[2],
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }]
               },
               // 告警机房总数
               {
                  name: xAxisData[3],
                  type: 'pictorialBar',
                  yAxisIndex: self.getArrValue(xAxisData[3]),
                  // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                  symbolSize: [30, -30],
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
                  ].map((color, offset) => ({
                     color,
                     offset
                  }))),
                  z: 12,
                  data: [{
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: data[3],
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }]
               },
               // 告警机房数比例
               {
                  name: xAxisData[4],
                  yAxisIndex: self.getArrValue(xAxisData[4]),
                  type: 'pictorialBar',
                  // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                  symbolSize: [30, -30],
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
                  ].map((color, offset) => ({
                     color,
                     offset
                  }))),
                  z: 12,
                  data: [{
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: 0,
                     symbolPosition: 'end'
                  }, {
                     value: data[4],
                     symbolPosition: 'end'
                  }]
               },

    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }

            ]
         };
         this.setOption(option);
      },
      resize() {
         let self = this;
         setTimeout(function () {
            self.$options.discharge.resize();
            self.setData(self.$options.chartData);
         })
      }
   },
   mounted() {
      //   获取userId
      this.userId = localStorage.getItem("userId");
      // 基于准备好的dom，初始化echarts实例
      this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);

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

<style scoped>

</style>