From 27c7661cae945f65f8d2752cae41801e3c2b1485 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 25 三月 2026 14:21:37 +0800
Subject: [PATCH] 修改折线图
---
src/views/dataAnalysis/components/DataReLineChart.vue | 209 ++++++++++++++++++++++++++-------------------------
1 files changed, 107 insertions(+), 102 deletions(-)
diff --git a/src/views/dataAnalysis/components/DataReLineChart.vue b/src/views/dataAnalysis/components/DataReLineChart.vue
index 857fd8d..228831b 100644
--- a/src/views/dataAnalysis/components/DataReLineChart.vue
+++ b/src/views/dataAnalysis/components/DataReLineChart.vue
@@ -247,23 +247,29 @@
shadowBlur: 10,
formatter: (params) => {
let strName1 = params[0].name
- let value1 = params[0] ? params[0].value : 0
- let value2 = params[1] ? params[1].value : 0
- let value3 = params[2] ? params[2].value : 0
- let value4 = params[3] ? params[3].value : 0
- return `<div style="color:#fff;font-size:16px;">${strName1}</div>
- <div><span style="color:#fff;display: inline-block;width: 86px;">${
- this.chartData.barName
- }</span><span style="color:#5DB6FB">${value1}
- </span></div><div><span style="color:#fff;display: inline-block;width: 86px;">${
- this.chartData.lineName
- }</span><span style="color:#5DB6FB">${value2}
- </span></div><div><span style="color:#fff;display: inline-block;width: 86px;">${
- this.chartData.barName2
- }</span><span style="color:#FF6B6B">${value3}
- </span></div><div><span style="color:#fff;display: inline-block;width: 86px;">${
- this.chartData.lineName2
- }</span><span style="color:#FFD93D">${value4}</span>`
+ let result = `<div style="color:#fff;font-size:16px;">${strName1}</div>`
+
+ if (params[0] && this.chartData.barName) {
+ let value1 = params[0].value !== undefined ? params[0].value : 0
+ result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.barName}</span><span style="color:#5DB6FB">${value1}</span></div>`
+ }
+
+ if (params[1] && this.chartData.lineName) {
+ let value2 = params[1].value !== undefined ? params[1].value : 0
+ result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.lineName}</span><span style="color:#5DB6FB">${value2}</span></div>`
+ }
+
+ if (params[2] && this.chartData.barName2) {
+ let value3 = params[2].value !== undefined ? params[2].value : 0
+ result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.barName2}</span><span style="color:#FF6B6B">${value3}</span></div>`
+ }
+
+ if (params[3] && this.chartData.lineName2) {
+ let value4 = params[3].value !== undefined ? params[3].value : 0
+ result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.lineName2}</span><span style="color:#FFD93D">${value4}</span></div>`
+ }
+
+ return result
},
textStyle: {
rich: {
@@ -322,92 +328,91 @@
},
],
- series: [
- {
- name: this.chartData.barName,
- type: 'bar',
- barWidth: '12px',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#5B81F9',
- },
- {
- offset: 1,
- color: '#151A22',
- },
- ]),
- },
- },
- data: this.chartData.barData,
- },
-
- {
- name: this.chartData.lineName,
- type: 'bar',
- barWidth: '12px',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#16B777',
- },
- {
- offset: 1,
- color: '#0D6E4A',
- },
- ]),
- },
- },
- data: this.chartData.lineData,
- },
-
- {
- name: this.chartData.barName2,
- type: 'bar',
- barWidth: '12px',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#FF6B6B',
- },
- {
- offset: 1,
- color: '#8B0000',
- },
- ]),
- },
- },
- data: this.chartData.barData2,
- },
-
- {
- name: this.chartData.lineName2,
- type: 'bar',
- barWidth: '12px',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#FFD93D',
- },
- {
- offset: 1,
- color: '#B8860B',
- },
- ]),
- },
- },
- data: this.chartData.lineData2,
- },
- ],
+ series: [],
}
+
+ if (this.chartData.barData) {
+ option.series.push({
+ name: this.chartData.barName,
+ type: 'bar',
+ barWidth: '12px',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#5B81F9',
+ },
+ {
+ offset: 1,
+ color: '#151A22',
+ },
+ ]),
+ },
+ },
+ data: this.chartData.barData,
+ })
+ }
+
+ if (this.chartData.lineData) {
+ option.series.push({
+ name: this.chartData.lineName,
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 6,
+ lineStyle: {
+ width: 2,
+ color: '#16B777',
+ },
+ itemStyle: {
+ color: '#16B777',
+ },
+ data: this.chartData.lineData,
+ })
+ }
+
+ if (this.chartData.barData2) {
+ option.series.push({
+ name: this.chartData.barName2,
+ type: 'bar',
+ barWidth: '12px',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#FF6B6B',
+ },
+ {
+ offset: 1,
+ color: '#8B0000',
+ },
+ ]),
+ },
+ },
+ data: this.chartData.barData2,
+ })
+ }
+
+ if (this.chartData.lineData2) {
+ option.series.push({
+ name: this.chartData.lineName2,
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 6,
+ lineStyle: {
+ width: 2,
+ color: '#FFD93D',
+ },
+ itemStyle: {
+ color: '#FFD93D',
+ },
+ data: this.chartData.lineData2,
+ })
+ }
+
option && this.chartEntity.setOption(option, true)
this.bindChartClick()
},
--
Gitblit v1.8.0