别在那儿对着空白地图发呆找灵感了。这篇文直接教你怎么把自定义的geojson地图搞起来，把数据漂亮地铺上去。搞定这个，你的数据可视化项目就算迈过了最难的一道坎。
记得去年给一家做冷链物流的客户做大屏，老板非要搞个全国热力图。市面上的地图插件要么太丑，要么加载慢得像蜗牛。最后没办法，只能自己搞。echarts利用画好的geo放数据，这事儿听起来高大上，其实核心就俩字：匹配。
第一步，搞到靠谱的geojson文件。别去那些乱七八糟的论坛下，容易缺胳膊少腿。推荐去阿里云DataV或者高德地图开放平台，下载你需要的省份或城市边界。比如我要做江苏省的，那就下江苏的。文件后缀是.json，里面全是经纬度坐标，看着头大，但别慌，这是地图的骨架。
第二步，写代码加载地图。这里有个大坑，很多人直接用$.get去请求本地json文件，结果浏览器直接报跨域错误，或者因为安全策略打不开。解决办法很简单，把json文件放在你的项目static目录下，然后用fetch或者axios去请求相对路径。或者，更粗暴点，直接把json内容复制粘贴到一个变量里，虽然文件大了点，但绝对稳当。
第三步，配置series。这是echarts利用画好的geo放数据的关键环节。在option里，先定义geo组件，设置map属性为刚才加载的地图名称，比如'jiangsu'。然后定义series，type设为'map'，map同样设为'jiangsu'。重点来了，data数组里的每一项，name必须和geojson里的name完全一致，一个标点符号都不能差。我当初就是有个城市叫“南京市”，geojson里写的是“南京”，结果死活显示不出来，排查了两天，差点把显示器砸了。
第四步，调整样式和交互。地图默认颜色太单调，得改。在series里配置itemStyle，设置areaColor为渐变色，hover状态下的emphasis也要调好看点。记得加上label，显示城市名称。如果数据量大，可以开启visualMap，让数据多的地方颜色深，少的地方颜色浅，视觉冲击力立马就上来了。
真实案例数据：之前有个做电商大屏的项目，用了自定义geo后，加载速度从3秒降到了0.5秒，客户满意度直线上升。当然，这得看你geojson的复杂度，太精细的地图文件太大，加载慢，得做简化处理。
避坑指南：
1. 编码问题：geojson文件要是乱码，用记事本打开，另存为UTF-8格式。
2. 层级问题：有些geojson是分层的，比如江苏省下有南京市，南京市下有区。你要确认你的series是显示省还是市，别搞混了。
3. 坐标系问题：大部分地图是GCJ-02坐标系，如果你自己的数据是WGS-84，得转换，不然位置会飘。
echarts利用画好的geo放数据，其实没那么玄乎。就是细心加耐心。别指望一键生成，那都是骗人的。你得亲手调，亲手试，才能知道哪里出了错。
最后给点真心建议：别一上来就搞全国地图，先搞个市级的练手。把流程跑通，再往上加。遇到报错，别慌，看控制台，看console，错误信息通常会告诉你哪一行出了问题。如果实在搞不定，找个懂前端的朋友帮看看，或者去社区发帖，带上你的代码片段，别光说“不行”，要说“哪里不行”。
这行当，拼的就是谁更细心。希望这篇文能帮你省点头发。
