组合图
多种度量或表达目标组合。建议英文标识：ComposedChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.composed-chart |
| 名称 | 组合图 |
| 二级分类 | 图表（charts） |
| 用途 | 多种度量或表达目标组合 |
| 描述 | 建议英文标识：ComposedChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="composed-chart">；声明式 series 数组（type: line|bar|area + dataKey），任一 yAxisIndex=1 时生成双数值轴；area 型为带透明填充的折线。
DSL 结构
{
"type": "ComposedChart",
"props": {
"data": "${data.monthly}",
"xKey": "month",
"series": [
{
"type": "bar",
"dataKey": "orders"
},
{
"type": "line",
"dataKey": "revenue",
"yAxisIndex": 1,
"name": "营收"
}
]
}
}何时用
何时使用
- 多种度量 / 表达目标的组合（柱 = 订单量 + 线 = 营收额，双轴）。
何时不用
- 单图型即可表达：直接用对应专用图表组件。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 柱线组合 | 柱 + 折线单轴/双轴 | 量级 + 比率同图 |
| 柱面组合 | 柱 + 面积 | 对比 + 趋势 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 数据行数组 |
xKey | string | — | 类目字段 |
series | ComposedSeriesItem[] | [] | 图型（line |
colors / title / height / onSelect | — | — | 同 LineChart |
使用规范
- 双轴仅当两序列量纲差异大时使用，且副轴系列数 ≤ 1。
- 组合 ≤ 3 个系列，过多组合失去可读性。
正例
- ✓ 月度经营：柱 = 订单量（左轴），线 = 营收额（右轴），同月对比。
反例
- ✕ 同量纲两序列也用双轴（视觉比例失真）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。