← 全部模板

覆盖圈 <ReachRings />

一个中心点外套 2–4 道发光同心圈，雷达光束缓慢扫过；右侧每圈一行，写距离或延迟和它覆盖多少。

在示例演示里查看 →

分组: 数据 · 覆盖多远
组件: ReachRings · #reach-rings
交互: 每按一次 → 点亮一圈和对应说明

适合

按距离、延迟、时间分档的覆盖率
“多少用户在 N 以内”这类说法

不适合

各档之间不是包含关系：用 BarChart
超过 4 档：用 LineChart

内容上限

1	rings 2–4 圈（内圈在前）：label ≤ 8 个字符，value ≤ 6 个字符，text ≤ 30 字
2	center ≤ 4 字

字段

字段	类型
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`rings` · 必填	`{ label, value, text }[]`	从内到外，每圈一步
`center` · 必填	`string`	中心标签

示例代码

<ReachRings kicker="网络" title="离用户有多近" center="用户" rings={[{ label: '50 ms', value: '95%', text: '…' }]} />