From d29d77e91951e30abba6596359b138bc4c6ac108 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 25 三月 2026 14:37:27 +0800
Subject: [PATCH] 修改折线图
---
src/views/dataAnalysis/components/DataReLineChart.vue | 182 +++++++++++++++++++++++++++------------------
1 files changed, 110 insertions(+), 72 deletions(-)
diff --git a/src/views/dataAnalysis/components/DataReLineChart.vue b/src/views/dataAnalysis/components/DataReLineChart.vue
index 1c698ba..4c8cdf3 100644
--- a/src/views/dataAnalysis/components/DataReLineChart.vue
+++ b/src/views/dataAnalysis/components/DataReLineChart.vue
@@ -247,15 +247,29 @@
shadowBlur: 10,
formatter: (params) => {
let strName1 = params[0].name
- let value1 = params[0].value
- let value2 = params[1] ? params[1].value : '鏈紑鍚�'
- 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}${this.showpercent ? '%' : ''}`
+ 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: {
@@ -329,10 +343,7 @@
},
axisLabel: {
show: true,
- formatter: '{value} %', //鍙充晶Y杞存枃瀛楁樉绀�
- formatter: (value, index) => {
- return value + (this.showpercent ? '%' : '')
- },
+ formatter: this.showpercent ? '{value} %' : '{value}',
textStyle: {
color: 'rgba(185, 185, 185, 1)',
},
@@ -340,66 +351,93 @@
},
],
- 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: 'line',
- // smooth: true,
- yAxisIndex: 1, //浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢�
-
- symbol: 'emptycircle', //鏍囪鐨勫浘褰负瀹炲績鍦�
- symbolSize: 0, //鏍囪鐨勫ぇ灏�
- areaStyle: {
- normal: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(87, 147, 67, .5)', // 0% 澶勭殑棰滆壊
- },
- {
- offset: 1,
- color: 'rgba(87, 147, 67, 0.1)', // 100% 澶勭殑棰滆壊
- },
- ],
- global: false, // 缂虹渷涓� false
- },
- },
- },
- itemStyle: {
- color: 'rgba(65, 197, 95, 1)',
- },
-
- data: this.chartData.lineData,
- },
- ],
+ 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',
+ yAxisIndex: 1,
+ 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',
+ yAxisIndex: 1,
+ 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