雷达图
多维能力对比。建议英文标识：RadarChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.radar-chart |
| 名称 | 雷达图 |
| 二级分类 | 图表（charts） |
| 用途 | 多维能力对比 |
| 描述 | 建议英文标识：RadarChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="radar-chart">；indicatorKey 每行生成一个雷达轴（max 100）；yKeys 每列一个系列（多系列配图例）。
DSL 结构
{
"type": "RadarChart",
"props": {
"data": [
{
"skill": "研发",
"alice": 90,
"bob": 70
},
{
"skill": "市场",
"alice": 60,
"bob": 85
},
{
"skill": "管理",
"alice": 75,
"bob": 65
}
],
"indicatorKey": "skill",
"yKeys": [
"alice",
"bob"
]
}
}何时用
何时使用
- 多维能力对比（每行一个维度，每列一个对象）。
- 维度 3-8 个的对称形状比较。
何时不用
- 维度过多（>8）或单维对比（用柱图）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单对象画像 | 单系列多边形 | 个人能力画像 |
| 多对象对比 | 多系列重叠多边形 | 候选人 / 方案对比 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 每行一个维度 |
indicatorKey | string | 'indicator' | 维度名字段 |
yKeys | string[] | ['value'] | 系列字段（每列一个对比对象） |
colors / title / height / onSelect | — | — | 同 LineChart |
使用规范
- 各维度量纲需归一化到同一量程（组件按 0-100）。
- 对比系列 ≤ 3，多边形透明度保持可读。
正例
- ✓ 候选人对比：6 个能力维度 × 2 人，雷达图直观呈现差异。
反例
- ✕ 维度间量纲未归一（如金额与次数同图）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。