fix: 临时性调整npm line和npm traffic line的legend名字

src/views/charts/charts/tools.js

@@ -475,7 +475,7 @@ export function stackedLineTooltipFormatter (params) {
   params.forEach((item, i) => {
     str += '<span class="cn-chart-tooltip-box">'
     str += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${item.borderColor};"></span>`
-    str += `<span class="cn-chart-tooltip-content">${item.seriesName}</span>`
+    str += `<span class="cn-chart-tooltip-content">${item.seriesName.split('(')[0]}</span>`
     str += '</span>'
   })
   str += '</div>'

src/views/charts2/charts/npm/NpmLine.vue

@@ -14,23 +14,23 @@
       <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 12">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
       <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 13">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
       <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 14">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
       <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 15">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(%)</div>
       <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 16">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(%)</div>
       <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
   </div>

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -238,7 +238,7 @@ export default {
                   }
                 })
                 this.npmQuantity = npmQuantity
-                this.echartsInit(this.npmQuantity)
+                this.echartsInit(this.npmQuantity, '(ms)')
               } else if (t.type === 'httpResponseLatency' && val === 'httpResponseLatency') {
                 const npmQuantity = _.cloneDeep(this.npmQuantity)
                 npmQuantity[1].data = t.httpResponseLatencyAvg.values ? t.httpResponseLatencyAvg.values : []
@@ -250,7 +250,7 @@ export default {
                   }
                 })
                 this.npmQuantity = npmQuantity
-                this.echartsInit(this.npmQuantity)
+                this.echartsInit(this.npmQuantity, '(ms)')
               } else if (t.type === 'sslConLatency' && val === 'sslConLatency') {
                 const npmQuantity = _.cloneDeep(this.npmQuantity)
                 npmQuantity[2].data = t.sslConLatencyAvg.values ? t.sslConLatencyAvg.values : []
@@ -262,7 +262,7 @@ export default {
                   }
                 })
                 this.npmQuantity = npmQuantity
-                this.echartsInit(this.npmQuantity)
+                this.echartsInit(this.npmQuantity, '(ms)')
               } else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') {
                 const npmQuantity = _.cloneDeep(this.npmQuantity)
                 npmQuantity[3].data = t.tcpLostlenPercentAvg.values ? t.tcpLostlenPercentAvg.values : []
@@ -274,7 +274,7 @@ export default {
                   }
                 })
                 this.npmQuantity = npmQuantity
-                this.echartsInit(this.npmQuantity)
+                this.echartsInit(this.npmQuantity, '(%)')
               } else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') {
                 const npmQuantity = _.cloneDeep(this.npmQuantity)
                 npmQuantity[4].data = t.pktRetransPercentAvg.values ? t.pktRetransPercentAvg.values : []
@@ -286,7 +286,7 @@ export default {
                   }
                 })
                 this.npmQuantity = npmQuantity
-                this.echartsInit(this.npmQuantity)
+                this.echartsInit(this.npmQuantity, '(%)')
               }
             })
           } else {
@@ -384,7 +384,7 @@ export default {
                     }
                   })
                   this.npmQuantity = npmQuantity
-                  this.echartsInit(this.npmQuantity)
+                  this.echartsInit(this.npmQuantity, '(ms)')
                 } else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') {
                   const npmQuantity = _.cloneDeep(this.npmQuantity)
                   npmQuantity[3].data = t.tcpLostlenPercent.values ? t.tcpLostlenPercent.values : []
@@ -396,7 +396,7 @@ export default {
                     }
                   })
                   this.npmQuantity = npmQuantity
-                  this.echartsInit(this.npmQuantity)
+                  this.echartsInit(this.npmQuantity, '(%)')
                 } else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') {
                   const npmQuantity = _.cloneDeep(this.npmQuantity)
                   npmQuantity[4].data = t.pktRetransPercent.values ? t.pktRetransPercent.values : []
@@ -408,7 +408,7 @@ export default {
                     }
                   })
                   this.npmQuantity = npmQuantity
-                  this.echartsInit(this.npmQuantity)
+                  this.echartsInit(this.npmQuantity, '(%)')
                 }
               })
             }
@@ -443,7 +443,7 @@ export default {
                     }
                   })
                   this.npmQuantity = npmQuantity
-                  this.echartsInit(this.npmQuantity)
+                  this.echartsInit(this.npmQuantity, '(ms)')
                 }
               })
             }
@@ -478,7 +478,7 @@ export default {
                     }
                   })
                   this.npmQuantity = npmQuantity
-                  this.echartsInit(this.npmQuantity)
+                  this.echartsInit(this.npmQuantity, '(ms)')
                 }
               })
             }
@@ -490,7 +490,7 @@ export default {
         }
       }
     },
-    echartsInit (echartsData) {
+    echartsInit (echartsData, legendUnit) {
       echartsData = echartsData.filter(t => t.show === true)
       const dom = document.getElementById('chart')
       !this.myChart && (this.myChart = echarts.init(dom))
@@ -508,7 +508,7 @@ export default {
         }
         return {
           ...chartOption,
-          name: this.$t(t.name),
+          name: this.$t(t.name) + (legendUnit || ''),
           lineStyle: {
             color: chartColor3[t.positioning],
             width: 1

src/views/charts2/charts/options/echartOption.js

@@ -384,7 +384,6 @@ export const trafficLineChartOption = {
       padding: [0, 0, 0, 2],
       fontSize: 12,
       color: '#717171',
-      fontWeight: 400,
       fontFamily: 'NotoSansSChineseRegular'
     }
   },