本文关键词：echarts的geo的map
做地图可视化，最烦的就是数据对不上，或者地图显示不全。这篇文直接告诉你怎么解决echarts的geo的map渲染失败、数据匹配不上的核心问题。不用看那些晦涩的官方文档，我用了9年，踩过无数坑，今天把最实用的干货掏出来。
先说痛点。很多兄弟拿到geojson，直接扔进代码里，结果地图是白的，或者数据点飘在半空。为啥？因为坐标系统不匹配，或者region名字对不上。别急，咱们一步步来拆解。
第一步，搞定geojson数据源。别去网上随便下个通用的，那个分辨率太低，而且省份名字可能跟你的数据对不上。最好去国家统计局或者高德地图开放平台下载最新版的。下载下来后，用个简单的json编辑器打开，检查下里面的name字段。比如“北京市”，你的数据里要是写“北京”，那肯定匹配不上。必须一字不差。
第二步，初始化echarts实例。这里有个小细节，很多人喜欢用div容器，但要注意容器必须有宽高。如果容器高度是0，地图就显示不出来。这个低级错误我新手时候也犯过，尴尬。
第三步，配置series。这是最关键的一步。type一定要选'effectScatter'或者'scatter'，别选错成'line'。然后，coordinateSystem必须设为'geo'。这一步设错了，数据点就会乱跑。
接着说数据匹配。如果你的数据里有经纬度，直接传进去就行。但如果你只有城市名，那就得用echarts的geo.registerMap方法。把刚才下载的geojson注册进去，key要跟你series里的name对应。这里容易出错的地方是，geojson里的name可能包含后缀，比如“黑龙江省”，你的数据里要是“黑龙江”，那就匹配失败。解决办法是，在数据处理层做个替换，或者在geojson里改名字。改geojson比较麻烦，建议在后端或前端处理数据时统一格式。
再聊聊样式美化。默认的地图颜色太丑，怎么改？在series里加itemStyle。比如设置areaColor为浅蓝色，borderColor为白色。记得加个shadowBlur，让地图有点立体感。还有，label标签要显示出来，show设为true，fontSize设大点，不然看不清。
实战案例。我之前帮一个客户做物流热力图，用的是echarts的geo的map。数据是从数据库查出来的，有几千条。一开始加载很慢，后来发现是geojson太大。解决办法是，用topojson转换工具简化一下，或者只加载需要的省份。另外，数据量大的时候，用effectScatter会有动画效果，比较好看，但性能消耗也大。如果数据超过一万条，建议关掉动画，或者用普通scatter。
还有一个坑，就是坐标系。国内地图通常用GCJ-02坐标系，也就是火星坐标。如果你的数据是WGS84（比如GPS直接获取的），直接画上去会偏移几公里。解决办法是，用开源的转换库，把WGS84转成GCJ-02。这个库网上很多，搜一下“wgs84转gcj02”就有。别自己写算法，容易算错。
最后，调试技巧。打开浏览器的开发者工具，看Console有没有报错。如果有报错，通常是json格式不对，或者name不匹配。用console.log打印出series.data，看看格式对不对。数据格式应该是[{name: '北京', value: 100}, ...]这样的数组。
总结一下，做echarts的geo的map，核心就三点：数据源要准，名字要匹配，坐标系要对。只要这三点搞定，剩下的就是样式调整了。别怕报错，多看日志，多试几次，总能调出来。
希望这篇文能帮到你。如果还有问题，欢迎留言讨论。毕竟，这行干了9年，见过的坑比你吃过的米还多。有啥不懂的，尽管问。
