站点点阵 <PopGrid />
一个发光圆点代表一个站点（城市、门店、节点），按分组着色排成点阵，右侧是总数和每组数量。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 有多少、怎么分
- Component
PopGrid·#pop-grid- Interaction
- 每按一次 → 点亮一组圆点和它的图例行
Good for
- 20–500 个同类对象按 2–8 组分布
- 想让观众直观感到“很多”，同时看到构成
Avoid when
- 要看地理位置：用 DotMap
- 数量超过 500：用 Treemap 或 ShareBar
Content limits
| 1 | groups 2–8 组，name ≤ 8 字 |
| 2 | 总数 20–500 |
| 3 | totalLabel ≤ 10 字 |
| 4 | unit ≤ 2 个字符 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
groups · required | { name, count }[] | 分组，每组一步 |
totalLabel · required | string | 总数下的说明 |
unit | string | 数量单位 |
Example
<PopGrid kicker="网络规模" title="348 个城市" groups={[{ name: '亚洲', count: 71 }, …]} totalLabel="个城市" />