环形图
构成与中心指标。建议英文标识：DonutChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.donut-chart |
| 名称 | 环形图 |
| 二级分类 | 图表（charts） |
| 用途 | 构成与中心指标 |
| 描述 | 建议英文标识：DonutChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="donut-chart">；内半径缺省 48%、外半径 72%；centerLabel/centerValue 以居中标题呈现于环心。
DSL 结构
{
"type": "DonutChart",
"props": {
"data": "${data.usage}",
"nameKey": "type",
"valueKey": "size",
"centerLabel": "总容量",
"centerValue": "1.2T"
}
}何时用
何时使用
- 构成占比 + 中心关键指标（总计、完成率）。
何时不用
- 纯构成无中心指标：PieChart 足够。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 中心指标 | 环心居中数值 + 说明 | 总计 / 完成率概览 |
| 纯环形 | 仅环 + 图例 | 构成对比 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data / nameKey / valueKey | — | — | 同 PieChart |
innerRadius / outerRadius | `number | string` | '48%' / '72%' |
centerLabel / centerValue | `string / number | string` | — |
showLabel / colors / title / height / onSelect | — | — | 同 PieChart |
使用规范
- 环心只放单一关键指标，不堆文案。
- 切片数 ≤ 6，与 PieChart 同一约束。
正例
- ✓ 存储用量：环心 1.2T 总计，切片为各业务线占比。
反例
- ✕ 中心放长句子或多行指标（环心面积有限）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。