弧线地球 <ArcGlobe />
离线点阵地球上,从一个中心点向 2–8 个地点画发光大圆弧,右侧是对应列表;逐条展开时弧线一条条画出来。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 从一处到多处
- Component
ArcGlobe·#arc-globe- Interaction
- 每按一次 → 画出一条弧线并点亮对应列表行
Good for
- 一个中心向各地分发:源站和缓存、总部和分部、出口目的地
- 地点分布在同一个半球
Avoid when
- 地点遍布全球两侧:用 DotMap
- 要比较各地数值:用 DotMap 或 BarChart
Content limits
| 1 | places 2–8 个,name ≤ 6 字,note ≤ 14 字 |
| 2 | hub.name ≤ 6 字 |
| 3 | listTitle ≤ 10 字 |
| 4 | 所有地点要在 center 朝向的半球,否则弧线绕到背面 |
| 5 | 地图精度 2°,只适合城市级以上的位置 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名,2–8 字 |
title · required | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
hub · required | { name, lon, lat, note? } | 起点 |
places · required | { name, lon, lat, note? }[] | 终点,每个一步 |
center | [lon, lat] | 地球朝向,默认对准 hub |
listTitle | string | 列表标题 |
Example
<ArcGlobe kicker="示意" title="…" hub={{ name: '源站', lon: -77.5, lat: 39 }} center={[-25, 22]} places={[{ name: '伦敦', lon: -0.1, lat: 51.5 }, …]} />