From 177b209cb67cdc80117f490806b9555bae0ddef2 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 15:59:23 +0800
Subject: [PATCH] fix:添加折线数据
---
src/views/daoAnOffice/right/analysis/index.vue | 82 +++++++++++++++++++++++++++++++++++++++-
1 files changed, 79 insertions(+), 3 deletions(-)
diff --git a/src/views/daoAnOffice/right/analysis/index.vue b/src/views/daoAnOffice/right/analysis/index.vue
index 2074f06..1c38a5a 100644
--- a/src/views/daoAnOffice/right/analysis/index.vue
+++ b/src/views/daoAnOffice/right/analysis/index.vue
@@ -1,4 +1,5 @@
<!-- 浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋� -->
+
<template>
<RightTitle title="浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋�">
<template #top>
@@ -9,6 +10,7 @@
</div>
</div>
</template>
+
<template #content>
<div class="charts-container">
<div id="analysisChart" ref="analysisChart"></div>
@@ -89,6 +91,26 @@
state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
},
+ {
+ name: '榫欐睜闀�',
+ state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
+ state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '澶╅┈闀�',
+ state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
+ state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '鐜夊爞琛楅亾',
+ state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0, '2023-6': 123, '2023-7': 21},
+ state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '鐏屽彛琛楅亾',
+ state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
+ state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999, '2023-6': 61, '2023-7': 12}
+ },
]);
let acitveData = ref(testData1.value[0]);
@@ -123,7 +145,30 @@
]
},
- tooltip: {},
+ tooltip: {
+ show: true,
+ trigger: 'axis',
+ backgroundColor: '#000001cc',
+ borderWidth: 0,
+ textStyle: {
+ color: '#4D76B0',
+ fontSize: 16
+ },
+ axisPointer: {
+ type: 'shadow',
+ lable: {
+ color: '#000000'
+ }
+ },
+ padding: [20, 25],
+ formatter: function (params) {
+ let temp = params[0].name + '<br/>';
+ params.forEach(element => {
+ temp += element.seriesName + ':' + `<span style="color:${getColor(element.componentIndex)}">${element.value[`state${element.componentIndex + 1}`]}</span>` + '<br/>';
+ });
+ return temp;
+ }
+ },
grid: {
left: 0,
right: 0,
@@ -143,12 +188,22 @@
color: '#4D76B0',
margin: 15
},
+ axisLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
},
yAxis: {
axisLabel: {
fontSize: 14,
color: '#4D76B0',
},
+ splitLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
},
series: [
{
@@ -282,7 +337,11 @@
},
padding: [20, 25],
formatter: function (params) {
- return params[0].name + '<br/>' + params[0].seriesName + ':' + `<span style="color:rgba(207, 178, 73, 1)">${params[0].value}</span>` + '<br/>' + params[1].seriesName + ':' + `<span style="color:rgba(43, 176, 109, 1)">${params[1].value}</span>`;
+ let temp = params[0].name + '<br/>';
+ params.forEach(element => {
+ temp += element.seriesName + ':' + `<span style="color:${element.componentIndex === 1 ? '#2bb06d' : '#cfb249'}">${element.value}</span>` + '<br/>';
+ });
+ return temp;
}
},
grid: {
@@ -300,13 +359,24 @@
color: '#4D76B0',
margin: 15
},
- axisTick: false
+
+ axisTick: false,
+ axisLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 14,
color: '#4D76B0'
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
}
},
series: [
@@ -334,6 +404,11 @@
}
+const getColor = (index) => {
+ let colorList = ['#00a8d9', '#cfb249', '#2bb06d'];
+ return colorList[index % colorList.length];
+}
+
// 鎸傝浇
onMounted(() => {
echartObject = echarts.init(analysisChart.value);
@@ -355,6 +430,7 @@
border: 1px solid rgba(47, 91, 157, 0.8);
flex-shrink: 0;
color: #5B83BD;
+ font-family: 'PingFang SC';
}
.select-active {
--
Gitblit v1.8.0