From c2b99128ae30b4f3ecc9afbb99e39194079ee8e0 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 04 三月 2024 15:55:20 +0800
Subject: [PATCH] fix:修改图表细节
---
src/views/daoAnOffice/right/analysis/index.vue | 72 +++++++++++++++++++++++++++---------
1 files changed, 54 insertions(+), 18 deletions(-)
diff --git a/src/views/daoAnOffice/right/analysis/index.vue b/src/views/daoAnOffice/right/analysis/index.vue
index 85010c9..2074f06 100644
--- a/src/views/daoAnOffice/right/analysis/index.vue
+++ b/src/views/daoAnOffice/right/analysis/index.vue
@@ -61,33 +61,33 @@
const testData1 = ref([
{
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 }
+ 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 }
+ 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 }
+ 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 }
+ 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 }
+ 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 }
+ 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 }
},
]);
let acitveData = ref(testData1.value[0]);
@@ -135,8 +135,21 @@
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
+ },
+ },
+ yAxis: {
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0',
+ },
+ },
series: [
{
type: 'bar',
@@ -255,9 +268,21 @@
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) {
+ 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>`;
}
},
grid: {
@@ -269,10 +294,20 @@
},
xAxis: {
type: 'category',
- data: Object.keys(acitveData.value.state)
+ data: Object.keys(acitveData.value.state),
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0',
+ margin: 15
+ },
+ axisTick: false
},
yAxis: {
- type: 'value'
+ type: 'value',
+ axisLabel: {
+ fontSize: 14,
+ color: '#4D76B0'
+ }
},
series: [
{
@@ -362,4 +397,5 @@
.el-input__inner {
color: #4481DD;
}
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0