在展示单一静态总量的相对比例或百分比份额时，饼图是一个熟悉且直观的选择。通过将圆形划分为成比例的扇区，饼图能让观众快速理解各个组成部分如何共同构成一个整体，例如市场份额分布、设备偏好划分或费用类别分配。
饼图的工作原理
与使用水平和垂直轴的笛卡尔图表不同，饼图将分类数据直接映射到极坐标系中的径向角度上。在 Apache ECharts 中，通过将系列的type设置为'pie'，并提供一个对象数组，其中每个条目包含一个数值value和描述性name.
1. 基础设置
要构建一个基本的饼图，定义一个系列，设置type: 'pie'，并将你的结构化数据集放入data数组中：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '电子邮件' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
高级结构技术
饼图可以调整为环形的甜甜圈布局，或使用自定义半径进行样式设计，以突出主要数据段。
1. 甜甜圈图变体
设置半径 属性作为包含两个值的数组（例如，['40%', '70%']) 会将中心区域挖空，从而创建一个清晰的环形图。这会在中间留出空间，用于自定义汇总标签：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '设备类型',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: '桌面' },
{ value: 735, name: '移动' },
{ value: 580, name: '平板' },
{ value: 484, name: '其他' }
]
}
]
};
微调布局与样式
控制标签引出线和扇区边框，即使在处理较小数据值时也能保持饼图的可读性。
1. 自定义扇区分离与标签引出
应用项目边框宽度并配置外部引导线，可防止相邻扇区上的文本重叠：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
name: '市场份额',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: '品牌 A' },
{ value: 30, name: '品牌 B' },
{ value: 15, name: '品牌 C' },
{ value: 10, name: '品牌 D' },
{ value: 5, name: '其他' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
战略最佳实践
- 将扇区数量限制在 5 到 6 个之间： 扇区过多且过小会使饼图难以阅读。将较小的数值归入“其他”类别，以保持重点清晰。
- 按大小排序扇区： 将最大的扇区从 12 点钟位置开始排列，并按顺时针方向依次排列其余扇区，以便于快速浏览。
- 在提示框或标签中直接显示百分比： 始终包含
{d}%在标签或提示框格式化器中，使观众无需进行心算即可立即看到比例关系。