在展示相对类别分配时，环形图提供了一种现代且高对比度的传统实心饼图替代方案。通过移除中心部分，环形图将视觉重点从填充区域的大小转移到外环上的弧长。这个中空的中心区域为关键绩效指标、汇总总额或状态指示器创造了绝佳的视觉空间，使其成为高管状态仪表板和财务摘要的常用工具。
环形图的工作原理
在 Apache ECharts 中，环形图通过使用'pie'系列类型，并配合一个包含两个元素的radius数组：['innerRadius', 'outerRadius']。第一个值定义中空中心的开口大小，第二个值控制外边界。
1. 基础设置
要构建一个标准的环形图，需声明一个系列，设置type: 'pie'，设置radius: ['50%', '70%']，并传入包含name和value属性的数据对象：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '预算分配',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '55%'],
avoidLabelOverlap: true,
label: {
show: false
},
data: [
{ value: 1048, name: '工程' },
{ value: 735, name: '市场' },
{ value: 580, name: '运营' },
{ value: 484, name: '销售' },
{ value: 300, name: '支持' }
]
}
]
};
高级结构技巧
当与中心统计数据或圆润的视觉风格结合时，环形图能够出色地创建出精致的 UI 组件。
1. 中心标签统计叠加
利用图形元素或居中的标题组件，将总额或主要 KPI 直接显示在环形图内部：
ECharts
Edit ECharts in VPasCode
option = {
title: {
text: '$3,147',
subtext: '总支出',
left: 'center',
top: '42%',
textStyle: {
fontSize: 28,
fontWeight: 'bold',
color: '#333'
},
subtextStyle: {
fontSize: 14,
color: '#666'
}
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '支出',
type: 'pie',
radius: ['60%', '80%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
show: false
},
data: [
{ value: 1048, name: '硬件' },
{ value: 735, name: 'SaaS 订阅' },
{ value: 580, name: '办公用品' },
{ value: 484, name: '差旅' }
]
}
]
};
微调布局与扇区样式
添加微妙的圆角和明显的扇区间距，使环形图呈现出简洁、现代的外观。
1. 圆角端点与扇区间距
使用itemStyle.borderRadius配合清晰的白色边框，使每个弧形扇区呈现出柔和的药丸状外观：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
name: '存储使用情况',
type: 'pie',
radius: ['45%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#ffffff',
borderWidth: 4
},
label: {
show: true,
formatter: '{b}: {d}%'
},
data: [
{ value: 40, name: '文档' },
{ value: 25, name: '媒体文件' },
{ value: 20, name: '系统数据' },
{ value: 15, name: '可用空间' }
]
}
]
};
战略最佳实践
- 优化内径与外径比例：将内半径保持在外半径的 50% 到 70% 之间，以确保扇区足够宽，便于悬停操作，同时在中心保留充足的空白空间。
- 有意识地利用中心空间：利用中心的空心区域显示总计或选定扇区的指标，而不是在图表边缘添加额外的文本框，造成视觉杂乱。
- 限制扇区数量：将环形图的主扇区限制在 5 到 6 个。如果存在大量小类别，应将其合并为“其他”类别，以避免出现过细且难以辨认的弧线。