← 全部模板

数字配年份条 <YearBars />

左边 1–2 个大数字(单位上标),右边 3–7 条按年份排的细横条,最新一年用强调色。为双年展风格设计,其他风格也能用。

分组
数据 · 两个大数字配按年份的细条
组件
YearBars · #year-bars

适合

  • 一个指标逐年增长,再配一两个结论数字
  • 年度回顾、参观人数、营收

不适合

  • 要比较多个系列:用 LineChart
  • 年份超过 7 个:用 LineChart

内容上限

1stats 1–2 个:value ≤ 5 字符,unit ≤ 3,label ≤ 12 字,body ≤ 24 字
2bars 3–7 条,从早到晚
3页标题 ≤ 22 字
4必须有 source

字段

字段类型
kicker · 必填string小节名
title · 必填string | string[]标题
leadstring导语
stats · 必填{ value, unit?, label, body? }[]大数字
bars · 必填{ year, value }[]年份条
format(v: number) => string条末数字格式
sourcestring出处

示例代码

<YearBars
  kicker="全球太阳能发电"
  title="十年涨到约 11 倍"
  stats={[{ value: '2,779', unit: 'TWh', label: '2025 年发电量' }]}
  bars={[{ year: '2015', value: 256 }, …]}
  source="…"
/>