条形图
长分类名称的横向比较。建议英文标识：BarChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.bar-chart |
| 名称 | 条形图 |
| 二级分类 | 图表（charts） |
| 用途 | 长分类名称的横向比较 |
| 描述 | 建议英文标识：BarChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="bar-chart">；类目在纵轴（yKey），数值在横轴（xKeys）；支持堆叠；点击条块触发 onSelect。
DSL 结构
{
"type": "BarChart",
"props": {
"data": "${data.channels}",
"yKey": "channel",
"xKeys": [
"clicks"
],
"title": "渠道点击"
}
}何时用
何时使用
- 类目名称长（地区全称、URL、标题类）的横向比较。
- 排名榜（Top N）展示。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单系列 | 横向单色条 | Top N 排名 |
| 堆叠 | 横向累积条 | 长类目的构成比较 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 数据行数组 |
yKey | string | — | 类目字段（纵轴） |
xKeys | string[] | ['value'] | 数值字段（横轴，多系列传多个） |
stacked | boolean | false | 堆叠条 |
colors / title / height / onSelect | — | — | 同 ColumnChart |
使用规范
- 类目按数值排序后展示（排名语义）。
- 类目名超长时结合 grid 容器溢出滚动。
正例
- ✓ 渠道效果榜：yKey=channel，xKeys=['clicks']，按点击降序。
反例
- ✕ 用 BarChart 表达时间趋势（横向时间轴阅读成本高）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。