饼图
少量类别构成。建议英文标识：PieChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.pie-chart |
| 名称 | 饼图 |
| 二级分类 | 图表（charts） |
| 用途 | 少量类别构成 |
| 描述 | 建议英文标识：PieChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="pie-chart">；nameKey/valueKey 映射切片；缺省隐藏标签（showLabel 开启显示）；切片色取 chart-1..5 令牌循环。
DSL 结构
{
"type": "PieChart",
"props": {
"data": "${data.traffic}",
"nameKey": "channel",
"valueKey": "visits",
"showLabel": true
}
}何时用
何时使用
- 少量类别（≤ 6）的构成占比。
何时不用
- 类别多或占比接近（人眼难辨角度差）：用 ColumnChart。
- 需要中心指标：用 DonutChart。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 无标签 | 纯扇区 + 图例 | 类别少且图例可辨识 |
| 带标签 | 扇区内/外显示名称数值 | 报表导出场景 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 切片数据行 |
nameKey / valueKey | string | 'name' / 'value' | 切片名称 / 数值字段 |
showLabel | boolean | false | 显示切片标签 |
colors / title / height / onSelect | — | — | 同 LineChart；onSelect 点击切片 |
使用规范
- 类别 ≤ 6 且最大占比可辨识；超出改用柱图。
- 占比小于 5% 的类别合并为"其他"。
正例
- ✓ 流量来源构成：5 个渠道切片 + 图例。
反例
- ✕ 10+ 类别的饼图（扇区过窄标签堆叠）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。