盒须图

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

@@ -29,25 +29,8 @@ export default {
       screenHeight: window.innerHeight,
       tickChart: null,
       fullChart: null,
-      chartData: {
-        boxplotData:[
-          [-8.09, -3.11, -2.11, 0.21, 5.19],
-          [-8.65, -2.04, 0.19, 2.36, 8.97],
-          [-6.46, -0.83, 0.52, 2.92, 8.55],
-          [-7.97, -1.55, 0.37, 2.74, 9.16],
-          [-5.56, -0.89, 1.31, 2.23, 6.91],
-          [-6.23, -1.18, 0.28, 2.19, 7.24]
-        ],
-        scatterData:[
-          ["10月26", -8.41],
-          ["10月27", -5.48],
-          ["10月28", 5.61],
-          ["10月29", -8.1],
-          ["10月30", -6.39],
-          ["10月31", 7.88]
-        ],
-        xData:["10月26", "10月27", "10月28", "10月29", "10月30", "10月31"]
-      }
+      chartData: {},
+      option:{}
     }
   },
   props: {
@@ -88,6 +71,23 @@ export default {
   },
   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)
     },
@@ -102,12 +102,10 @@ export default {
       })
     },
     setOptions({xData, boxplotData,scatterData} = {}) {
-      const _this = this
-      let option = JSON.parse(JSON.stringify(dqTickOptions))
-      option.xAxis.data = xData
-      option.series[0].data = boxplotData
-      option.series[1].data = scatterData
-      this.tickChart.setOption(option, true)
+      this.option.xAxis.data = xData
+      this.option.series[0].data = boxplotData
+      this.option.series[1].data = scatterData
+      this.tickChart.setOption(this.option, true)
       window.addEventListener("resize", this.chartsResize);
     },
     chartsResize(){