
- 分组
- 数据 · 两个大数字配按年份的细条
- 组件
YearBars·#year-bars
适合
- 一个指标逐年增长,再配一两个结论数字
- 年度回顾、参观人数、营收
不适合
- 要比较多个系列:用 LineChart
- 年份超过 7 个:用 LineChart
内容上限
| 1 | stats 1–2 个:value ≤ 5 字符,unit ≤ 3,label ≤ 12 字,body ≤ 24 字 |
| 2 | bars 3–7 条,从早到晚 |
| 3 | 页标题 ≤ 22 字 |
| 4 | 必须有 source |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
stats · 必填 | { value, unit?, label, body? }[] | 大数字 |
bars · 必填 | { year, value }[] | 年份条 |
format | (v: number) => string | 条末数字格式 |
source | string | 出处 |
示例代码
<YearBars
kicker="全球太阳能发电"
title="十年涨到约 11 倍"
stats={[{ value: '2,779', unit: 'TWh', label: '2025 年发电量' }]}
bars={[{ year: '2015', value: 256 }, …]}
source="…"
/>