cpp/cpp-ui/src/views/largeScreen/components/left-bottom.vue

<template>
  <div>
    <div class="position-a echartsFullIcon" @click="openFull">
      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
    </div>
    <div id="tickChart"/>
    <!-- 全屏弹框 -->
    <div class="echartsFullDialog">
      <el-dialog
        title="短期偏差统计"
        :visible.sync="dialogVisible"
        :fullscreen="true"
        :destroy-on-close="true"
        center
      >
        <div id="main" ref="fullChart" :style="'width:100%;height:' + (screenHeight - 110) + 'px'"/>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {dqTickOptions} from '../echarts-data'
export default {
  data() {
    return {
      dialogVisible: false,
      screenHeight: window.innerHeight,
      tickChart: null,
      fullChart: null,
      chartData: {
        boxplotData:[],
        scatterData:[],
        xData:[],
        q1:null,
        q3:null,
        min:null,
        max:null
      },
      option:{}
    }
  },
  props: {
    params: {type: Object}
  },
  watch: {
    params: {
      // immediate: true,// 第一次立即监听
      handler(value) {
        this.chartData = value

        this.chartData ={
          boxplotData: [
            "",
            "",
            "",
            "",
            [
              -3.21,
              16.67,
              27.45,
              29.92,
              49.79,
              "2024-11-16"
            ],
            "",
            [
              -44.91,
              0,
              20.72,
              29.94,
              74.85,
              "2024-11-18"
            ],
            [
              -44.91,
              0,
              20.01,
              29.94,
              74.85,
              "2024-11-19"
            ],
            "",
            ""
          ],
          scatterData: {
            '新疆':[
              [
                "2024-11-18",
                66.05
              ],[
                "2024-11-18",
                66.05
              ],
              [
                "2024-11-18",
                64.36
              ]
            ],
            '风电':[
              [
                "2024-11-18",
                66.05
              ],[
                "2024-11-18",
                66.05
              ],
              [
                "2024-11-18",
                64.36
              ]
            ],
          }
            ,
          xData: [
            "2024-11-12",
            "2024-11-13",
            "2024-11-14",
            "2024-11-15",
            "2024-11-16",
            "2024-11-17",
            "2024-11-18",
            "2024-11-19",
            "2024-11-20",
            "2024-11-21"
          ]
        }

        this.setOptions(this.chartData)
      }
    }
  },
  mounted() {
    const _this = this
    this.$nextTick(() => {
      this.initChart()
    })
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight
        _this.screenHeight = window.screenHeight
      })()
    }
  },
  beforeDestroy() {
    if (this.tickChart) {
      this.tickChart.dispose();
      this.tickChart = null
      window.removeEventListener("resize", this.chartsResize);
    }
    if (this.fullChart) {
      this.fullChart.dispose();
      this.fullChart = null
    }

  },
  methods: {
    initChart() {
      // this.option = JSON.parse(JSON.stringify(dqTickOptions))
      // this.option.tooltip.formatter = function (params){
      //   let str = params[0].axisValue +'<br/>'
      //   for(let param of params){
      //     if(param.componentSubType === 'scatter'){
      //       str = str + '<div class="flex justify-between"><div>'+param.marker+param.value[0]+'异常点</div><div class="ml-0">'+param.value[1]+'</div></div>'
      //     }
      //     if(param.componentSubType === 'boxplot'){
      //       str = str + '<div class="flex justify-between"><div>'+param.marker+'min</div><div >'+param.value[1]+'</div></div>'+
      //         '<div class="flex justify-between"><div>'+param.marker+'Q1</div><div>'+param.value[2]+'</div></div>'+
      //         '<div class="flex justify-between"><div>'+param.marker+'median</div><div>'+param.value[3]+'</div></div>'+
      //         '<div class="flex justify-between"><div>'+param.marker+'Q3</div><div>'+param.value[4]+'</div></div>'+
      //         '<div class="flex justify-between"><div>'+param.marker+'max</div><div>'+param.value[5]+'</div></div>'
      //     }
      //   }
      //   return str
      // }
      this.tickChart = this.$echarts.init(document.getElementById('tickChart'));
      this.setOptions(this.chartData)
    },
    openFull(){
      const _this = this
      _this.dialogVisible = true// 打开弹窗
      _this.$nextTick(() => {
        const chartFul = this.$refs.fullChart
        if (chartFul) {
          _this.setFullOptions(_this.chartData)// 画图
        }
      })
    },
    setOptions({xData, boxplotData,scatterData} = {}) {
      const _this = this
      let series = [
        {
          name: '',
          type: 'boxplot',
          itemStyle: {
            color: 'rgba(126,199,250,0.86)',
            // 边线颜色
            borderColor: '#89BFE5',
            // 边线宽度
            borderWidth: 2
          },
          data: boxplotData
        }]
      for (let key in scatterData){
        series.push({
          name:key,
          type: 'scatter',
          symbolSize: 8,
          itemStyle: {
            color: function (params) {
              for (let i = 0; i < boxplotData.length; i++) {
                if (boxplotData[i].length>0&&boxplotData[i][5] == params.value[0]){
                  var value = params.value[1];
                  if ((value < boxplotData[i][1] && value > boxplotData[i][0] )|| (value >boxplotData[i][3] && value < boxplotData[i][4])) {
                    return 'orange';
                  }
                  if (value  <boxplotData[i][0] || value > boxplotData[i][4]) {
                    return 'red';
                  }
                }
              }

            }
          },
          data: scatterData[key]
        })
      }
      this.option = {
        dataZoom: [{
          type: 'inside'
        }],
        grid: {
          top: 50,
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        animation: false,
        tooltip: {
          trigger: 'axis',
          backgroundColor:'rgba(77, 109, 144, 0.87)',
          borderColor:'#89BFE5',
          textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
          // enterable:true,
          position: function (point, params, dom, rect, size) {
            // 固定在顶部
            return [point[0], '-50%'];
          },
          formatter: function (params){
            let str = '<div style="max-height: 50vh;overflow-y: auto">'+params[0].axisValue +'<br/>'
            let scatterStr = '<div class="flex"><div>异常点</div><div class="ml-0">'
            for(let key in scatterData){
              let tempStr = '<div class="flex"><div>'+key+':</div><div class="flex" style="flex-wrap: wrap;">'
              let data = params.filter(_=>_.seriesName === key)
              if(data.length>0){
                for(let param of data){
                  if(param.componentSubType === 'scatter') {
                    tempStr = tempStr + '<span class="ml-0" style="color: ' + param.color + '">' + param.value[1] + '</span>,'
                  }
                }
                tempStr = tempStr + '</div></div>'
                scatterStr = scatterStr+tempStr
              }
            }
            scatterStr = scatterStr+'</div></div>'
            for(let param of params){
              if(param.componentSubType === 'boxplot'){
                str = str + '<div class="flex justify-between"><div>'+param.marker+'最小值</div><div >'+param.value[1]+'</div></div>'+
                  '<div class="flex justify-between"><div>'+param.marker+'第一四分位数</div><div>'+param.value[2]+'</div></div>'+
                  '<div class="flex justify-between"><div>'+param.marker+'中位数</div><div>'+param.value[3]+'</div></div>'+
                  '<div class="flex justify-between"><div>'+param.marker+'第三四分位数</div><div>'+param.value[4]+'</div></div>'+
                  '<div class="flex justify-between"><div>'+param.marker+'最大值</div><div>'+param.value[5]+'</div></div>'
              }
            }
            str = str + scatterStr+'</div>'
            return str
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {show: true},
          axisLine: {
            onZero: false,
            // lineStyle: {
            //   color: '#5fbbeb'
            // }
          },
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            padding: [3, 0, 0, 0],
            formatter: '{value}',
            textStyle: {
              fontSize: 14,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        series:series
        // series: [
        //   {
        //     name: '',
        //     type: 'boxplot',
        //     itemStyle: {
        //       color: 'rgba(126,199,250,0.86)',
        //       // 边线颜色
        //       borderColor: '#89BFE5',
        //       // 边线宽度
        //       borderWidth: 2
        //     },
        //     data: boxplotData
        //   },
        //   {
        //     type: 'scatter',
        //     symbolSize: 8,
        //     itemStyle: {
        //       color: function (params) {
        //         for (let i = 0; i < boxplotData.length; i++) {
        //           if (boxplotData[i].length>0&&boxplotData[i][5] == params.value[0]){
        //             var value = params.value[1];
        //             if ((value < boxplotData[i][1] && value > boxplotData[i][0] )|| (value >boxplotData[i][3] && value < boxplotData[i][4])) {
        //               return 'orange';
        //             }
        //             if (value  <boxplotData[i][0] || value > boxplotData[i][4]) {
        //               return 'red';
        //             }
        //           }
        //         }
        //
        //       }
        //     },
        //     data: scatterData
        //   }
        // ]
      }
      this.tickChart.setOption(this.option, true)
      window.addEventListener("resize", function () {
        _this.tickChart.resize();
      });
    },
    chartsResize(){
      if(this.tickChart !== null && this.tickChart !== undefined){
        this.tickChart.resize();
      }
    },
    setFullOptions({xData, boxplotData,scatterData} = {}) {
      this.fullChart = this.$echarts.init(document.getElementById('main'));
      let option = JSON.parse(JSON.stringify(dqTickOptions))
      let series = [
        {
          name: '',
          type: 'boxplot',
          itemStyle: {
            color: 'rgba(126,199,250,0.86)',
            // 边线颜色
            borderColor: '#89BFE5',
            // 边线宽度
            borderWidth: 2
          },
          data: boxplotData
        }]
      for (let key in scatterData){
        series.push({
          name:key,
          type: 'scatter',
          symbolSize: 8,
          itemStyle: {
            color: function (params) {
              for (let i = 0; i < boxplotData.length; i++) {
                if (boxplotData[i].length>0&&boxplotData[i][5] == params.value[0]){
                  var value = params.value[1];
                  if ((value < boxplotData[i][1] && value > boxplotData[i][0] )|| (value >boxplotData[i][3] && value < boxplotData[i][4])) {
                    return 'orange';
                  }
                  if (value  <boxplotData[i][0] || value > boxplotData[i][4]) {
                    return 'red';
                  }
                }
              }

            }
          },
          data: scatterData[key]
        })
      }
      option.tooltip.formatter = function (params){
        let str = '<div style="max-height: 50vh;overflow-y: auto">'+params[0].axisValue +'<br/>'
        let scatterStr = '<div class="flex"><div>异常点</div><div class="ml-0">'
        for(let key in scatterData){
          let tempStr = '<div class="flex"><div>'+key+':</div><div class="flex" style="max-width:30vw;flex-wrap: wrap;">'
          let data = params.filter(_=>_.seriesName === key)
          for(let param of params){
            if(param.componentSubType === 'scatter') {
              tempStr = tempStr + '<span class="ml-0" style="color: ' + param.color + '">' + param.value[1] + '</span>,'
            }
          }
          tempStr = tempStr + '</div></div>'
          scatterStr = scatterStr+tempStr
        }
        scatterStr = scatterStr+'</div></div>'
        for(let param of params){
          if(param.componentSubType === 'boxplot'){
            str = str + '<div class="flex justify-between"><div>'+param.marker+'最小值</div><div >'+param.value[1]+'</div></div>'+
              '<div class="flex justify-between"><div>'+param.marker+'第一四分位数</div><div>'+param.value[2]+'</div></div>'+
              '<div class="flex justify-between"><div>'+param.marker+'中位数</div><div>'+param.value[3]+'</div></div>'+
              '<div class="flex justify-between"><div>'+param.marker+'第三四分位数</div><div>'+param.value[4]+'</div></div>'+
              '<div class="flex justify-between"><div>'+param.marker+'最大值</div><div>'+param.value[5]+'</div></div>'
          }
        }
        str = str + scatterStr+'</div>'
        return str
      }
      option.xAxis.data = xData
      option.series = series
      // option.series[0].data = boxplotData
      // option.series[1].data = scatterData
      this.fullChart.setOption(option, true)
    }
  }
}
</script>
<style>
#tickChart {
  width: 100%;
  height: 30vh;
}
</style>