← 全部模板

数字拼格 <MetricMosaic />

左边一条竖长的强调色块放一个数字,中间是标题块,右上 2–3 个小数字块,右下一块大数字。为荧光格风格设计,其他风格也能用。

分组
数据 · 长条、标题块、小数字块和大数字块拼成一页
组件
MetricMosaic · #metric-mosaic

适合

  • 一页讲清一组相关数字
  • 发布会、增长复盘的数据页

不适合

  • 数字之间没有主次:用 KpiBoard
  • 需要趋势:用 LineChart

内容上限

1side value ≤ 7 字符
2small 2–3 个:value ≤ 6 字符,label ≤ 14 字
3hero value ≤ 6 字符,label ≤ 16 字
4title 1–2 行,每行 ≤ 6 字
5必须有 source

字段

字段类型
kicker · 必填string小节名
title · 必填string | string[]标题
leadstring导语
side · 必填{ value, label }左侧长条
small · 必填{ value, label }[]小数字块
hero · 必填{ value, label }大数字块
sourcestring出处

示例代码

<MetricMosaic
  kicker="全球太阳能 · 2025"
  title={['十年,', '约十一倍']}
  side={{ value: '11×', label: '…' }}
  small={[{ value: '8.7%', label: '占全球发电' }]}
  hero={{ value: '2,779', label: '…' }}
  source="…"
/>