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 | 330 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 193 insertions(+), 137 deletions(-)
diff --git a/src/components/datascreen/RightPanel.vue b/src/components/datascreen/RightPanel.vue
index e1b01d6..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>
@@ -82,67 +91,20 @@
import "echarts-gl";
export default {
- name: 'RightPanel',
+ name: "RightPanel",
props: {
data: {
type: Object,
- default: () => { }
- }
+ 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,
barOption: {},
- twoEcharts: [
- {
- name: "首付款",
- value: 78.8,
- color: "#00ffff",
- },
- {
- name: "季度款",
- value: 78.8,
- color: "#34D160",
- },
- {
- name: "过渡补贴",
- value: 78.8,
- color: "#F8B551",
- },
- ],
+ twoEcharts: [],
typeDistOption: {
tooltip: {
trigger: "item",
@@ -172,8 +134,8 @@
},
mounted() {
this.$nextTick(() => {
- this.init();
- this.initCompensationOption(this.twoEcharts);
+ this.init(this.data.placementTypeResponses);
+ this.initCompensationOption(this.data.monthCompensationResponses);
this.initBarChart();
});
},
@@ -182,135 +144,156 @@
this.currentType = type;
},
initBarChart() {
- if (!this.data.quarterPayResponses || !this.data.quarterPayResponses[0]) return;
+ 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('-', '/'));
+ 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 maxValue = Math.max(...sortedData.map((item) => item[1]));
const yAxisMax = Math.ceil(maxValue / 100) * 100;
this.barOption = {
tooltip: {
- trigger: 'axis',
- formatter: function(params) {
+ trigger: "axis",
+ formatter: function (params) {
const dataParams = params[1];
// 获取当前柱子的颜色（取渐变色的起始色）
let color;
if (dataParams.dataIndex === 0) {
- color = '#FFEF00';
+ color = "#FFEF00";
} else if (dataParams.dataIndex === 1) {
- color = '#00FFC3';
+ color = "#00FFC3";
} else if (dataParams.dataIndex === 2) {
- color = '#00DBFF';
+ color = "#00DBFF";
} else {
- color = '#057BFF';
+ 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',
+ backgroundColor: "#ffffff",
borderWidth: 1,
textStyle: {
- color: '#333333',
- fontSize: 14
+ color: "#333333",
+ fontSize: 14,
},
- padding: [8, 12]
+ padding: [8, 12],
},
grid: {
- top: '10%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ top: "10%",
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
},
xAxis: {
- type: 'category',
- data: sortedData.map(item => item[0]),
+ type: "category",
+ data: sortedData.map((item) => item[0]),
axisLine: {
lineStyle: {
- color: 'rgba(30, 44, 88, 1)'
- }
+ color: "rgba(30, 44, 88, 1)",
+ },
},
axisTick: {
- show: false
+ show: false,
},
axisLabel: {
- color: '#ffffff',
- fontSize: 12
- }
+ color: "#ffffff",
+ fontSize: 12,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
max: yAxisMax,
splitNumber: 4,
axisLabel: {
- color: 'rgba(88, 115, 150, 1)',
- fontSize: 12
+ color: "rgba(88, 115, 150, 1)",
+ fontSize: 12,
},
splitLine: {
lineStyle: {
- color: 'rgba(30, 44, 88, 1)'
- }
- }
+ color: "rgba(30, 44, 88, 1)",
+ },
+ },
},
series: [
{
- type: 'bar',
- barWidth: '30%',
+ type: "bar",
+ barWidth: "30%",
z: 1,
data: Array(sortedData.length).fill(yAxisMax),
itemStyle: {
- color: 'rgba(0, 255, 255, 0.1)'
- }
+ color: "rgba(0, 255, 255, 0.1)",
+ },
},
{
- type: 'pictorialBar',
- symbol: 'roundRect',
+ type: "pictorialBar",
+ symbol: "roundRect",
symbolSize: [20, 6],
- symbolRepeat: 'fixed',
+ symbolRepeat: "fixed",
symbolMargin: 1,
symbolClip: true,
- symbolPosition: 'start',
+ 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' }
- ])
- }
- }))
- }
- ]
+ 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() {
+ 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++) {
@@ -362,7 +345,7 @@
},
grid3D: {
show: false,
- boxHeight: 0.5,
+ boxHeight: 1,
bottom: "50%",
viewControl: {
distance: 280,
@@ -455,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; //柱状体高度
},
};
},
@@ -560,7 +543,7 @@
show: false,
},
itemStyle: {
- opacity: 0.1,
+ opacity: 0.05,
color: "#0ff",
},
parametricEquation: {
@@ -587,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;
@@ -641,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);
@@ -717,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;
@@ -918,7 +974,7 @@
}
.item-name {
- font-family: 'pangmenzhengdao';
+ font-family: "pangmenzhengdao";
width: 100px;
color: #fff;
font-weight: 500;
--
Gitblit v1.7.1