From 31e3901ef4c11bbb10d3dfe306533617b5ccdb61 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 24 三月 2025 17:15:44 +0800
Subject: [PATCH] 天气、各季度应补偿总额
---
src/components/datascreen/RightPanel.vue | 182 +++++++++++++++++++++++++++++++++------------
1 files changed, 133 insertions(+), 49 deletions(-)
diff --git a/src/components/datascreen/RightPanel.vue b/src/components/datascreen/RightPanel.vue
index 0192036..21332ac 100644
--- a/src/components/datascreen/RightPanel.vue
+++ b/src/components/datascreen/RightPanel.vue
@@ -18,9 +18,9 @@
<!-- 右侧第三块 -->
<div class="panel-item bottom-panel-item">
- <div class="box-title">安置房类型分布</div>
+ <div class="box-title">各季度应补偿总额</div>
<div class="pie-chart">
- <!-- <v-chart class="chart" :option="typeDistOption" autoresize /> -->
+ <v-chart class="chart" :option="barOption" autoresize />
</div>
</div>
</div>
@@ -29,6 +29,12 @@
<script>
export default {
name: 'RightPanel',
+ props: {
+ data: {
+ type: Object,
+ default: () => { }
+ }
+ },
data() {
return {
circleOption: {
@@ -39,15 +45,15 @@
show: false
},
data: [
- {
- value: 78.8,
+ {
+ value: 78.8,
name: '完成率',
itemStyle: {
color: '#00ffff'
}
},
- {
- value: 21.2,
+ {
+ value: 21.2,
name: '剩余',
itemStyle: {
color: 'rgba(0,255,255,0.2)'
@@ -56,46 +62,7 @@
]
}]
},
- barOption: {
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['2023年4月', '2023年5月', '2023年7月', '2023年10月'],
- axisLine: {
- lineStyle: {
- color: '#7cb9e8'
- }
- },
- axisLabel: {
- color: '#7cb9e8'
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#7cb9e8'
- }
- },
- axisLabel: {
- color: '#7cb9e8'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(124,185,232,0.1)'
- }
- }
- },
- series: [{
- data: [120, 200, 150, 80],
- type: 'bar',
- itemStyle: {
- color: '#00ffff'
- }
- }]
- },
+ barOption: {},
typeDistOption: {
tooltip: {
trigger: 'item'
@@ -112,7 +79,7 @@
{ value: 30, name: '其他' }
],
itemStyle: {
- color: function(params) {
+ color: function (params) {
const colorList = ['#00ffff', '#7cb9e8', 'rgba(0,255,255,0.5)'];
return colorList[params.dataIndex];
}
@@ -120,6 +87,119 @@
}]
}
};
+ },
+
+ mounted() {
+ // 组件挂载后初始化地图
+ this.$nextTick(() => {
+ this.initBarChart();
+ });
+ },
+ methods: {
+ initBarChart() {
+ if (!this.data.quarterPayResponses || !this.data.quarterPayResponses[0]) return;
+
+ const sortedData = Object.entries(this.data.quarterPayResponses[0])
+ .sort((a, b) => {
+ const dateA = new Date(a[0].replace('-', '/'));
+ const dateB = new Date(b[0].replace('-', '/'));
+ return dateA - dateB;
+ });
+
+ const maxValue = Math.max(...sortedData.map(item => item[1]));
+ const yAxisMax = Math.ceil(maxValue / 100) * 100;
+
+ this.barOption = {
+ tooltip: {
+ trigger: 'axis',
+ formatter: function (params) {
+ const dataParams = params[1];
+ return `${dataParams.name}<br/>数值：${dataParams.value}`;
+ },
+ backgroundColor: 'rgba(0,0,0,0.7)',
+ borderColor: '#00ffff',
+ borderWidth: 1,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ grid: {
+ top: '10%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: sortedData.map(item => item[0]),
+ axisTick: {
+ show: false // 隐藏刻度线
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(30, 44, 88, 1)'
+ }
+ },
+ axisLabel: {
+ color: '#ffffff',
+ fontSize: 12
+ }
+ },
+ yAxis: {
+ type: 'value',
+ max: yAxisMax,
+ splitNumber: 4,
+ axisLabel: {
+ color: 'rgba(88, 115, 150, 1)',
+ fontSize: 12
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(30, 44, 88, 1)'
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar',
+ barWidth: '30%',
+ z: 1,
+ data: Array(sortedData.length).fill(yAxisMax),
+ itemStyle: {
+ color: 'rgba(0, 255, 255, 0.1)'
+ }
+ },
+ {
+ type: 'pictorialBar',
+ symbol: 'roundRect',
+ symbolSize: [20, 6],
+ symbolRepeat: 'fixed',
+ symbolMargin: 1,
+ symbolClip: true,
+ symbolPosition: 'start',
+ symbolOffset: [0, 0],
+ symbolBoundingData: yAxisMax,
+ z: 2,
+ data: sortedData.map(item => item[1]),
+ itemStyle: {
+ color: function (params) {
+ return params.dataIndex === 0 ? '#ffd700' : '#00ffff';
+ }
+ }
+ }
+ ]
+ };
+ }
+ },
+ watch: {
+ data: {
+ handler() {
+ this.initBarChart();
+ },
+ deep: true
+ }
}
};
</script>
@@ -166,7 +246,11 @@
.chart {
width: 100%;
- height: calc(100% - 35px);
+ height: 100%;
}
}
-</style>
\ No newline at end of file
+
+.pie-chart {
+ height: calc(100% - 35px);
+}
+</style>
\ No newline at end of file
--
Gitblit v1.7.1