- 分組
- 数据 · 有多少、怎么分
- 元件
PopGrid·#pop-grid- 互動
- 每按一次 → 点亮一组圆点和它的图例行
適合
- 20–500 个同类对象按 2–8 组分布
- 想让观众直观感到“很多”，同时看到构成
不適合
- 要看地理位置：用 DotMap
- 数量超过 500：用 Treemap 或 ShareBar
內容上限
| 1 | groups 2–8 组，name ≤ 8 字 |
| 2 | 总数 20–500 |
| 3 | totalLabel ≤ 10 字 |
| 4 | unit ≤ 2 个字符 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
groups · 必填 | { name, count }[] | 分组，每组一步 |
totalLabel · 必填 | string | 总数下的说明 |
unit | string | 数量单位 |
範例程式碼
<PopGrid kicker="网络规模" title="348 个城市" groups={[{ name: '亚洲', count: 71 }, …]} totalLabel="个城市" />