From a3f948bd041b7cebf3e3242dcce910ed0fb1299c Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 03 Jun 2025 10:54:43 +0800
Subject: [PATCH] feat:工作台饼图label
---
src/views/wel/index.vue | 26 +++++++++++++-------------
1 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 00a2d9b..547c9ca 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -36,8 +36,6 @@
<img :src="overviewImg1" alt="" />
<div class="cardtotal">
<p>工单统计占比</p>
- <!-- <div class="total-number">{{ eventTotal }}</div>
- <span>个</span> -->
</div>
</div>
@@ -45,9 +43,6 @@
<div class="status-item" v-for="(item, index) in eventTypeList" :key="index">
<div class="statusCon">
<div class="status-label">{{ item.name }}</div>
- <!-- <div :style="{ color: item.color }" class="status-value">
- {{ item.value }}<span>个</span>
- </div> -->
<div class="status-value">{{ item.value }}<span>个</span></div>
<div class="ratio">
占比
@@ -226,7 +221,8 @@
rate: item.rate,
})),
};
-
+ const containerWidth = chart.value.clientWidth
+ const isSmallScreen = containerWidth < 768 // 移动端判断
const echartsOption = {
color: ['#FF472F', '#FF7411', '#FFC300', '#0291A1'],
tooltip: {
@@ -242,7 +238,7 @@
border-radius: 0.4rem;
font-size: 1.2rem;" class="tooltip-area">
<p>${params.marker}${params.name}</p>
- <h4 style="margin-left: 3rem;">${params.data.rate || params.percent}%</h4>
+ <h4 style="margin-left: 1rem;">${params.data.rate || params.percent}%</h4>
</div>`;
},
},
@@ -280,22 +276,24 @@
},
alignTo: 'labelLine',
overflow: 'truncate',
+ overflow: 'none', // 禁用省略号
+ bleedMargin: 30, // 防止标签被截断
rich: {
a: {
color: 'rgba(28, 31, 35, 0.80)',
- fontSize: '1.2rem',
+ fontSize: isSmallScreen ? '1rem' : '1.2rem',
},
b: {
- color: '#1C1F23',
- fontSize: '1.4rem',
- fontWeight: 'bold', // 确保加粗
+ color: '#1C1F23',
+ fontSize: isSmallScreen ? '1rem' : '1.3rem',
+ fontWeight: 'bold',
},
},
},
labelLine: {
show: true,
- length: 5, // 调整引导线长度
- length2: 15,
+ length: 3, // 调整引导线长度
+ length2: 5,
lineStyle: {
cap: 'round',
},
@@ -366,6 +364,7 @@
itemWidth: 15,
itemHeight: 10,
itemGap: 25,
+ fontSize:'1.2rem'
},
xAxis: {
type: 'category',
@@ -386,6 +385,7 @@
name: '单位:万套',
nameTextStyle: {
color: '#383838',
+ fontSize:'1.2rem'
},
min: 1,
logBase: 3,
--
Gitblit v1.9.3