
- 分组
- 数据 · 长条、标题块、小数字块和大数字块拼成一页
- 组件
MetricMosaic·#metric-mosaic
适合
- 一页讲清一组相关数字
- 发布会、增长复盘的数据页
不适合
- 数字之间没有主次:用 KpiBoard
- 需要趋势:用 LineChart
内容上限
| 1 | side value ≤ 7 字符 |
| 2 | small 2–3 个:value ≤ 6 字符,label ≤ 14 字 |
| 3 | hero value ≤ 6 字符,label ≤ 16 字 |
| 4 | title 1–2 行,每行 ≤ 6 字 |
| 5 | 必须有 source |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
side · 必填 | { value, label } | 左侧长条 |
small · 必填 | { value, label }[] | 小数字块 |
hero · 必填 | { value, label } | 大数字块 |
source | string | 出处 |
示例代码
<MetricMosaic
kicker="全球太阳能 · 2025"
title={['十年,', '约十一倍']}
side={{ value: '11×', label: '…' }}
small={[{ value: '8.7%', label: '占全球发电' }]}
hero={{ value: '2,779', label: '…' }}
source="…"
/>