行政区划填色图制作指南：ECharts、Leaflet 与 PPT 三条路线

技术专栏 · 可视化 · 2026-09-17

先确定图的用途与载体

「按数值给省市区上色」是数据可视化中最高频的地图需求。动手之前需要先明确图的用途与载体：用于大屏实时刷新、网页交互探索，还是 PPT 汇报插图？三种载体对应三条技术路线，路线选错的返工成本往往高于重画一张图。

路线一：ECharts，交互式统计图的快捷路径

若目标是网页中的统计图（销售分布、人口密度），ECharts 的 map 系列是性价比较高的选择：用 echarts.registerMap 注册 GeoJSON 边界，把业务数据按区域名组织成数组，再由 visualMap 映射颜色，数十行代码即可出图，tooltip、图例与缩放均为内置能力。有两处需要留意：区域名写法必须与边界数据的 name 字段完全一致（多一个「市」字即匹配不上）；ECharts 默认不加载底图，纯「边界 + 填色」的呈现方式反而更利于数据阅读。

适用：数据大屏、BI 看板、周期性更新的报表页。不适用：需要真实底图参照（路网、水系）的场景。

路线二：Leaflet，需要底图与空间参照

当图的读者需要判断「这个区在城市的什么位置、与哪条路相邻」时，就需要真正的 Web 地图。Leaflet 加载 GeoJSON 边界后，同样按属性值着色（在 onEachFeature 中依据 feature 属性 setStyle），底部铺设瓦片底图，空间关系即可读。配合 turf.js 还能实现点击选中、缓冲区分析等交互。坐标系问题在这条路线上出现得最多——底图若是高德，需先转为 GCJ-02，详见《坐标系入门》。

适用：业务系统内嵌地图、网点与片区管理、需要空间上下文的分析页。不适用：纯展示型大屏（底图反而造成干扰）。

路线三：PPT 矢量图形，办公交付场景

若读者在会议室里、成品还需在 PowerPoint 中继续编辑，则可以省去编码环节，改用现成的矢量地图 PPT：每个行政区已是独立图形，按数值逐块填色即可，完成后可整页另存为高清 PNG，回填至报告或网页。这种方式的表达上限低于前两条路线（数据变更需手工重涂），但门槛最低、可控性最强，适合一次性汇报与交接给非技术同事。

三条路线的共同前置工作

三条路线的第一步完全相同：取得与业务口径一致的行政区划边界（GeoJSON 或 PPT 图形），并确认两件事——区域名称能否与业务表对齐（建议以行政区划代码关联，避免同名区县造成错配），以及坐标系是否与目标底图一致。边界数据可在地图工作台逐级预览确认后获取，全国整包见边界数据包。

配色上有一条通行原则：顺序型（sequential）数据用单色渐变（由浅至深），分类数据才使用多色。底色越克制，数据层次越清楚。

常见问题

ECharts 注册的地图名字和区域对不上怎么办？

业务表里的区域名必须与边界数据的 name 属性完全一致。稳妥做法是用区划代码关联，显示时再映射回名称。

区县一级的填色图数据量会不会太大？

全市级区县边界的 GeoJSON 通常在几 MB 量级，ECharts / Leaflet 都能流畅渲染；再往上是乡镇级，建议简化抽稀后使用。

做出来的图能导出高清图片吗？

ECharts 有 getDataURL 接口；Leaflet 页面可用浏览器截图或导出插件；PPT 直接另存为图片。本站工作台也支持把预览的边界直接导出为高清 PNG。

填色图的配色有什么规范可循？

参考 ColorBrewer 的分级配色方案，按「sequential / diverging / categorical」三类对号入座，避免使用红绿对比（色盲不友好）。

ECharts 用的地图数据从哪里来？

ECharts 不内置行政区边界，需要在绘图前注册：用 echarts.registerMap(名称, geojson) 注册 GeoJSON，或引入第三方已注册的 map 扩展包。边界可以取官方标准边界、公开数据集，或按需生成的区域边界文件。注册用的名称必须与业务数据中的名称逐字一致，否则地图画得出来但部分区域不上色。