From a60476b5a0f2b1016c08d299e84093f44dad8939 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 26 三月 2025 11:44:16 +0800
Subject: [PATCH] feat
---
src/components/datascreen/LeftPanel.vue | 94 +++++++++++++++++++++++++----------------------
1 files changed, 50 insertions(+), 44 deletions(-)
diff --git a/src/components/datascreen/LeftPanel.vue b/src/components/datascreen/LeftPanel.vue
index 136f63b..bdaffe2 100644
--- a/src/components/datascreen/LeftPanel.vue
+++ b/src/components/datascreen/LeftPanel.vue
@@ -90,14 +90,14 @@
grid: {
top: '20%',
left: '3%',
- right: '4%',
+ right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+ data: [],
axisLine: {
show: true,
lineStyle: {
@@ -109,7 +109,8 @@
},
axisLabel: {
color: '#495F88',
- fontSize: 12
+ fontSize: 12,
+ // rotate: 30, // 标签倾斜角度
}
},
yAxis: {
@@ -165,27 +166,27 @@
lineStyle: {
width: 4,
color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [{
- offset: 0,
- color: '#AE5112' // 0% 处的颜色
- }, {
- offset: 0.3,
- color: '#FEDB65' // 50% 处的颜色
- }, {
- offset: 0.7,
- color: '#FEDB65' // 50% 处的颜色
- }, {
- offset: 1,
- color: '#AE5112' // 100% 处的颜色
- }]
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: '#AE5112' // 0% 处的颜色
+ }, {
+ offset: 0.3,
+ color: '#FEDB65' // 50% 处的颜色
+ }, {
+ offset: 0.7,
+ color: '#FEDB65' // 50% 处的颜色
+ }, {
+ offset: 1,
+ color: '#AE5112' // 100% 处的颜色
+ }]
}
},
- data: [150, 180, 230, 280, 260, 100]
+ data: []
},
{
name: '补偿金额异常',
@@ -193,7 +194,7 @@
smooth: true,
symbol: 'none',
itemStyle: {
- color: '#00F2EF'
+ color: '#00F2EF'
},
areaStyle: {
opacity: 0.8,
@@ -215,31 +216,30 @@
lineStyle: {
width: 4,
color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [{
- offset: 0,
- color: '#0E5FFF' // 0% 处的颜色
- }, {
- offset: 0.3,
- color: '#00F2EF' // 50% 处的颜色
- }, {
- offset: 0.7,
- color: '#00F2EF' // 50% 处的颜色
- }, {
- offset: 1,
- color: '#0E5FFF' // 100% 处的颜色
- }]
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: '#0E5FFF' // 0% 处的颜色
+ }, {
+ offset: 0.3,
+ color: '#00F2EF' // 50% 处的颜色
+ }, {
+ offset: 0.7,
+ color: '#00F2EF' // 50% 处的颜色
+ }, {
+ offset: 1,
+ color: '#0E5FFF' // 100% 处的颜色
+ }]
}
},
- data: [200, 250, 380, 450, 380, 300]
+ data: []
}
]
}
-
};
},
watch: {
@@ -249,6 +249,7 @@
this.rankingList = newVal.streetResponses
this.$nextTick(() => {
this.animateProgressBars();
+ this.updateChartData(this.data.importErrorResponses);
});
}
},
@@ -262,11 +263,16 @@
this.rankingList.map(item => {
count += item.householdNum;
});
-
+
this.rankingList = this.rankingList.map((item, index) => {
item.percentage = (item.householdNum / count) * 100;
return item
});
+ },
+ updateChartData(apiData) {
+ this.lineOption.xAxis.data = apiData.map(item => item.month);
+ this.lineOption.series[0].data = apiData.map(item => item.areaErrorCount);
+ this.lineOption.series[1].data = apiData.map(item => item.moneyErrorCount);
}
}
};
--
Gitblit v1.7.1