柱状图
离散比较。建议英文标识：ColumnChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.column-chart |
| 名称 | 柱状图 |
| 二级分类 | 图表（charts） |
| 用途 | 离散比较 |
| 描述 | 建议英文标识：ColumnChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="column-chart">；类目轴自动取 xKey 字段字符串值；多系列 / 堆叠自动配图例；点击柱子触发 onSelect。events.onSelect 的 ${event} 载荷为 { name, value, seriesName, dataIndex }（echarts click 规范化）。
DSL 结构
{
"type": "ColumnChart",
"props": {
"data": "${data.sales}",
"xKey": "city",
"yKeys": [
"amount"
],
"stacked": true
}
}何时用
何时使用
- 离散类目的数值比较（各城市销售额、各环节耗时）。
- 多系列分组 / 堆叠对比。
何时不用
- 类目名称长（超过 6 字）：改用 BarChart 横向条形。
- 连续趋势：用 LineChart / AreaChart。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单系列 | 单色柱 | 单指标类目对比 |
| 分组 | 多 yKeys 并列柱 | 两至三个指标的类目对比 |
| 堆叠 | stacked 同色柱累积 | 构成总量 + 类目比较 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 数据行数组 |
xKey | string | — | 类目字段 |
yKeys | string[] | ['value'] | 数值字段，多系列传多个 |
stacked | boolean | false | 堆叠柱 |
colors / title / height | — | — / — / 256 | 颜色覆盖 / 标题 / 高度 |
onSelect | (payload: ChartSelectPayload) => void | — | 点击柱子（DSL：events.onSelect） |
使用规范
- 类目超过 12 个时考虑横向 BarChart 或滚动容器。
- 堆叠总数有意义时才用 stacked（如流量构成），无关指标保持分组。
- 数值差异量级悬殊时考虑对数轴（后续版本）或拆图。
正例
- ✓ 月度销售额对比：xKey=month，单系列纯色柱，点击柱子联动明细表。
反例
- ✕ 把 20+ 类目塞进一张柱图（标签重叠不可读）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。