地图
地理分布与区域比较。建议英文标识：MapChart；地理分布与区域比较。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.map-chart |
| 名称 | 地图 |
| 二级分类 | 图表（charts） |
| 用途 | 地理分布与区域比较 |
| 描述 | 建议英文标识：MapChart；地理分布与区域比较。 |
预览
渲染为 echarts canvas 容器 <div data-slot="map-chart">；区域数据经 visualMap 色阶映射（数据最值区间）；内置 /maps/china.json（34 省）与 /maps/world.json（217 国家）演示资源，经 geoJsonUrl 加载；未注册且无加载来源时降级 Empty 占位 + console.warn，不抛错。
DSL 结构
{
"type": "MapChart",
"props": {
"mapName": "china",
"geoJsonUrl": "/maps/china.json",
"data": "${data.region}",
"nameKey": "province",
"valueKey": "orders"
}
}何时用
何时使用
- 地理分布与区域比较（世界地图 / 国家地图 / 省份等其他区域地图）。
何时不用
- 无地理语义的空间分布：用 ScatterChart。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 内联数据 | 传入 geoJson 由组件渲染期注册 | 单图自助、小体积自定义区域 |
| URL 加载 | 传入 geoJsonUrl 由组件 fetch + 注册（按 mapName 缓存） | 世界 / 国家 / 标准区域地图的推荐做法 |
| 预注册 | 应用启动统一 registerMap，组件仅引用 mapName | 多图共享地图数据 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mapName | string | 'map' | echarts 地图名（geoJson / geoJsonUrl 注册时作为键） |
data | Record<string, unknown>[] | [] | 区域数据行（区域名 + 数值） |
nameKey / valueKey | string | 'name' / 'value' | 区域名 / 数值字段 |
geoJson | Record<string, unknown> | — | 内联 GeoJSON，传入即注册（优先于 geoJsonUrl） |
geoJsonUrl | string | — | GeoJSON 资源地址，组件 fetch 后注册（按 mapName 缓存，只请求一次） |
title / height / onSelect | — | — | 标题 / 高度 / 点击区域 |
使用规范
- 推荐应用启动时统一 registerMap 或经 geoJsonUrl 加载，多图共享同一份地图数据。
- 区域名需与 geoJson 中的名称属性一致，否则匹配不上显示为无数据。
- 组件不内置地图数据文件；世界 / 国家 / 省份等标准地图可使用 echarts@4 附带的 GeoJSON（如 doc 站 /maps/*.json）。
正例
- ✓ 全国订单分布：geoJsonUrl 加载 china.json，data 传省份订单量，visualMap 色阶呈现。
反例
- ✕ 每次渲染都传入大体积 geoJson（重复注册且影响首屏）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。