覆盖圈 <ReachRings />
一个中心点外套 2–4 道发光同心圈，雷达光束缓慢扫过；右侧每圈一行，写距离或延迟和它覆盖多少。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 覆盖多远
- Component
ReachRings·#reach-rings- Interaction
- 每按一次 → 点亮一圈和对应说明
Good for
- 按距离、延迟、时间分档的覆盖率
- “多少用户在 N 以内”这类说法
Avoid when
- 各档之间不是包含关系：用 BarChart
- 超过 4 档：用 LineChart
Content limits
| 1 | rings 2–4 圈（内圈在前）：label ≤ 8 个字符，value ≤ 6 个字符，text ≤ 30 字 |
| 2 | center ≤ 4 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
rings · required | { label, value, text }[] | 从内到外，每圈一步 |
center · required | string | 中心标签 |
Example
<ReachRings kicker="网络" title="离用户有多近" center="用户" rings={[{ label: '50 ms', value: '95%', text: '…' }]} />