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) => {