- 分組
- 数据 · 名次随时间变化
- 元件
RankingRace·#ranking-race- 互動
- → 前进一期
適合
- 同一组对象在 3–8 个时间点的名次变化
- 想让观众一步步看到“谁超过了谁”
不適合
- 只有两个时间点：用 SlopeRank
- 要看精确趋势：用 LineChart
內容上限
| 1 | periods 3–8 期，每期 ≤ 6 个字符 |
| 2 | items 5–12 项，name ≤ 8 字；show 5–8 行 |
| 3 | notes 每期一条，≤ 28 字 |
| 4 | 需要 build: 'reveal'；不逐步时直接显示最后一期 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
periods · 必填 | string[] | 时间点 |
items · 必填 | { name, values: (number | null)[] }[] | 每项每期一个数值 |
show | number | 显示前几名，默认 6 |
unit | string | 数值单位 |
decimals | number | 小数位 |
focus | string | 用强调色的项 |
notes | string[] | 每期一句解读 |
範例程式碼
<RankingRace kicker="排名" title="谁发的电最多" periods={['2015', '2020', '2025']} items={[{ name: '中国', values: [39, 261, 1175] }, …]} focus="中国" />