柱状图 <BarChart />
竖向柱状图,每根柱子上方标出数值;mode="stack" 时堆叠并只标总数。可以指定一个焦点类别,其余变淡。系列 1 是强调色,其余灰阶。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 2–8 个类别,分组或堆叠
- Component
BarChart·#bar-chart
Good for
- 2–8 个类别的数量对比
- 每个类别再分 2–3 个系列(分组或构成)
Avoid when
- 只有 2–4 个数:用 MetricBars
- 时间趋势:用 LineChart
- 有正有负:用 DeltaBars
Content limits
| 1 | categories 2–8 个,各 ≤ 6 字 |
| 2 | series 1–3 个:name ≤ 8 字 |
| 3 | note ≤ 36 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
categories · required | string[] | 类别 |
series · required | { name, values }[] | 系列 |
mode | 'group' | 'stack' | 分组或堆叠,默认 group |
unit | string | 数值单位 |
decimals | number | 小数位 |
focus | number | 焦点类别下标 |
note | string | 图下结论 |
Example
<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="…"
/>