From abfc074c35e8bd66ec0641173bfd703051ca701a Mon Sep 17 00:00:00 2001
From: 13404089107 <puwei@sinata.cn>
Date: 星期一, 07 四月 2025 17:00:51 +0800
Subject: [PATCH] fix
---
src/components/datascreen/RightPanel.vue | 332 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 261 insertions(+), 71 deletions(-)
diff --git a/src/components/datascreen/RightPanel.vue b/src/components/datascreen/RightPanel.vue
index 137160c..fb38b0b 100644
--- a/src/components/datascreen/RightPanel.vue
+++ b/src/components/datascreen/RightPanel.vue
@@ -4,7 +4,16 @@
<div class="panel-item top-panel-item">
<div class="box-title">安置房类型占比</div>
<div class="house-type-content">
- <div class="cityGreenLand-charts" ref="cityGreenLandCharts"></div>
+ <div class="relative">
+ <div class="cityGreenLand-charts" ref="cityGreenLandCharts"></div>
+ <div class="chartBg"></div>
+ <div class="chart-content">
+ <div class="chart-num">{{ currentType.rate }}</div>
+ <div class="chart-title">{{ currentType.type }}</div>
+ </div>
+ <div class="chart-black"></div>
+ </div>
+
<div class="right-content">
<div class="table-header">
<div class="header-item">数量</div>
@@ -14,21 +23,21 @@
<div class="data-list">
<div
class="data-item"
- :class="{ activeItem: item.name === currentType.name }"
+ :class="{ activeItem: item.type === currentType.type }"
v-for="(item, index) in houseTypeData"
:key="index"
@click="changeCurrentType(item)"
>
<div class="item-dot" :style="{ background: item.color }"></div>
- <div class="item-name">{{ item.name }}</div>
+ <div class="item-name">{{ item.type }}</div>
<div class="item-value" :style="{ color: item.color }">
- {{ item.value }}
+ {{ item.total }}
</div>
<div class="item-area" :style="{ color: item.color }">
{{ item.area }}
</div>
<div class="item-percent" :style="{ color: item.color }">
- {{ item.percent }}
+ {{ item.rate }}
</div>
</div>
</div>
@@ -48,7 +57,7 @@
></div>
<div class="compensation-list">
<div class="compensation-center">
- <div class="total-value">{{ (total*1).toFixed(2) }}</div>
+ <div class="total-value">{{ (total * 1).toFixed(2) }}</div>
<div class="total-name">总额(万元)</div>
</div>
<div class="compensation-item">
@@ -57,8 +66,8 @@
v-for="item in twoEcharts"
:key="item.name"
>
- <div class="item-name">{{ item.value }}%</div>
- <div class="item-value">{{ item.name }}</div>
+ <div class="item-name">{{ item.amountRate }}</div>
+ <div class="item-value">{{ item.type }}</div>
<div class="item-dot" :style="{ background: item.color }"></div>
</div>
</div>
@@ -71,7 +80,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>
@@ -83,59 +92,19 @@
export default {
name: "RightPanel",
+ props: {
+ data: {
+ type: Object,
+ default: () => {},
+ },
+ },
data() {
- const houseTypeData = [
- {
- name: "新建商品住房",
- value: 321,
- area: 35344,
- percent: "56.8%",
- color: "#00ffff",
- },
- {
- name: "商业用房",
- value: 321,
- area: 35344,
- percent: "34.5%",
- color: "#34D160",
- },
- {
- name: "停车位",
- value: 321,
- area: 35344,
- percent: "56.8%",
- color: "#F8B551",
- },
- {
- name: "二手住房",
- value: 321,
- area: 35344,
- percent: "56.8%",
- color: "#BF40BF",
- },
- ];
-
return {
- houseTypeData,
- currentType: houseTypeData[0],
+ houseTypeData: [],
+ currentType: {},
total: null,
- twoEcharts: [
- {
- name: "首付款",
- value: 78.8,
- color: "#00ffff",
- },
- {
- name: "季度款",
- value: 78.8,
- color: "#34D160",
- },
- {
- name: "过渡补贴",
- value: 78.8,
- color: "#F8B551",
- },
- ],
+ barOption: {},
+ twoEcharts: [],
typeDistOption: {
tooltip: {
trigger: "item",
@@ -165,23 +134,166 @@
},
mounted() {
this.$nextTick(() => {
- this.init();
- this.initCompensationOption(this.twoEcharts);
+ this.init(this.data.placementTypeResponses);
+ this.initCompensationOption(this.data.monthCompensationResponses);
+ this.initBarChart();
});
},
methods: {
changeCurrentType(type) {
this.currentType = type;
},
- init() {
+ 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(data) {
+ if (!data || data.length == 0) {
+ this.houseTypeData = [];
+ this.currentType = {};
+ return;
+ }
const chartDom = this.$refs.cityGreenLandCharts;
if (!chartDom) return;
const myChart = echarts.init(chartDom);
let colors = ["#286DF7ee", "#04F7FDee", "#E23AA9ee", "#FFC852ee"];
- let xData = ["第一产业", "第二产业", "第三产业", "城乡居民生活用电"];
- let yData = [25, 25, 25, 25];
+ this.houseTypeData = data.map((item, index) => {
+ return {
+ ...item,
+ color: colors[index],
+ };
+ });
+ this.currentType = this.houseTypeData[0];
+ let xData = data.map((item) => item.type);
+ let yData = data.map((item) => item.total);
// 传入数据生成 option
let optionsData = [];
for (let i = 0; i < xData.length; i++) {
@@ -233,7 +345,7 @@
},
grid3D: {
show: false,
- boxHeight: 0.5,
+ boxHeight: 1,
bottom: "50%",
viewControl: {
distance: 280,
@@ -326,7 +438,7 @@
if (u > Math.PI * 2.5) {
return Math.sin(u);
}
- return Math.sin(v) > 0 ? 2 * height : -1;
+ return Math.sin(v) > 0 ? 27 : -1; //柱状体高度
},
};
},
@@ -431,7 +543,7 @@
show: false,
},
itemStyle: {
- opacity: 0.1,
+ opacity: 0.05,
color: "#0ff",
},
parametricEquation: {
@@ -458,8 +570,30 @@
});
return series;
},
+ // 随机颜色
+ getRandomColor() {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+ },
initCompensationOption(data) {
+ if (!data || !data.length) {
+ this.twoEcharts = [];
+ return;
+ }
+ let list = ["#00ffff", "#34D160", "#F8B551"];
+ data = data.map((item, index) => {
+ return {
+ ...item,
+ color: list[index],
+ };
+ });
+ this.twoEcharts = data || [];
+
const chartDom = this.$refs.compensationCharts;
if (!chartDom) return;
@@ -512,16 +646,16 @@
let total = 0;
let arr = [];
for (let i = 0; i < data.length; i++) {
- max = Math.max(max, data[i].value);
- total += data[i].value;
+ max = Math.max(max, data[i].amount);
+ total += data[i].amount;
arr.push({
- value: data[i].value,
+ value: data[i].amount,
itemStyle: { color: data[i].color },
});
}
this.total = total;
option.angleAxis.max = total;
- option.radiusAxis.data = data.map((item) => item.name);
+ option.radiusAxis.data = data.map((item) => item.type);
option.series.data = arr;
chartCompensation.setOption(option);
@@ -588,6 +722,57 @@
height: calc(100% - 30px);
display: flex;
padding: 10px 13px;
+ .relative {
+ position: relative;
+
+ .chartBg {
+ position: absolute;
+ width: 100%;
+ height: 58%;
+ top: 56px;
+ left: 0px;
+ background: url("@/assets/echartsBg.png") no-repeat center center;
+ background-size: 100% 100%;
+ }
+ .chart-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ left: 0px;
+ z-index: 99;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ .chart-num {
+ height: 20px;
+ font-family: "pangmenzhengdao";
+ font-size: 20px;
+ color: #ffffff;
+ text-shadow: 0px 2px 4px #40a9ff;
+ }
+ .chart-title {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ margin-top: 23px;
+ margin-bottom: 60px;
+ }
+ }
+ .chart-black {
+ position: absolute;
+ left: 55px;
+ top: 86px;
+ height: 12%;
+ width: 35%;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 28px / 10px;
+ padding-top: 17px;
+ }
+ }
.pie-chart {
position: relative;
@@ -789,6 +974,7 @@
}
.item-name {
+ font-family: "pangmenzhengdao";
width: 100px;
color: #fff;
font-weight: 500;
@@ -912,4 +1098,8 @@
}
}
}
+
+.pie-chart {
+ height: calc(100% - 35px);
+}
</style>
\ No newline at end of file
--
Gitblit v1.7.1