From 5e18ec9021e43ff75fdcd253ce7f38dbc71fea3f Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 13 Nov 2024 17:54:58 +0800 Subject: [PATCH] =?UTF-8?q?CN-1735=20fix:=20=E4=BF=AE=E5=A4=8D=E5=90=84?= =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=9C=89=E6=97=B6=E5=80=99=E9=A6=96?= =?UTF-8?q?=E5=B0=BE=E7=82=B9=E9=94=99=E8=AF=AF=E5=9C=B0=E7=AD=89=E4=BA=8E?= =?UTF-8?q?0=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/table/tag/TagTable.vue | 11 +++++++++-- .../charts/dnsInsight/DnsTrafficLine.vue | 13 +++++++++++++ .../networkOverview/NetworkOverviewLine.vue | 13 ++++++++++--- src/views/charts2/charts/npm/NpmLine.vue | 18 ++++++++++++++++++ .../charts2/charts/npm/NpmTrafficLine.vue | 10 ++++++++++ 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') {