Commit a67d1567 authored by Andy-bubu's avatar Andy-bubu

fix: match pie label lines to series colors

parent 1425776f
...@@ -199,6 +199,8 @@ Inter 与系统回退字体之间切换。 ...@@ -199,6 +199,8 @@ Inter 与系统回退字体之间切换。
- 环形/饼图需要在图表外展示分类内容时,必须使用 ECharts 原生 `label` 与 `labelLine` 引导线, - 环形/饼图需要在图表外展示分类内容时,必须使用 ECharts 原生 `label` 与 `labelLine` 引导线,
使用与标签端点对齐的完整引导线连接对应标签,标签按“分类名称 / 真实数量”分两行显示;分类名称保持 使用与标签端点对齐的完整引导线连接对应标签,标签按“分类名称 / 真实数量”分两行显示;分类名称保持
13px/500,数量使用 14px/600;标签位置必须锚定到对应引导线终点,避免自动避让造成错位。 13px/500,数量使用 14px/600;标签位置必须锚定到对应引导线终点,避免自动避让造成错位。
每个数据项的引导线颜色必须继承该扇区的系列颜色,不能将所有分类引导线统一为灰色;标签文字仍使用
图表标签 Token,确保颜色强调落在“扇区-引导线”对应关系上。
不得把引导线拉到卡片边缘或只保留 不得把引导线拉到卡片边缘或只保留
底部图例代替内容标注。 底部图例代替内容标注。
- 环形/饼图扇区之间使用统一的紧凑 Surface 色间隙和圆角(`padAngle: 1`、`borderWidth: 2`、 - 环形/饼图扇区之间使用统一的紧凑 Surface 色间隙和圆角(`padAngle: 1`、`borderWidth: 2`、
......
...@@ -145,6 +145,12 @@ function StatusChart({ data }) { ...@@ -145,6 +145,12 @@ function StatusChart({ data }) {
).map((item) => ({ ).map((item) => ({
...item, ...item,
itemStyle: { color: colorMap.get(item.name) }, itemStyle: { color: colorMap.get(item.name) },
labelLine: {
lineStyle: {
color: colorMap.get(item.name),
width: 1.5,
},
},
})), })),
emphasis: { emphasis: {
scaleSize: 4, scaleSize: 4,
...@@ -174,10 +180,7 @@ function StatusChart({ data }) { ...@@ -174,10 +180,7 @@ function StatusChart({ data }) {
labelLine: { labelLine: {
length: 20, length: 20,
length2: 22, length2: 22,
lineStyle: { lineStyle: { width: 1.5 },
color: theme.grid,
width: 1.5,
},
show: true, show: true,
}, },
labelLayout: (params) => { labelLayout: (params) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment