From 4223c358f1ad9ffa4fcbc8fb0e350dc5bf342b51 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 24 三月 2025 18:06:53 +0800
Subject: [PATCH] 字体
---
src/components/datascreen/RightPanel.vue | 138 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 136 insertions(+), 2 deletions(-)
diff --git a/src/components/datascreen/RightPanel.vue b/src/components/datascreen/RightPanel.vue
index 137160c..e1b01d6 100644
--- a/src/components/datascreen/RightPanel.vue
+++ b/src/components/datascreen/RightPanel.vue
@@ -71,7 +71,7 @@
<div class="panel-item bottom-panel-item">
<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>
@@ -82,7 +82,13 @@
import "echarts-gl";
export default {
- name: "RightPanel",
+ name: 'RightPanel',
+ props: {
+ data: {
+ type: Object,
+ default: () => { }
+ }
+ },
data() {
const houseTypeData = [
{
@@ -119,6 +125,7 @@
houseTypeData,
currentType: houseTypeData[0],
total: null,
+ barOption: {},
twoEcharts: [
{
name: "首付款",
@@ -167,11 +174,133 @@
this.$nextTick(() => {
this.init();
this.initCompensationOption(this.twoEcharts);
+ this.initBarChart();
});
},
methods: {
changeCurrentType(type) {
this.currentType = type;
+ },
+ 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];
+ // 获取当前柱子的颜色（取渐变色的起始色）
+ let color;
+ if (dataParams.dataIndex === 0) {
+ color = '#FFEF00';
+ } else if (dataParams.dataIndex === 1) {
+ color = '#00FFC3';
+ } else if (dataParams.dataIndex === 2) {
+ color = '#00DBFF';
+ } else {
+ color = '#057BFF';
+ }
+ return `${dataParams.name}<br/><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:${color};margin-right:6px;"></span>${dataParams.value}`;
+ },
+ backgroundColor: '#ffffff',
+ borderWidth: 1,
+ textStyle: {
+ color: '#333333',
+ fontSize: 14
+ },
+ padding: [8, 12]
+ },
+ grid: {
+ top: '10%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: sortedData.map(item => item[0]),
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(30, 44, 88, 1)'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ 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, index) => ({
+ value: item[1],
+ itemStyle: {
+ color: index === 0 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#FFEF00' },
+ { offset: 0.5, color: '#C86A01' },
+ { offset: 1, color: '#402303' }
+ ]) : index === 1 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#00FFC3' },
+ { offset: 1, color: '#008570' }
+ ]) : index === 2 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#00DBFF' },
+ { offset: 1, color: '#0093A8' }
+ ]) : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#05DBFF' },
+ { offset: 0.5, color: '#057BFF' },
+ { offset: 1, color: '#030E3F' }
+ ])
+ }
+ }))
+ }
+ ]
+ };
},
init() {
const chartDom = this.$refs.cityGreenLandCharts;
@@ -789,6 +918,7 @@
}
.item-name {
+ font-family: 'pangmenzhengdao';
width: 100px;
color: #fff;
font-weight: 500;
@@ -912,4 +1042,8 @@
}
}
}
+
+.pie-chart {
+ height: calc(100% - 35px);
+}
</style>
\ No newline at end of file
--
Gitblit v1.7.1