做地图可视化这行七年了，我见过太多人死在 echarts 的 geo 配置上。尤其是刚入门的朋友，看着官方文档那一堆英文参数，头都大了。昨天有个做物流的小哥找我，说他的地图散点图怎么都显示不出来，坐标对不上，急得跟什么似的。其实吧，这问题十有八九是 geo 配置没搞对。今天我就掏心窝子跟大家聊聊，怎么把 echart3 geo配置 这个硬骨头啃下来，全是干货，不整虚的。

首先，你得明白一个道理：地图不是画出来的，是‘配’出来的。很多兄弟一上来就盯着 series 里的 effectScatter 看，拼命调大小、颜色，结果地图底图根本不出来。为啥？因为 geo 区域没定义好。我那个物流小哥的案例，最典型的就是坐标数据格式不对。他直接拿的 Excel 里的经纬度，没做转换，也没引入对应的 geoJson 文件。

咱们一步步来，照着做就行。

第一步，搞对数据源。这是地基。别去网上随便下个 geoJson 就完事，一定要确认你的数据范围和地图范围匹配。比如你要做江苏省的地图，就别拿全国的 geoJson 来凑合，那样缩放起来体验极差。我之前帮一个做电商的朋友调数据，他用的就是全国地图，结果苏州的几个点因为精度问题，全飘到海里去了。记住，数据精度要高，坐标格式要是 [经度, 纬度]，别搞反了。

第二步，基础配置别偷懒。在 option 里，geo 对象是核心。很多新手喜欢把 geo 和 series 混在一起写，导致代码乱成一锅粥。建议你把 geo 单独拎出来。重点看 map 属性，这里填你的地图名称，比如 'china' 或者 'jiangsu'。还有 roam 属性，设为 true 开启缩放和平移，这个功能用户最爱用，别关了。另外，itemStyle 里的 areaColor 设个淡灰色，borderColor 设个白色，地图轮廓就出来了。这一步做好了，地图骨架就有了。

第三步，系列数据联动。这是最容易出错的地方。series 里的 type 要选 'effectScatter' 或者 'scatter'，关键是 coordinateSystem 必须设为 'geo'。我见过太多人设成 'cartesian2d'，结果地图上一片空白，查了半天日志才发现是坐标系错了。还有，data 数组里的每一项，都要包含 name、value（经纬度）和 symbolSize。symbolSize 别设太大，不然点都叠在一起，看不清。

第四步，细节打磨。地图好看与否，全看细节。比如 tooltip 的显示，默认可能只显示坐标，你得自定义 formatter，把业务数据也带上。还有 label 的显示，有些小城市名字太多，全显示出来会遮挡视线，可以设置只在缩放层级较高时才显示 label。我有个客户做全国物流网点，一开始密密麻麻全是字，后来我让他加了个判断，只有当缩放比例大于 1.5 时才显示城市名，瞬间清爽多了。

最后，提醒一点，echarts 版本更新快，老版本的 geo 配置在新版本里可能有些参数废弃了。比如以前常用的 visualMap 的一些属性，现在可能得换种写法。所以，遇到报错别慌，先查官方最新文档，或者看看社区里有没有人遇到过类似情况。

总之，echart3 geo配置 没那么难，关键在于细心和逻辑。别一报错就放弃，多试几次，多看看控制台的红字。地图可视化这东西，一旦跑通了，成就感爆棚。希望这篇经验能帮到正在挣扎的你，要是还有搞不定的，欢迎在评论区留言，咱们一起探讨。毕竟，这行干久了，最开心的就是看到别人少走弯路。

本文关键词：echart3 geo配置