模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/histogramAlternating.vue

@@ -1,330 +1,413 @@
<template>
  <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating">
    <div class="echarts-content" ref="alternating">
   <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating" @dblclick="dblclick">
      <div class="echarts-content" ref="alternating">

    </div>
    <div class="titleShow">
        <span><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
        <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">{{ gjjfsbl }}</span></span>
    </div>
  </div>
      </div>
   </div>
</template>

<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
// 交流ABC 页面
export default {
  name: "histogramAlternating",
  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 {
        gjjfzs:0,
        gjjfsbl:0
    }
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
        let self = this;
        if(data){
           self.$options.chartData = data;
           self.gjjfzs = data.gjjfzs;
           self.gjjfsbl = data.gjjfsbl;
           self.optionSet(self.$options.chartData);
        }else{
            self.$axios({
                method:"get",
                url:"/powerAlarm/acABC",
                params:{
                    userId:"1001"
                }
            }).then(res=>{
                if(res.data.code == 1){
                    let result = res.data.data[0];
                    let zsObj = res.data.data[1];
                    let dataList = [];
                    let dataName = [];
                        for (const key in result) {
                            dataName.push(key);
                            dataList.push(result[key]);
                        }
                        self.$options.chartData.dataList = dataList;
                        self.$options.chartData.dataName = dataName;
                        self.gjjfzs = zsObj.告警机房总数;
                        self.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                    console.log(res)
                }
            })
        }
        /*
        // 统计数据
        data:{
            dataList:[32, 43, 17, 27],
            dataName:['过压数量', '欠压数量', '缺项数量', '过流数量']
        }
        */
    // const sideData = data.dataList.map(item => item + 1);//右边的面稍高一点
    console.log(this.$refs.echartsAlternating.offsetHeight);
    
    },
    optionSet(data){
        // let domHeight = this.$refs.echartsAlternating.offsetHeight;
        // 调试右侧柱子高度
        // let floatNumber = domHeight * 0.001;
            // if(domHeight<176){
            //     floatNumber = 4.5
            // }
            // if(domHeight>175 && domHeight<326){
            //     floatNumber = 2.5
            // }
            // if(domHeight>326 && domHeight<426){
            //     floatNumber = 1.8
            // }
            // if(domHeight>425){
            //     floatNumber = 1.2;
            // }
        let option = {
                // backgroundColor: "#ffffff",
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b} : {c}",
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '10%',
                    right: '5%',
                    bottom: '10%',
                    top: '17%',
                    z: 22
                },
                xAxis: {
                    data: data.dataName,
                    //坐标轴
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    }
                },
                yAxis: {
                    //坐标轴
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    //分格线
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: '#000'
                        }
                    }
                },
                series: [{
                    name: '交流ABC',
                    tooltip: {
                        show: true,
                        position: 'top'
                    },
                    type: 'bar',
                    barWidth: 24.5,
                    markPoint: {
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "#0077EA" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#451DD3" // 100% 处的颜色
                                }], false),
                                borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                                }, {
                                    offset: 1,
                                    color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                                }], false),
                            },
                            // data: [
                            //     { value: 32, xAxis: 0, yAxis: 34},
                            //     { value: 43, xAxis: 1, yAxis: 45},
                            //     { value: 17, xAxis: 2, yAxis: 19},
                            //     { value: 27, xAxis: 3, yAxis: 29},
                            // ]
                            data:function(){
                                let thisArr = data.dataList.map((item,index)=>{
                                                    let opt = {
                                                        value:item,
                                                        xAxis:index,
                                                        yAxis:item// !=0?item + 2 : item//椭圆的坐标
                                                    }
                                                    return opt;
                                                })
                                    return thisArr;
                            }()
                        },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#451DD3" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#0077EA" // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: data.dataList,
                    barGap: 0
                }, {//侧右边配置
                    type: 'bar',
                    barWidth: 6.5,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#2663DA" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#69CCF6" // 100% 处的颜色
                            }], false)
                        }
                    },
                    barGap: 0,
                    data: function(){
                        const sideData = data.dataList.map(item =>{
                                let list = item// !=0?item + floatNumber:item;
                            return list;
                        });//右边的面稍高一点
                        return sideData;
                    }()
                }, 
                {//盖子的配置
                    name: 'b',
                    tooltip: {
                        show: false
                    },
                    type: 'pictorialBar',
                    itemStyle: {
                        // borderWidth: 1,
                        // borderColor: '#00B6EE',
                        color: '#00B6EE'
                    },
                    // symbol: 'rect',
                    // symbolOffset: [0, '-45%'],
                    // symbolSize: [barWidth, barWidth],
                    symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                    symbolSize: ['30', '12'],
                    symbolOffset: ['0', '0'],
                    // symbolRotate: -45,
                    symbolPosition: 'end',
                    data: data.dataList,
                    z: 3
                }
                ]
            };
            this.setOption(option);
    },
    resize() {
        let self = this;
      setTimeout(() => {
          this.$options.chart.resize();
          this.setData(self.$options.chartData);
        }, 300)
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.alternating);
   name: "histogramAlternating",
   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.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.jl.map(item => {
               if (item.label == name) {
                  this.toParentPage(item.value)
               }
            })
         })
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/powerAlarm/acABC/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         let self = this;
         if (res.code == 1) {
            let result = res.data[0];
            let dataList = [];
            let dataName = [];
            for (const key in result) {
               dataName.push(key);
               dataList.push(result[key]);
            }
            self.$options.chartData.dataList = dataList;
            self.$options.chartData.dataName = dataName;
            self.optionSet(self.$options.chartData);
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      setData(data) {
         let self = this;
         if (data) {
            self.$options.chartData = data;
            self.optionSet(self.$options.chartData);
         } else {
            self.postData()
         }
      },
      optionSet(data) {
         const CubeLeft = echarts.graphic.extendShape({
            shape: {
               x: 0,
               y: 0
            },
            buildPath: function (ctx, shape) {
               const xAxisPoint = shape.xAxisPoint
               const c0 = [shape.x - 10, shape.y]
               const c1 = [shape.x + 10, shape.y]
               const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
               const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
               ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
               ctx.stroke();
            }
         })
         const CubeRight = echarts.graphic.extendShape({
            shape: {
               x: 0,
               y: 0
            },
            buildPath: function (ctx, shape) {
               const xAxisPoint = shape.xAxisPoint
               const c1 = [shape.x + 11, shape.y]
               const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
               const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
               const c4 = [shape.x + 8 + 8, shape.y - 10]
               ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
               ctx.stroke();
            }
         })
         const CubeTop = echarts.graphic.extendShape({
            shape: {
               x: 0,
               y: 0
            },
            buildPath: function (ctx, shape) {
               const c1 = [shape.x - 10, shape.y - 1]
               const c2 = [shape.x + 10, shape.y - 1]
               const c3 = [shape.x + 15, shape.y - 9]
               const c4 = [shape.x - 5, shape.y - 9]
               ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
               ctx.stroke();
            }
         })
         echarts.graphic.registerShape('CubeLeft', CubeLeft)
         echarts.graphic.registerShape('CubeRight', CubeRight)
         echarts.graphic.registerShape('CubeTop', CubeTop)

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

         let option = {
            // backgroundColor: "rgba(72, 84, 96,1.0)",
            grid: {
               top: 40,
               right: 20,
               left: 50,
               bottom: 30
            },
            xAxis: {
               type: 'category',
               data: data.dataName,
               show: true,
               axisLine: {
                  show: true,
                  lineStyle: {
                     color: '#fff'
                  }
               },
               offset: 0,
               axisTick: {
                  show: false,
               },
               axisLabel: {
                  fontSize: 12,
                  interval: 0
               }
            },
            yAxis: {
               type: 'value',
               show: true,
               axisLine: {
                  show: true,
                  lineStyle: {
                     color: 'white'
                  }
               },
               splitLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  fontSize: 12
               },
            },
            series: [{
               type: 'custom',
               renderItem: (params, api) => {
                  const location = api.coord([api.value(0), api.value(1)])
                  return {
                     type: 'group',
                     children: [{
                        type: 'CubeLeft',
                        shape: {
                           api,
                           xValue: api.value(0),
                           yValue: api.value(1),
                           x: location[0],
                           y: location[1],
                           xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                           fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: "#0077EA"//api.style().fill
                           },
                           {
                              offset: 1,
                              color: "#451DD3"//'rgba(210, 218, 226,1.0)'
                           }
                           ])
                        }
                     },
                     {
                        type: 'CubeRight',
                        shape: {
                           api,
                           xValue: api.value(0),
                           yValue: api.value(1),
                           x: location[0],
                           y: location[1],
                           xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                           fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                              offset: 0,
                              color: "#2663DA"//api.style().fill
                           },
                           {
                              offset: 1,
                              color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
                           }
                           ])
                        }
                     },
                     {
                        type: 'CubeTop',
                        shape: {
                           api,
                           xValue: api.value(0),
                           yValue: api.value(1),
                           x: location[0],
                           y: location[1],
                           xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                           fill: "#00b6ee",
                        }
                     }
                     ]
                  }
               },
               data: data.dataList
            },
            {
               type: 'bar',
               name: '交流ABC',
               tooltip: {
                  show: true,
                  position: 'top'
               },
               barWidth: 24.5,
               markPoint: {
                  itemStyle: {
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#0077EA" // 0% 处的颜色
                     }, {
                        offset: 1,
                        color: "#451DD3" // 100% 处的颜色
                     }], false),
                     borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                     }, {
                        offset: 1,
                        color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                     }], false),
                  },
                  data: function () {
                     let thisArr = data.dataList.map((item, index) => {
                        let opt = {
                           value: item,
                           xAxis: index,
                           yAxis: item// !=0?item + 2 : item//椭圆的坐标
                        }
                        return opt;
                     })
                     return thisArr;
                  }()
               },
               barGap: 0,
               itemStyle: {
                  color: 'transparent'
               },
               data: data.dataList
            }

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

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

