From e8e09f89afd92e88aa55076d981bbeb232ad68df Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 03 四月 2026 13:15:26 +0800
Subject: [PATCH] 优化数据仪表板的网格和坐标轴标签样式，调整边距和文本格式以提高可读性
---
src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue | 40 +++++++------------
src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue | 35 +++++++----------
2 files changed, 29 insertions(+), 46 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
index bbcd5f0..f885d05 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
@@ -110,7 +110,13 @@
},
}))
-const grid = computed(() => ({ top: 0, left: '20%', right: '10%', bottom: 0 }))
+const grid = computed(() => ({
+ top: 8,
+ left: 12,
+ right: 14,
+ bottom: 8,
+ containLabel: true,
+}))
const xAxis = computed(() => [
{
@@ -127,26 +133,13 @@
inverse: false,
data: xdataName.value,
axisLabel: {
- formatter: (value) => {
- if (!value) return ''
- const maxLen = 6 // 姣忚鏈�澶氬瓧绗︽暟锛屽彲鎸夐渶璋冩暣
- if (value.length <= maxLen) return `{a|${value}}`
-
- const lines = []
- for (let i = 0; i < value.length; i += maxLen) {
- lines.push(value.slice(i, i + maxLen))
- }
- return lines.map((line) => `{a|${line}}`).join('\n')
- },
- rich: {
- a: {
- width: 120,
- fontSize: 14,
- color: '#fff',
- padding: [5, 4, 5, 0],
- align: 'right',
- },
- },
+ color: '#fff',
+ fontSize: 13,
+ width: 200,
+ overflow: 'break',
+ align: 'right',
+ margin: 10,
+ lineHeight: 18,
},
axisLine: { show: false },
axisTick: { show: false },
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue
index 21696fa..f8ad794 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue
@@ -126,10 +126,14 @@
}
})
-// grid
-const grid = computed(() => {
- return { top: 0, left: '20%', right: '10%', bottom: 0 }
-})
+// grid锛歝ontainLabel 涓哄乏渚у悕绉般�佸彸渚х櫨鍒嗘瘮棰勭暀绌洪棿锛岄伩鍏嶈鍒�
+const grid = computed(() => ({
+ top: 8,
+ left: 12,
+ right: 14,
+ bottom: 8,
+ containLabel: true,
+}))
// xAxis
const xAxis = computed(() => {
@@ -151,27 +155,13 @@
inverse: false,
data: xdataName.value,
axisLabel: {
- formatter: (value) => {
- if (!value) return ''
- const maxLen = 6 // 姣忚鏈�澶氬瓧绗︽暟锛屽彲鎸夐渶璋冩暣
- if (value.length <= maxLen) return `{a|${value}}`
-
- const lines = []
- for (let i = 0; i < value.length; i += maxLen) {
- lines.push(value.slice(i, i + maxLen))
- }
- // 澶氳鏂囨湰锛屾瘡琛岄兘濂楀悓涓�涓� rich 鏍峰紡
- return lines.map((line) => `{a|${line}}`).join('\n')
- },
- rich: {
- a: {
- width: 120,
- fontSize: 14,
- color: '#fff',
- padding: [5, 4, 5, 0],
- align: 'right',
- },
- },
+ color: '#fff',
+ fontSize: 13,
+ width: 200,
+ overflow: 'break',
+ align: 'right',
+ margin: 10,
+ lineHeight: 18,
},
axisLine: { show: false },
axisTick: { show: false },
--
Gitblit v1.9.3