From a0eeeaeac83ff3a27a87588d82db8f72ca9ce673 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Tue, 1 Aug 2023 18:34:30 +0800 Subject: [PATCH] =?UTF-8?q?CN-1185:=20=E8=B6=8B=E5=8A=BF=E5=9B=BE=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E7=9A=84=E6=95=B0=E6=8D=AE=E4=B8=8E=E6=82=AC=E6=B5=AE?= =?UTF-8?q?=E6=A1=86=E4=B8=AD=E7=9A=84=E6=95=B0=E6=8D=AE=E4=B8=8D=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/charts/charts/tools.js | 3 +++ src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue | 1 + src/views/charts2/charts/entityDetail/EntityDetailLine.vue | 1 + src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue | 1 + .../charts2/charts/networkOverview/NetworkOverviewLine.vue | 3 +++ src/views/charts2/charts/npm/NpmLine.vue | 2 ++ src/views/charts2/charts/npm/NpmTrafficLine.vue | 1 + 7 files changed, 12 insertions(+) diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js index 12f90261..92201863 100644 --- a/src/views/charts/charts/tools.js +++ b/src/views/charts/charts/tools.js @@ -461,6 +461,9 @@ export function categoryBarTooltipFormatter (params, type) { } export function stackedLineTooltipFormatter (params) { + // 堆叠图tooltip倒叙操作 + params = params.reverse() + let str = '
' params.forEach((item, i) => { const tData = item.data[0] diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue index c6ad32d4..2fdda1e4 100644 --- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue +++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue @@ -201,6 +201,7 @@ export default { if (echartsData.length > 0) { this.chartOption = stackedLineChartOption const chartOption = this.chartOption.series[0] + echartsData = echartsData.reverse() this.chartOption.series = echartsData.map((t, i) => { return { ...chartOption, diff --git a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue index 9ff4174d..06192793 100644 --- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue +++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue @@ -253,6 +253,7 @@ export default { const _this = this this.chartOption = stackedLineChartOption const chartOption = this.chartOption.series[0] + echartsData = echartsData.reverse() this.chartOption.series = echartsData.map((t, i) => { return { ...chartOption, diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue index 204a6eea..691c5e77 100644 --- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue +++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue @@ -203,6 +203,7 @@ export default { this.chartOption = linkTrafficLineChartOption const chartOption = this.chartOption.series[0] + echartsData = echartsData.reverse() this.chartOption.series = echartsData.map((t, i) => { return { ...chartOption, diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index a613372e..72e4b40c 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -205,6 +205,9 @@ export default { const _this = this this.chartOption = stackedLineChartOption const chartOption = this.chartOption.series[0] + // 1、堆叠图从下往上堆叠图形，数组倒序操作，目的让堆叠图图形按数组一样从上往下展示 + // 2、tooltip会跟着倒序操作，数据展示相反，tooltip处再将数组倒序回来 + echartsData = echartsData.reverse() this.chartOption.series = echartsData.map((t, i) => { return { ...chartOption, diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue index 95f7ccbc..112e7593 100644 --- a/src/views/charts2/charts/npm/NpmLine.vue +++ b/src/views/charts2/charts/npm/NpmLine.vue @@ -178,6 +178,8 @@ export default { } this.chartOption = npmLineChartOption this.chartOption.color = this.chartData.params.color + this.chartOption.color = this.chartOption.color.reverse() + data = data.reverse() this.chartOption.series = data.map((t, i) => { return { diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index e2f0c84e..67cd92c1 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue @@ -219,6 +219,7 @@ export default { this.chartOption = _.cloneDeep(trafficLineChartOption) const chartOption = this.chartOption.series[0] + echartsData = echartsData.reverse() this.chartOption.series = echartsData.map((t) => { // 根据参数转换y轴单位 this.chartOption.yAxis[0].axisLabel.formatter = (value) => {