- 分组
- 数据 · 2–8 个类别,分组或堆叠
- 组件
BarChart·#bar-chart
适合
- 2–8 个类别的数量对比
- 每个类别再分 2–3 个系列(分组或构成)
不适合
- 只有 2–4 个数:用 MetricBars
- 时间趋势:用 LineChart
- 有正有负:用 DeltaBars
内容上限
| 1 | categories 2–8 个,各 ≤ 6 字 |
| 2 | series 1–3 个:name ≤ 8 字 |
| 3 | note ≤ 36 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名,2–8 字 |
title · 必填 | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
categories · 必填 | string[] | 类别 |
series · 必填 | { name, values }[] | 系列 |
mode | 'group' | 'stack' | 分组或堆叠,默认 group |
unit | string | 数值单位 |
decimals | number | 小数位 |
focus | number | 焦点类别下标 |
note | string | 图下结论 |
示例代码
<BarChart
kicker="明暗"
title="深色页集中在 GTM"
categories={['Lumen', 'GEO', 'GTM', 'Launch', 'Studio']}
series={[{ name: '浅色页', values: [24, 30, 23, 13, 6] }, { name: '深色页', values: [1, 1, 5, 0, 1] }]}
mode="stack"
unit=" 页"
focus={2}
source="…"
/>