From 0b8b77e3320c45260f28f92dadf9c66515d75328 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:50:06 +0800
Subject: [PATCH] fix: 样式调整
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 78 +++++++++++++++------------------------
1 files changed, 30 insertions(+), 48 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index fa78974..9346680 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -31,6 +31,18 @@
// 棰滆壊鍒楄〃
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
+// label 瀵屾枃鏈細涓烘瘡涓鑹茬敓鎴愪竴涓皬鍦嗙偣鏍峰紡锛堢‘淇濆湪 label 涓彲瑙侊級
+const dotRich = landColors.reduce((acc, color, idx) => {
+ acc[`dot${idx}`] = {
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: color,
+ align: 'center',
+ }
+ return acc
+}, {})
+
// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
const landLegend = {
show: false,
@@ -86,20 +98,33 @@
center: ['50%', '50%'],
label: {
show: true,
+ position: 'outside',
color: '#fff',
fontSize: 12,
lineHeight: 18,
+ rich: {
+ ...dotRich,
+ parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+ child: { fontSize: 12, color: '#fff', lineHeight: 18 },
+ },
formatter: function (params) {
const children = params?.data?.children || []
- if (!children.length) return ''
- // label 灞曠ず children 鐨� name + value
- return children.map((c) => `${c.name} ${c.value}`).join('\n')
+ const parentName = params?.data?.name || ''
+ const parentValue = params?.data?.value ?? 0
+ const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
+ const dot = `{${dotKey}|} `
+ if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
+ // 灏忓渾鐐� + 鐖剁骇 name + 鐖剁骇 value锛屾崲琛屽睍绀� children 鐨� name + value
+ return [
+ `${dot}{parent|${parentName} ${parentValue}}`,
+ ...children.map((c) => `{child|${c.name}}`),
+ ].join('\n')
},
},
labelLine: {
show: true,
- length: 40,
- length2: 40,
+ length: 20,
+ length2: 20,
lineStyle: {
color: '#B8C8E0',
},
@@ -109,7 +134,6 @@
return landColors[params.dataIndex % landColors.length]
},
},
- // 鍒濆缁戝畾涓哄搷搴斿紡鏁版嵁婧愶紝鍚庣画閫氳繃鎺ュ彛濉厖
data: dataList.value,
},
{
@@ -167,47 +191,5 @@
padding: 18px;
width: 100%;
height: 420px;
-}
-
-.quality-cards {
- display: flex;
- gap: 12px;
- width: 100%;
- height: 54px;
- justify-content: space-between;
- align-items: center;
-}
-
-.quality-cardSec {
- display: flex;
-}
-
-.quality-cardTitle {
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- display: flex;
- align-items: flex-start;
- flex-direction: column;
-}
-
-.quality-card {
- width: 80px;
- height: 60px;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.quality-card.one {
- background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png');
-}
-
-.quality-card.two {
- background-image: url('@/assets/BI/guochengyijianicon@2x.png');
-}
-
-.quality-card.three {
- background-image: url('@/assets/BI/chuchangyijianicon@2x.png');
}
</style>
--
Gitblit v1.9.3