From 310156b7244cd7b0c1b958f4267b5cf4e12bd90a Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 17:15:45 +0800
Subject: [PATCH] fix:修改获取实例
---
src/views/daoAnOffice/right/analysis/index.vue | 207 +++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 188 insertions(+), 19 deletions(-)
diff --git a/src/views/daoAnOffice/right/analysis/index.vue b/src/views/daoAnOffice/right/analysis/index.vue
index 00af929..1305d5d 100644
--- a/src/views/daoAnOffice/right/analysis/index.vue
+++ b/src/views/daoAnOffice/right/analysis/index.vue
@@ -1,19 +1,21 @@
<!-- 浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋� -->
+
<template>
<RightTitle title="浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋�">
<template #top>
<div class="select-container flex">
- <div class="item whitespace-no-wrap cursor-pointer" :class="{'select-active': item.isActive}" v-for="item in selectItems" :key="item.itemIndex"
- @click="changeChart(item)">
+ <div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
+ v-for="item in selectItems" :key="item.itemIndex" @click="changeChart(item)">
{{ item.name }}
</div>
</div>
</template>
+
<template #content>
<div class="charts-container">
<div id="analysisChart" ref="analysisChart"></div>
<div class="type-select-container" v-show="isShowSelect">
- <el-select v-model="typeValue" class="select-style" @change="setConfig">
+ <el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig">
<el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.name" />
</el-select>
</div>
@@ -42,10 +44,11 @@
const selectItems = ref([
- { itemIndex: 1, name: '鏃堕棿缁熻', isActive: false },
- { itemIndex: 2, name: '琛楅亾缁熻', isActive: true },
+ { itemIndex: 1, name: '鏃堕棿缁熻', isActive: true },
+ { itemIndex: 2, name: '琛楅亾缁熻', isActive: false },
]);
+// 鏌辩姸鍥炬暟鎹�
const testData = ref([
{ name: '濂庡厜濉旇閬�', state1: 1400, state2: 3533, state3: 2316 },
{ name: '钂查槼琛楅亾', state1: 1820, state2: 4281, state3: 3064 },
@@ -58,14 +61,61 @@
{ name: '鐏屽彛琛楅亾', state1: 972, state2: 2124, state3: 1500 },
]);
+// 鎶樼嚎鏁版嵁
const testData1 = ref([
- { name: '閮芥睙鍫板競', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '濂庡厜濉旇閬�', state: { '2023-1': 1000, '2023-2': 6000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '钂查槼琛楅亾', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '鑱氭簮闀�', state: { '2023-1': 1000, '2023-2': 8000, '2023-3': 12233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '閾舵潖琛楅亾', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '鐭崇緤闀�', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 12313 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
+ {
+ name: '閮芥睙鍫板競',
+ state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 2999 },
+ state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '濂庡厜濉旇閬�',
+ state: { '2023-1': 21, '2023-2': 12, '2023-3': 224, '2023-4': 662, '2023-5': 71 },
+ state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '钂查槼琛楅亾',
+ state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233, '2023-4': 2132, '2023-5': 3211 },
+ state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '鑱氭簮闀�',
+ state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111, '2023-4': 2132, '2023-5': 2999 },
+ state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '閾舵潖琛楅亾',
+ state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 12 },
+ state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123, '2023-4': 321, '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 },
+ 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]);
@@ -99,7 +149,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,
@@ -111,8 +184,31 @@
dimensions: ['name', 'state1', 'state2', 'state3'],
source: testData.value
},
- xAxis: { type: 'category', axisTick: false },
- yAxis: {},
+ xAxis: {
+ type: 'category',
+ axisTick: false,
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0',
+ margin: 15
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
+ },
+ yAxis: {
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0',
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
+ },
series: [
{
type: 'bar',
@@ -231,9 +327,25 @@
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:${element.componentIndex === 1 ? '#2bb06d' : '#cfb249'}">${element.value}</span>` + '<br/>';
+ });
+ return temp;
}
},
grid: {
@@ -245,10 +357,31 @@
},
xAxis: {
type: 'category',
- data: Object.keys(acitveData.value.state)
+ data: Object.keys(acitveData.value.state),
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0',
+ margin: 15
+ },
+
+ axisTick: false,
+ axisLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
},
yAxis: {
- type: 'value'
+ type: 'value',
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0'
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#4d76b033'
+ }
+ }
},
series: [
{
@@ -275,6 +408,12 @@
}
+// 棰滆壊
+const getColor = (index) => {
+ let colorList = ['#00a8d9', '#cfb249', '#2bb06d'];
+ return colorList[index % colorList.length];
+}
+
// 鎸傝浇
onMounted(() => {
echartObject = echarts.init(analysisChart.value);
@@ -291,15 +430,18 @@
.item {
margin: 0 8px;
padding: 10px 14px;
- font-size: 12px;
+ font-size: 14px;
background: rgba(67, 102, 155, 0.4);
border: 1px solid rgba(47, 91, 157, 0.8);
flex-shrink: 0;
color: #5B83BD;
+ font-family: 'PingFang SC';
}
+
.select-active {
- color: #fff;
+ color: #fff;
}
+
.item:last-child {
margin-right: 0;
}
@@ -337,4 +479,31 @@
color: #4481DD;
}
}
+</style>
+
+<style lang="scss">
+
+.el-popper {
+ background-color: rgba(21, 56, 105, 0.8) !important;
+ border-color: transparent !important;
+}
+.el-popper.is-light .el-popper__arrow::before {
+ background-color: rgba(21, 56, 105, 0.8) !important;
+ border-color: transparent !important;
+}
+.el-scrollbar__view {
+ padding: 0 !important;
+}
+.el-select-dropdown__item {
+ color: #5B83BD;
+}
+
+.el-select-dropdown__wrap {
+ padding: 0 !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+ background-color: #203f64 !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0