From da0929566acb613a425e2233d6855a151a21b658 Mon Sep 17 00:00:00 2001
From: 13404089107 <puwei@sinata.cn>
Date: 星期四, 27 三月 2025 17:09:26 +0800
Subject: [PATCH] 大屏开发
---
src/components/BottomCharts.vue | 105 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 89 insertions(+), 16 deletions(-)
diff --git a/src/components/BottomCharts.vue b/src/components/BottomCharts.vue
index 10c01e4..d931996 100644
--- a/src/components/BottomCharts.vue
+++ b/src/components/BottomCharts.vue
@@ -2,7 +2,7 @@
<div class="bottom-charts">
<div class="chart-container">
<div class="chart-group">
- <div class="chart-title">租金收入趋势图</div>
+ <div class="chart-title">租金收入趋势图 <span style="font-size: 12px;">（万元）</span></div>
<div class="income-chart" ref="incomeChart"></div>
</div>
<div class="chart-group">
@@ -12,7 +12,7 @@
</div>
<div class="map-container">
<div class="map-marker-item" @click="handleMapMarkerClick('已出租')" :class="{ active: activeStatus === '已出租' }">
- <img :src="require('@/assets/blue.png')" width="30" height="30">
+ <img :src="require('@/assets/blue.png')" width="30" height="30">
<div class="map-marker-item-text">已出租</div>
</div>
<div class="map-marker-item" @click="handleMapMarkerClick('待出租')" :class="{ active: activeStatus === '待出租' }">
@@ -73,6 +73,8 @@
initCharts() {
// 租金收入趋势图表
if (Object.keys(this.rentIncomeTrend).length > 0) {
+ console.log(this.rentIncomeTrend);
+
this.charts.income = echarts.init(this.$refs.incomeChart)
this.charts.income.setOption({
grid: {
@@ -84,7 +86,16 @@
},
tooltip: {
trigger: 'axis',
- confine: true
+ confine: true,
+ formatter: function(params) {
+ let result = params[0].axisValue + '<br/>';
+ params.forEach(param => {
+ const prefix = param.seriesIndex === 0 ? '租金收入：' : '欠费：';
+ const color = param.seriesIndex === 0 ? '#ffd700' : '#F65456';
+ result += `<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>${prefix}${param.value}<br/>`;
+ });
+ return result;
+ }
},
xAxis: {
type: 'category',
@@ -100,21 +111,38 @@
rotate: 30
}
},
- yAxis: {
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
color: '#fff'
}
},
- axisLabel: {
- color: '#fff'
+ {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ color: '#fff'
+ }
}
- },
+ ],
series: [{
data: this.rentIncomeTrend.incomeData,
type: 'line',
@@ -144,7 +172,38 @@
}]
}
}
- }]
+ },{
+ data: this.rentIncomeTrend.outstandingData,
+ type: 'line',
+ yAxisIndex: 1,
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: {
+ color: '#F65456',
+ width: 2
+ },
+ itemStyle: {
+ color: '#F65456'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(246, 82, 82, 0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(246, 82, 82, 0.3)'
+ }]
+ }
+ }
+ }
+ ]
})
}
// 租户数量趋势图表
@@ -160,7 +219,15 @@
},
tooltip: {
trigger: 'axis',
- confine: true
+ confine: true,
+ formatter: function(params) {
+ let result = params[0].axisValue + '<br/>';
+ params.forEach(param => {
+ const color = '#87F7C7';
+ result += `<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>租户数量：${param.value}<br/>`;
+ });
+ return result;
+ }
},
xAxis: {
type: 'category',
@@ -312,6 +379,7 @@
&.active {
.map-marker-item-icon {
+
&::before,
&::after {
animation: ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
@@ -325,6 +393,7 @@
&:nth-child(1) {
.map-marker-item-icon {
+
// background-color: #4fsdsad9ff;
&::before,
&::after {
@@ -335,6 +404,7 @@
&:nth-child(2) {
.map-marker-item-icon {
+
// background-color: #faad14;
&::before,
&::after {
@@ -345,6 +415,7 @@
&:nth-child(3) {
.map-marker-item-icon {
+
// background-color: #ff4d4f;
&::before,
&::after {
@@ -355,6 +426,7 @@
&:nth-child(4) {
.map-marker-item-icon {
+
// background-color: #39c5bb;
&::before,
&::after {
@@ -369,6 +441,7 @@
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
+
100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
--
Gitblit v1.7.1