fix:1. 折线图tooltip样式统一2.Network & App Performance 下钻参数调整

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -7,14 +7,21 @@
     height: 80%;
     width: 100%;
     .echarts-tooltip.echarts-tooltip-dark {
-      .cn-chart-tooltip {
+      .cn-chart-body {
         display: flex;
-        justify-content: space-between;
+        .cn-chart-tooltip {
-        .cn-chart-tooltip-value.cn-chart-tooltip__color {
+          display: flex;
-          font-size: 12px;
+          flex-direction: column;
-          color: #353636;
+          flex: 1;
-          line-height: 21px;
+          .cn-chart-tooltip-box {
-          font-weight: 600;
+            margin-right: 10px;
+          }
+          .cn-chart-tooltip-value.cn-chart-tooltip__color {
+            font-size: 12px;
+            color: #353636;
+            line-height: 21px;
+            font-weight: 600;
+          }
         }
       }
     }

src/assets/css/components/views/charts2/npmLine.scss

@@ -62,14 +62,21 @@
     height: calc(100% - 41px);
     width: 100%;
     .echarts-tooltip.echarts-tooltip-dark {
-      .cn-chart-tooltip {
+      .cn-chart-body {
         display: flex;
-        justify-content: space-between;
+        .cn-chart-tooltip {
-        .cn-chart-tooltip-value.cn-chart-tooltip__color {
+          display: flex;
-          font-size: 12px;
+          flex-direction: column;
-          color: #353636;
+          flex: 1;
-          line-height: 21px;
+          .cn-chart-tooltip-box {
-          font-weight: 600;
+            margin-right: 10px;
+          }
+          .cn-chart-tooltip-value.cn-chart-tooltip__color {
+            font-size: 12px;
+            color: #353636;
+            line-height: 21px;
+            font-weight: 600;
+          }
         }
       }
     }

src/assets/css/components/views/charts2/npmTrafficLine.scss

@@ -16,14 +16,21 @@
       height: 100%;
       width: 100%;
       .echarts-tooltip.echarts-tooltip-dark {
-        .cn-chart-tooltip {
+        .cn-chart-body {
           display: flex;
-          justify-content: space-between;
+          .cn-chart-tooltip {
-          .cn-chart-tooltip-value.cn-chart-tooltip__color {
+            display: flex;
-            font-size: 12px;
+            flex-direction: column;
-            color: #353636;
+            flex: 1;
-            line-height: 21px;
+            .cn-chart-tooltip-box {
-            font-weight: 600;
+              margin-right: 10px;
+            }
+            .cn-chart-tooltip-value.cn-chart-tooltip__color {
+              font-size: 12px;
+              color: #353636;
+              line-height: 21px;
+              font-weight: 600;
+            }
           }
         }
       }

src/views/charts/charts/tools.js

@@ -469,43 +469,27 @@ export function stackedLineTooltipFormatter (params) {
       str += dateFormatByAppearance(tData)
       str += '</div>'
     }
-    str += '<div class="cn-chart-tooltip">'
+  })
+  str += '<div class="cn-chart-body">'
+  str += '<div class="cn-chart-tooltip">'
+  params.forEach((item, i) => {
     str += '<span class="cn-chart-tooltip-box">'
     str += item.marker
-    str += `<span class="cn-chart-tooltip-content"> 
+    str += `<span class="cn-chart-tooltip-content">
-        ${item.seriesName}
+          ${item.seriesName}
-    </span>`
+      </span>`
     str += '</span>'
-    str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
-        ${unitConvert(item.data[1], item.value[2]).join(' ')}
-    </span>`
-    str += '</div>'
   })
   str += '</div>'
-  return str
+  str += '<div class="cn-chart-tooltip">'
-}
-export function trafficLineTooltipFormatter (params) {
-  let str = '<div>'
   params.forEach((item, i) => {
-    const tData = item.data[0]
-    if (i === 0) {
-      str += '<div style="margin-bottom: 5px">'
-      str += dateFormatByAppearance(tData)
-      str += '</div>'
-    }
-    str += '<div class="cn-chart-tooltip">'
-    str += '<span class="cn-chart-tooltip-box">'
-    str += item.marker
-    str += `<span class="cn-chart-tooltip-content"> 
-        ${item.seriesName}
-    </span>`
-    str += '</span>'
     str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
         ${unitConvert(item.data[1], item.value[2]).join(' ')}
     </span>`
-    str += '</div>'
   })
   str += '</div>'
+  str += '</div>'
+  str += '</div>'
   return str
 }
 export function appStackedLineTooltipFormatter (params) {

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

@@ -59,7 +59,7 @@ export default {
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
       } else if (condition.length > 1 && type && type !== 'ip') {
-        if (type === 'country' || type === 'asn') {
+        if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
           params.q = `${type}='${condition[1]}'`
         } else if (type === 'idcRenter') {
           params.q = `idc_renter='${condition[1]}'`
@@ -106,7 +106,7 @@ export default {
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
       } else if (condition.length > 1 && type && type !== 'ip') {
-        if (type === 'country' || type === 'asn') {
+        if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
           params.q = `${type}='${condition[1]}'`
         } else if (type === 'idcRenter') {
           params.q = `idc_renter='${condition[1]}'`

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

@@ -16,7 +16,7 @@ import { trafficLineChartOption } from '@/views/charts2/charts/options/echartOpt
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes, chartColor3 } from '@/utils/constants.js'
 import { shallowRef } from 'vue'
-import { trafficLineTooltipFormatter } from '@/views/charts/charts/tools'
+import { stackedLineTooltipFormatter, trafficLineTooltipFormatter } from '@/views/charts/charts/tools'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
@@ -74,7 +74,7 @@ export default {
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
       } else if (condition.length > 1 && type && type !== 'ip') {
-        if (type === 'country' || type === 'asn') {
+        if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
           params.q = `${type}='${condition[1]}'`
         } else if (type === 'idcRenter') {
           params.q = `idc_renter='${condition[1]}'`
@@ -158,7 +158,7 @@ export default {
         params.forEach(t => {
           t.seriesName = this.$t(t.seriesName)
         })
-        const str = trafficLineTooltipFormatter(params)
+        const str = stackedLineTooltipFormatter(params)
         return str
       }
       this.myChart.on('legendselectchanged', this.handleLegendClick)