迷你走势卡 <SparkCards />
每张卡一个大数字、一个变化胶囊和一条小折线(带面积,终点一个圆点),底部注明周期。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 3–4 个指标各带走势
- Component
SparkCards·#spark-cards
Good for
- 3–4 个指标,每个都有一串历史值
- 既要看现在也要看走势
Avoid when
- 只看一个指标的趋势:用 LineChart
- 没有历史值:用 StatRow
Content limits
| 1 | cards 3–4 张:label ≤ 10 字,value ≤ 7 字符,series 4–32 个点,note ≤ 12 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
cards · required | { label, value, unit?, delta?, series, note? }[] | 卡片 |
Example
<SparkCards
kicker="文字密度"
title="每页写多少字,起伏比平均数重要"
cards={[{ label: 'Lumen 解读', value: '101', unit: '字/页', series: [74, 115, 52, …], note: '25 页' }, …]}
source="…"
/>