这篇直接教你怎么在echarts里把geo series跑通，别再去网上搜那些半截子的代码了，看完这篇你绝对能自己画出带数据的地图，解决那些让你头秃的坐标对不上的问题。
说实话，刚开始接触echarts的时候，我也被那个geo series搞疯过。
明明数据都有了，坐标也导入了，结果地图上啥也没有，或者是一片空白。
那种感觉真的想砸键盘，尤其是当你发现官方文档写得云里雾里的时候。
今天咱们不整那些虚的，直接上干货，一步步带你把地图渲染出来。
第一步，你得先搞到地图的JSON数据。
别去网上随便下个随便啥的，最好去阿里云DataV或者高德地图开放平台找。
很多新手就是死在这一步，数据源不对，后面全白搭。
第二步，初始化echarts实例。
这一步很简单，就是new一个echarts.init，然后把div挂载上去。
注意啊，div一定要有宽高，不然你连个黑屏都看不到。
这时候别急着加数据，先看看能不能渲染出个基本的地图轮廓。
如果轮廓出来了，说明基础配置没问题，咱们继续。
第三步，配置series里的type为‘map’。
这里有个坑，很多人把series type写成了‘scatter’或者‘effectScatter’。
记住，要画填充色的地图，type必须是‘map’。
然后，geoKey要对应上你之前配置的geo对象。
这一步最容易出错，我当初就搞混了，调了整整一下午。
第四步，引入具体的geoJSON数据。
你得用$.get或者fetch去加载那个JSON文件。
加载成功后，在success回调里注册地图。
echarts.registerMap(‘china’, geoJsonData)。
这一步千万别漏了，不注册地图，series里的map属性就找不到对应的数据源。
第五步，配置series的数据。
数据格式是个数组，每个对象里要有name和value。
name必须和geoJSON里的name完全一致，少个字都不行。
我当初就是因为‘北京市’写成了‘北京’，死活显示不出来。
这种细节真的让人抓狂，但没办法，必须严谨。
第六步，调整visualMap和itemStyle。
为了让地图好看点，加个visualMap，让数据大的地方颜色深。
itemStyle里设置一下边框颜色，不然地图块之间粘在一起，难看死了。
这时候刷新页面，你应该能看到一个五彩斑斓的地图了。
要是还报错，检查下控制台。
90%的问题都是JSON解析失败，或者name匹配不上。
这时候别慌，打开浏览器控制台，看看Network里JSON加载没。
要是加载了但数据不对，那就是字段名的问题。
其实echarts geo series也没那么难，就是步骤多，细节碎。
只要你按部就班来，基本都能搞定。
别一遇到报错就放弃，多看看控制台提示。
我当初也是这么摸爬滚打过来的，现在回头看，也就那么回事。
最后给个真实建议，别光看教程，一定要自己动手敲代码。
哪怕复制粘贴，也要自己改改参数，看看效果变没变。
这样你才能记住那些坑在哪里。
要是还是搞不定，欢迎随时来问我，别不好意思。
咱们一起把这地图画漂亮了，才算没白折腾这一趟。
