CN-445 多曲线图分位值问题

src/utils/unit-convert.js

@@ -118,7 +118,7 @@ export function getUnitType (column) {
 
 /* 单位转换，返回转换后的[value, unit]，type=time时若value<1ms，返回<1ms，type=percent时若value<0.01%，返回<0.01% */
 export function valueToRangeValue (value, unitType) {
-  const values = unitConvert(value, unitType)
+  const values = unitConvert(Number(value), unitType)
   if (values[0] || values[0] === 0) {
     switch (unitType) {
       case unitTypes.time: {

src/views/charts/charts/ChartEchart.vue

@@ -140,7 +140,7 @@ export default {
                   distance: [-50, 0],
                   formatter(params) {
                     const arr = unitConvert(
-                      params.value,
+                        Number(params.value),
                       chartParams.unitType,
                     ).join(' ')
                     let desc = ''
@@ -277,6 +277,10 @@ export default {
               selectedName = name
             }
           }
+
+          let serieArray = []
+          self.chartOption.series.forEach((item,i) =>{
+            if(item.name === selectedName){
               let markLine = {
                 silent: true,
                 symbol: 'none',
@@ -284,7 +288,7 @@ export default {
                   distance: [-50, 0],
                   formatter(params) {
                     const arr = unitConvert(
-                    params.value,
+                        Number(params.value),
                         chartParams.unitType,
                     ).join(' ')
                     let desc = ''
@@ -306,21 +310,18 @@ export default {
                 data: [
                   {
                     name: 'P50',
-                yAxis: self.chartData[0].aggregation.p50
+                    yAxis: self.chartData[i].aggregation.p50
-                    ? self.chartData[0].aggregation.p50
+                        ? self.chartData[i].aggregation.p50
                         : 50,
                   },
                   {
                     name: 'P90',
-                yAxis: self.chartData[0].aggregation.p90
+                    yAxis: self.chartData[i].aggregation.p90
-                    ? self.chartData[0].aggregation.p90
+                        ? self.chartData[i].aggregation.p90
                         : 90,
                   },
                 ],
               }
-          let serieArray = []
-          self.chartOption.series.forEach((item,i) =>{
-            if(item.name === selectedName){
               item.markLine = markLine
             }
             serieArray.push(item)

src/views/charts/charts/ChartEchartWithStatistics.vue

@@ -57,7 +57,7 @@ export default {
           }
         }
       })
-
+      if(this.statisticsData.length === 1){
         let markLine = {
           silent: true,
           symbol: 'none',
@@ -65,7 +65,7 @@ export default {
             distance: [-50, 0],
             formatter(params) {
               const arr = unitConvert(
-                params.value,
+                  Number(params.value),
                   chartParams.unitType,
               ).join(' ')
               let desc = ''
@@ -99,15 +99,13 @@ export default {
             },
           ],
         }
-
-      if(this.statisticsData.length === 1){
         let serieTmp = this.chartOption.series[0]
         this.chartOption.series[0] = {
           ...serieTmp,
           markLine:markLine
         }
       }
-      this.loadEchart()
+      this.loadEchart(1,true)
     },
 
     dispatchLegendSelectAction(name) {
@@ -127,47 +125,6 @@ export default {
     toggleStatisticsLegend (index) {
       let legendNum = this.statisticsData.length
       const chartParams = this.chartInfo.params
-      let markLine = {
-        silent: true,
-        symbol: 'none',
-        label: {
-          distance: [-50, 0],
-          formatter(params) {
-            const arr = unitConvert(
-                params.value,
-                chartParams.unitType,
-            ).join(' ')
-            let desc = ''
-            switch (params.dataIndex) {
-              case 0: {
-                desc = 'P50'
-                break
-              }
-              case 1: {
-                desc = 'P90'
-                break
-              }
-              default:
-                break
-            }
-            return `${arr} (${desc})`
-          },
-        },
-        data: [
-          {
-            name: 'P50',
-            yAxis: this.chartData[0].aggregation.p50
-                ? this.chartData[0].aggregation.p50
-                : 50,
-          },
-          {
-            name: 'P90',
-            yAxis: this.chartData[0].aggregation.p90
-                ? this.chartData[0].aggregation.p90
-                : 90,
-          },
-        ],
-      }
       if(legendNum > 1){
         let selectedNum = this.statisticsData.filter(item => {return item.active === true}).length //点击前，高亮legend个数
         if(selectedNum === legendNum){//全部曲线高亮时
@@ -205,6 +162,47 @@ export default {
           let serieArray = []
           this.chartOption.series.forEach((item,i) =>{
             if(item.name === selectedName){
+              let markLine = {
+                silent: true,
+                symbol: 'none',
+                label: {
+                  distance: [-50, 0],
+                  formatter(params) {
+                    const arr = unitConvert(
+                        Number(params.value),
+                        chartParams.unitType,
+                    ).join(' ')
+                    let desc = ''
+                    switch (params.dataIndex) {
+                      case 0: {
+                        desc = 'P50'
+                        break
+                      }
+                      case 1: {
+                        desc = 'P90'
+                        break
+                      }
+                      default:
+                        break
+                    }
+                    return `${arr} (${desc})`
+                  },
+                },
+                data: [
+                  {
+                    name: 'P50',
+                    yAxis: this.chartData[i].aggregation.p50
+                        ? this.chartData[i].aggregation.p50
+                        : 50,
+                  },
+                  {
+                    name: 'P90',
+                    yAxis: this.chartData[i].aggregation.p90
+                        ? this.chartData[i].aggregation.p90
+                        : 90,
+                  },
+                ],
+              }
               item.markLine = markLine
             }
             serieArray.push(item)
@@ -234,6 +232,47 @@ export default {
 
         let selectedAfterNum = this.statisticsData.filter((item,i) => {return item.active === true}).length //点击后，高亮legend个数
         if(selectedAfterNum === 1) {//点击后只有一条曲线高亮
+          let markLine = {
+            silent: true,
+            symbol: 'none',
+            label: {
+              distance: [-50, 0],
+              formatter(params) {
+                const arr = unitConvert(
+                    Number(params.value),
+                    chartParams.unitType,
+                ).join(' ')
+                let desc = ''
+                switch (params.dataIndex) {
+                  case 0: {
+                    desc = 'P50'
+                    break
+                  }
+                  case 1: {
+                    desc = 'P90'
+                    break
+                  }
+                  default:
+                    break
+                }
+                return `${arr} (${desc})`
+              },
+            },
+            data: [
+              {
+                name: 'P50',
+                yAxis: this.chartData[0].aggregation.p50
+                    ? this.chartData[0].aggregation.p50
+                    : 50,
+              },
+              {
+                name: 'P90',
+                yAxis: this.chartData[0].aggregation.p90
+                    ? this.chartData[0].aggregation.p90
+                    : 90,
+              },
+            ],
+          }
           this.chartOption.series[0].markLine = markLine
         }else {
           this.chartOption.series[0].markLine = []

src/views/charts/charts/chart-echart-mixin.js

@@ -77,13 +77,13 @@ export default {
         return allZero
       }
     },
-    loadEchart (chartNum) {
+    loadEchart (chartNum,refresh=false) {
       this.$emit('showLoading', true)
       try {
-        this.myChart.setOption(this.chartOption)
+        this.myChart.setOption(this.chartOption,refresh)
         this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart))
         if (chartNum && chartNum == 2) {
-          this.myChart2.setOption(this.chartOption2)
+          this.myChart2.setOption(this.chartOption2,refresh)
           this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
         }
         const _this = this