← All templates

点阵地图 <DotMap />

离线的点阵世界地图(Natural Earth 陆地,公有领域),上面按经纬度放编号圆点,面积与数值成正比,右侧是对应列表。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
数据 · 在哪里
Component
DotMap · #dot-map

Good for

  • 1–8 个国家或城市的位置和数值
  • 想让观众先看到“分布在哪”

Avoid when

  • 要按地区着色比较:用 Heatmap 或 BarChart
  • 地点集中在一个城市内:点阵太粗

Content limits

1markers 1–8 个,name ≤ 6 字
2listTitle ≤ 10 字
3数值含单位 ≤ 10 个字符
4地图精度为 2°,只适合国家级位置

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
markers · required{ name, lon, lat, value? }[]地点
unitstring单位
decimalsnumber小数位
listTitlestring列表标题

Example

<DotMap kicker="地图" title="…" markers={[{ name: '中国', lon: 104, lat: 35, value: 1175 }, …]} unit=" TWh" />