上周三凌晨两点，我盯着屏幕上的地图，眼珠子都快瞪出来了。为啥？因为那个echarts geo series里的点位，死活对不上号。明明数据是北京的坐标，地图上却飘到了南海诸岛，或者干脆隐身了。这场景太真实了，很多刚入行的兄弟或者接私活的同行，估计都经历过这种“怀疑人生”的时刻。
咱们不整那些虚头巴脑的理论，直接上干货。做地图可视化，90%的坑都在数据匹配和坐标系上。
先说第一个大坑：坐标系不对等。这是最隐蔽的杀手。你手里拿的数据，可能是WGS84（GPS坐标），也可能是GCJ02（高德/腾讯地图用的火星坐标），或者是BD09（百度地图）。echarts默认处理的是标准的经纬度，如果你直接把百度的BD09坐标扔进去，那位置偏得亲妈都不认识。
怎么解决？第一步，确认数据来源。如果是爬虫抓的，大概率是WGS84；如果是从百度API调的，那就是BD09。第二步，做转换。别想着在echarts里转，太慢且容易出错。在数据预处理阶段，用Python或者JS写个转换函数，把非标准坐标转成WGS84。这一步做好了，地图能准80%。
再说说第二个坑：GeoJSON的匹配问题。很多人觉得echarts geo series就是画个圈，其实它核心是“区域匹配”。你定义的series里，name字段必须和GeoJSON里的properties.name完全一致。注意，是“完全一致”，包括空格、全角半角。我见过最离谱的，GeoJSON里是“北京市”，数据里是“北京 ”，后面多了个空格，结果地图上一片空白，找 bug 找了两天。
建议做法：在加载GeoJSON后，立刻打印一下所有的name列表，和你要展示的数据name做个交集比对。如果交集为空，那肯定没戏。别偷懒，这一步能救命。
第三个坑，性能优化。当你点位超过几千个，或者区域特别细碎的时候，页面直接卡成PPT。这时候别怪echarts，是你没优化。echarts geo series支持symbolSize的动态计算，别写死。根据数据量级，动态调整symbol的大小和透明度。另外，开启large模式，虽然它主要对散点图有效，但对于大量geo数据，开启large模式能显著提升渲染性能。还有，别在series里放太多冗余属性，只保留必要的name、value、itemStyle。
说到这儿，你可能觉得，道理我都懂，代码怎么写？
第一步：准备干净的GeoJSON文件，确保编码是UTF-8无BOM。
第二步：清洗数据，统一坐标系统一为WGS84，统一名称格式。
第三步：初始化echarts实例，设置series类型为'lines'或'scatter'，如果是区域高亮，类型设为'effectScatter'或'geo'。
第四步：在option里配置geo的map属性，指向你的GeoJSON。
第五步：绑定data，注意name字段的精确匹配。
最后说句掏心窝子的话，做地图可视化，耐心比技术更重要。别急着看效果，先检查数据，再检查配置。遇到报错，别慌，打开浏览器控制台，看Network里GeoJSON加载没，看Console里有没有JS报错。
如果你还在为坐标偏移头疼，或者GeoJSON匹配不上，别自己瞎琢磨了，容易把头发熬秃。找个懂行的帮你看一眼，或者把数据脱敏后发出来，大家一起盘盘。毕竟，这行里，谁还没几个深夜改bug的惨痛经历呢？
有问题随时留言，看到必回。咱们一起把技术搞扎实，少踩坑，多赚钱。
