From 3200945615cb7dbd554d637c5d0b1cc938bc2069 Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Mon, 1 Dec 2025 09:45:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../personPresence/components/item-pie.vue | 25 +++++++++++++------ .../projectInfo/components/item-three.vue | 4 +-- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/views/home-index/components/personPresence/components/item-pie.vue b/src/views/home-index/components/personPresence/components/item-pie.vue index 75f69c2..a9e7754 100644 --- a/src/views/home-index/components/personPresence/components/item-pie.vue +++ b/src/views/home-index/components/personPresence/components/item-pie.vue @@ -80,22 +80,33 @@ export default { : (dataItem.value / total) * 100 ).toFixed(1) + // 截断名称:根据 rich.a 的 width: 30,设置最大显示字符数为 4 个中文字符 + // 超过则截断并添加省略号,避免文字溢出覆盖后面的内容 + const maxNameLength = 4 + const displayName = + name.length > maxNameLength + ? name.slice(0, maxNameLength) + '..' + : name + if (data.showAfter) { - return `{a|${name}} {b|${percent}%} {c|(${dataItem.value})}` + return `{a|${displayName}} {b|${percent}%} {c|(${dataItem.value})}` } else { // return `{a|${dataItem.value}} {b|${name}} {c|${percent}%}` - return `{a|${name}} {b|${dataItem.value}} {c|${percent}%}` + return `{a|${displayName}} {b|${dataItem.value}} {c|${percent}%}` } }, textStyle: { fontSize: 6, rich: { a: { - width: 30, - align: 'center', + // 名称部分:设置固定宽度,配合 formatter 中的截断逻辑使用 + // 由于 ECharts rich 文本样式对溢出处理支持有限,已在 formatter 中手动截断 + width: 50, + align: 'center', // 左对齐,避免居中导致视觉上的不对齐 + overflow: 'hidden', // 作为额外保护,隐藏可能的溢出内容 }, b: { - width: 40, + width: 30, align: 'center', // padding: [0, 10, 0, 0], color: '#666', @@ -112,8 +123,8 @@ export default { { name: '数据分布', type: 'pie', - radius: ['25%', '38%'], - center: ['22%', '50%'], // 居左侧 + radius: ['30%', '45%'], + center: ['25%', '50%'], // 居左侧 avoidLabelOverlap: false, label: { show: true, // 默认显示中心标签 diff --git a/src/views/home-index/components/projectInfo/components/item-three.vue b/src/views/home-index/components/projectInfo/components/item-three.vue index 5fbdcfc..2bf8173 100644 --- a/src/views/home-index/components/projectInfo/components/item-three.vue +++ b/src/views/home-index/components/projectInfo/components/item-three.vue @@ -102,7 +102,7 @@ export default { orient: 'vertical', right: '5%', top: 'center', - itemGap: 24, + itemGap: 10, itemWidth: 10, itemHeight: 10, selectedMode: false, // 关键点:关闭 legend 的交互 @@ -129,7 +129,7 @@ export default { align: 'right', }, b: { - width: 40, + width: 50, padding: [0, 10, 0, 0], color: '#666', },