CN-1735 fix: 修复各折线图有时候首尾点错误地等于0的问题

6 files changed, 61 insertions, 6 deletions

diff --git a/package.json b/package.json
index 72b3fa03..7582d6c9 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "d3": "^7.9.0",
     "dayjs": "^1.10.5",
     "dexie": "~3.2.0",
-    "echarts": "^5.1.1",
+    "echarts": "^5.5.1",
     "element-plus": "^2.8.5",
     "force-graph": "^1.43.5",
     "h3-js": "~3.7.2",
diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue
index 497bda94..5f156d07 100644
--- a/src/components/table/tag/TagTable.vue
+++ b/src/components/table/tag/TagTable.vue
@@ -377,9 +377,16 @@ export default {
     echartsInit (data, item, type) {
       const dom = document.getElementById(`chart${item.id}`)
       if (dom && item) {
-        // if (!this.myChart) {
+        // 判断所有曲线的第一个值和最后一个值，若均为0，则删除该点
+        // 判断total曲线的第一个值和最后一个值，若是0，则删除
+        if (data.length > 1 && data[data.length - 1].ipCount === 0 && data[data.length - 1].domainCount === 0) {
+          data.splice(data.length - 1, 1)
+        }
+        if (data.length > 1 && data[0].ipCount === 0 && data[0].domainCount === 0) {
+          data.splice(0, 1)
+        }
+
         this.myChart = echarts.init(dom)
-        // }
         this.chartOption = tagLineChartOption
         const series = []
         if (item.indicatorType && item.indicatorType.indexOf('IP') > -1) {
diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
index d714b53c..f0f6f631 100644
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -466,6 +466,19 @@ export default {
         })
       }
       lineData.splice(0, 1)
+      const totalData = lineData[0]
+      // 判断total曲线的第一个值和最后一个值，若是0，则删除
+      if (totalData.values.length > 1 && Number(totalData.values[totalData.values.length - 1][1]) === 0) {
+        lineData.forEach(r => {
+          r.values.splice(r.values.length - 1, 1)
+        })
+      }
+      if (totalData.values[0].length > 1 && Number(totalData.values[0][1]) === 0) {
+        lineData.forEach(l => {
+          l.values.splice(0, 1)
+        })
+      }
+
       const tabs = _.cloneDeep(this.tabs)
       if (val === 'Queries/s') {
         lineData.forEach((d, i) => {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 96b29c78..2928cadb 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -251,13 +251,13 @@ export default {
         }
         const _this = this
         this.chartOption = stackedLineChartOption
-        const chartOption = this.chartOption.series[0]
+        const series = this.chartOption.series[0]
         // 1、堆叠图从下往上堆叠图形，数组倒序操作，目的让堆叠图图形按数组一样从上往下展示
         // 2、tooltip会跟着倒序操作，数据展示相反，tooltip处再将数组倒序回来
         echartsData = echartsData.reverse()
         this.chartOption.series = echartsData.map((t, i) => {
           return {
-            ...chartOption,
+            ...series,
             name: t.name,
             type: 'line',
             showSymbol: false,
@@ -521,8 +521,9 @@ export default {
           }
         })
       }
+      // 删掉第一条无用数据
       lineData.splice(0, 1)
-      // TODO 下面的逻辑是判断total曲线的尾部数据，从尾往前数0值的个数，若个数大于0，所有曲线都从尾部去掉相同数量的点，最多4个
+      // 判断total曲线的尾部数据，从尾往前数0值的个数，若个数大于0，所有曲线都从尾部去掉相同数量的点，最多4个
       const totalData = lineData[0]
       if (_.get(totalData, 'values', []).length > 4) {
         let count = 0
@@ -539,6 +540,12 @@ export default {
           })
         }
       }
+      // 判断total曲线的头部数据，若第一个值是0，则删除第一个值
+      if (totalData.values[0].length > 1 && totalData.values[0][1] === 0) {
+        lineData.forEach(l => {
+          l.values.splice(0, 1)
+        })
+      }
 
       if (val === metricType.Sessions) {
         const tabs = _.cloneDeep(this.tabsTemplate)
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index e1b30b35..6974e584 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -147,8 +147,26 @@ export default {
                     this.chartOptionLineData[i].values = t.values
                   })
                   const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
+                  // 判断曲线的第一个值和最后一个值，若是0，则删除
+                  if (result[0] && result[0].values.length > 1 && result[0].values[result[0].values.length - 1][1] === 0) {
+                    result.forEach(r => {
+                      r.values.splice(r.values.length - 1, 1)
+                    })
+                  }
+                  if (result[0] && result[0].values.length > 1 && result[0].values[0][1] === 0) {
+                    result.forEach(r => {
+                      r.values.splice(0, 1)
+                    })
+                  }
                   this.echartsInit(result, this.chartData, this.chartData.params.unitType)
                 } else {
+                  // 判断曲线的第一个值和最后一个值，若是0，则删除
+                  if (res.data.result[0] && res.data.result[0].values.length > 1 && res.data.result[0].values[res.data.result[0].values.length - 1][1] === 0) {
+                    res.data.result[0].values.splice(res.data.result[0].values.length - 1, 1)
+                  }
+                  if (res.data.result[0] && res.data.result[0].values.length > 1 && res.data.result[0].values[0][1] === 0) {
+                    res.data.result[0].values.splice(0, 1)
+                  }
                   this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
                 }
               }
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index f1b8c7f1..63bd7c33 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -141,6 +141,7 @@ export default {
       }
 
       this.toggleLoading(true)
+      // 有q是下钻的
       if (params.type && params.q) {
         axios.get(api.npm.overview.trafficGraph, { params: params }).then(response => {
           const res = response.data
@@ -421,7 +422,16 @@ export default {
           }
         })
       }
+      // 删掉第一条无用数据
       lineData.splice(0, 1)
+      // 判断曲线的第一个值和最后一个值，若是0，则删除
+      if (lineData[0] && lineData[0].values.length > 1 && lineData[0].values[lineData[0].values.length - 1][1] === 0) {
+        lineData[0].values.splice(lineData[0].values.length - 1, 1)
+      }
+      if (lineData[0] && lineData[0].values.length > 1 && lineData[0].values[0][1] === 0) {
+        lineData[0].values.splice(0, 1)
+      }
+
       const tabs = _.cloneDeep(this.tabs)
       const npmQuantity = _.cloneDeep(this.npmQuantity)
       if (val === 'Sessions/s') {