<style scoped>
    .echartsAlternating{
        position:relative;
    }
    .titleShow{
        position: absolute;
        top: 0;
        right: 0;
        text-align: right;
        padding-right: 5%;
        overflow: hidden;

    }
    .titleShow i{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgb(246,127,33);
        margin-right: 5px;
        margin-bottom: 3px;
    }
    .titleShow .textTitle{
        display: inline-block;
        width: 9rem;
        text-align: right;
        font-size: 12px;
        color: rgb(0,178,224);
    }
    .titleShow .textValue{
        display: inline-block;
        width: 40px;
        /* text-align: left; */
        text-align: left;
        font-size: 12px;
        color: rgb(246,127,33);
    }
.echartsAlternating {
   position: relative;
}
.titleShow {
   position: absolute;
   top: 0;
   right: 0;
   text-align: right;
   padding-right: 5%;
   overflow: hidden;
}
.titleShow i {
   display: inline-block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgb(246, 127, 33);
   margin-right: 5px;
   margin-bottom: 3px;
}
.titleShow .textTitle {
   display: inline-block;
   /* width: 9rem; */
   text-align: right;
   font-size: 12px;
   color: rgb(0, 178, 224);
}
.titleShow .textValue {
   display: inline-block;
   width: 40px;
   /* text-align: left; */
   text-align: left;
   font-size: 12px;
   color: rgb(246, 127, 33);
}
</style>