盒须图异常点提示框优化

cpp-ui/src/assets/styles/index.scss

@@ -220,3 +220,6 @@ aside {
 .mr-0{
   margin-right: .5vw;
 }
+.mr-1{
+  margin-right: 1vw;
+}

cpp-ui/src/views/statistics/stationAccuracy/index.vue

@@ -111,6 +111,7 @@
 <script>
 import * as echarts from "echarts";
 import resize from '../../../utils/mixins/resize'
+
 export default {
   mixins: [resize],
   name: 'accuracy',
@@ -168,9 +169,9 @@ export default {
         }
       },
       chartData: {
-        boxplotData:[],
-        scatterData:[],
-        xData:[],
+        boxplotData: [],
+        scatterData: [],
+        xData: [],
       }
     }
   },
@@ -250,9 +251,9 @@ export default {
         let zqlDatas = []
         this.sortData.forEach(t => {
           times.push(t.time)
-          if (t.accuracy != ""){
+          if (t.accuracy != "") {
             zqlDatas.push(t.accuracy.replace("%", ""))
-          }else {
+          } else {
             zqlDatas.push(t.accuracy)
           }
         })
@@ -318,9 +319,9 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
-          backgroundColor:'rgba(77, 109, 144, 0.87)',
-          borderColor:'#89BFE5',
-          textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
+          backgroundColor: 'rgba(77, 109, 144, 0.87)',
+          borderColor: '#89BFE5',
+          textStyle: {color: '#fff', fontFamily: 'Microsoft YaHei'},
           axisPointer: {
             lineStyle: {
               color: '#57617B'
@@ -457,7 +458,7 @@ export default {
         _this.zqlChart.resize();
       });
     },
-    setOptions({xData, boxplotData,scatterData} = {}) {
+    setOptions({xData, boxplotData, scatterData} = {}) {
       const _this = this
       let option = {
         title: [
@@ -481,23 +482,37 @@ export default {
         animation: false,
         tooltip: {
           trigger: 'axis',
-          backgroundColor:'rgba(77, 109, 144, 0.87)',
-          borderColor:'#89BFE5',
-          textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
-          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[2]+'异常值</div><div class="ml-0">'+param.value[1]+'</div></div>'
+          backgroundColor: 'rgba(77, 109, 144, 0.87)',
+          borderColor: '#89BFE5',
+          textStyle: {color: '#fff', fontFamily: 'Microsoft YaHei'},
+          // position: function (point, params, dom, rect, size) {
+          //   // 固定在顶部
+          //   return [point[0], '-105%',point[2],'50%'];
+          // },
+          formatter: function (params) {
+            let str = params[0].axisValue + '<br/>'
+            str = '<div class="flex-column flex-wrap"  style="max-height: calc(40vh); overflow-y: auto;">';
+
+            for (let i = 0; i < params.length; i++) {
+              let param = params[i];
+              if (param.componentSubType === 'boxplot') {
+                str = str + '<div class="flex justify-between"><div>' + param.marker + '最小值</div><div class="ml-1 mr-1">' + param.value[1] + '</div></div>' +
+                  '<div class="flex justify-between"><div>' + param.marker + '上四分位数</div><div class="ml-1 mr-1">' + param.value[2] + '</div></div>' +
+                  '<div class="flex justify-between"><div>' + param.marker + '中位数</div><div class="ml-1 mr-1">' + param.value[3] + '</div></div>' +
+                  '<div class="flex justify-between"><div>' + param.marker + '下四分位数</div><div class="ml-1 mr-1">' + param.value[4] + '</div></div>' +
+                  '<div class="flex justify-between"><div>' + param.marker + '最大值</div><div class="ml-1 mr-1">' + param.value[5] + '</div></div>'
               }
-              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>'
+              if (param.componentSubType === 'scatter') {
+
+                str += '<div>' + param.marker + param.value[2] + '异常值: <span class="ml-1 mr-1">' + param.value[1] + '</span></div>';
+                // if (param.value.length > 3) {
+                //   str += '<div style="margin-left: ">异常值: ' + param.value[3] + '</div>';
+                // }
+
               }
+
             }
+            str += '</div>';
             return str
           }
         },
@@ -546,12 +561,12 @@ export default {
             itemStyle: {
               color: function (params) {
                 for (let i = 0; i < boxplotData.length; i++) {
-                  if (boxplotData[i].length>0&&boxplotData[i][5] == params.value[0]){
+                  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])) {
+                    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]) {
+                    if (value < boxplotData[i][0] || value > boxplotData[i][4]) {
                       return 'red';
                     }
                   }
@@ -596,6 +611,7 @@ export default {
   background-color: #FF0000;
   color: #ffffff;
 }
+
 .custom-pager {
   height: 70px; /* 设置你需要的高度 */
 }