展示各部分占整体的比例关系，适合展示不超过7个分类的占比数据
const config = {
data: pieData,
angleField: 'value',
colorField: 'type',
radius: 0.8,
color: ['#5B8FF9', '#5AD8A6', '#F6BD16', '#E86452', '#945FB9'],
label: {
type: 'outer',
content: '{name} {percentage}',
style: { fontSize: 11 },
},
legend: false, // 使用自定义横向图例，与环形图保持一致
interactions: [{ type: 'element-active' }],
};
| 参数 | 值 | 说明 |
|---|---|---|
angleField | string | 扇形角度映射字段（数值） |
colorField | string | 颜色映射字段（分类） |
radius | 0.8 | 饼图外半径（0-1） |
innerRadius | 0 / 0.6 | 0为饼图，>0为环形图 |
| 建议 | 说明 |
|---|---|
| 分类数量 | 建议不超过7个，过多时考虑合并或使用其他图表 |
| 数据差异 | 各部分差异不宜过大，否则小部分难以识别 |
| 环形图 | 中心可放置关键指标，增强信息传达 |
new Pie('chart-donut', {
data,
angleField: 'value',
colorField: 'type',
radius: 0.8,
innerRadius: 0.6, // 环形关键配置
color: ['#5B8FF9', '#5AD8A6', '#F6BD16', '#E86452', '#945FB9'],
statistic: {
title: { content: '总计' },
content: { content: '13,000' },
},
}).render();
new Rose('chart-rose', {
data,
xField: 'type',
yField: 'value',
radius: 0.75, // 减小半径，为外部标签留出空间
appendPadding: 30, // 增加外部padding，确保标签完全显示
color: ['#5B8FF9', '#5AD8A6', '#F6BD16', '#E86452', '#945FB9'],
label: {
type: 'outer',
content: '{name}',
style: { fontSize: 11 },
autoRotate: false, // 保持水平显示
},
}).render();