排名赛跑 <RankingRace />
横向条形排名，每按一次 → 换到下一期，条形重新排序、长度随数值变化，右下角显示当前年份。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 名次随时间变化
- Component
RankingRace·#ranking-race- Interaction
- → 前进一期
Good for
- 同一组对象在 3–8 个时间点的名次变化
- 想让观众一步步看到“谁超过了谁”
Avoid when
- 只有两个时间点：用 SlopeRank
- 要看精确趋势：用 LineChart
Content limits
| 1 | periods 3–8 期，每期 ≤ 6 个字符 |
| 2 | items 5–12 项，name ≤ 8 字；show 5–8 行 |
| 3 | notes 每期一条，≤ 28 字 |
| 4 | 需要 build: 'reveal'；不逐步时直接显示最后一期 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
periods · required | string[] | 时间点 |
items · required | { name, values: (number | null)[] }[] | 每项每期一个数值 |
show | number | 显示前几名，默认 6 |
unit | string | 数值单位 |
decimals | number | 小数位 |
focus | string | 用强调色的项 |
notes | string[] | 每期一句解读 |
Example
<RankingRace kicker="排名" title="谁发的电最多" periods={['2015', '2020', '2025']} items={[{ name: '中国', values: [39, 261, 1175] }, …]} focus="中国" />