别在那儿对着官方文档发呆找坐标了，这篇文章直接告诉你怎么让echarts的geo地图动起来，解决你地图显示空白、数据对不上、样式丑到哭的三大痛点。
说实话，刚接触echarts的时候，我也被那个geo搞得心态崩了。明明代码写得跟教程一样，结果页面上就剩个白底，或者地图缩成一团看不见面。后来折腾了好几天，才摸出门道。今天就把这些血泪经验掏出来，希望能帮你省点头发。
先说最基础的，很多人第一步就卡住。你得先有地图的json数据，对吧？别去网上随便下个，容易出乱码或者坐标系不对。推荐去阿里云DataV或者高德地图开放平台找，那个比较稳。拿到json文件后，怎么加载？用echarts.registerMap。这一步要是错了，后面全白搭。
这里有个坑，就是坐标系。如果你用的geo，默认是经纬度。但有时候你拿到的数据是像素坐标，或者是某种投影后的坐标，这时候就得折腾那个coordinateSystem属性。别怕麻烦，多看两眼文档里的例子，虽然那例子写得跟天书一样。
再说说样式。默认的地图颜色太单调了，看着像上个世纪的产物。你想改颜色？去itemStyle里调。borderColor设个深灰，areaColor搞个渐变，瞬间高大上。还有那个emphasis状态，鼠标悬停的时候高亮，这个交互体验很重要，用户才觉得你这玩意儿好使。
举个真实的例子。我之前接个项目，要展示全国各省份的销售数据。老板要求每个省份颜色深浅不一样，还得能点击下钻到城市。我一开始直接用geo，结果发现下钻太复杂，geo本身不支持层级联动。后来怎么搞的？我把geo拆成两层，外层是省份，内层用series里的scatter或者map配合geo的region配置。虽然代码多了点，但效果杠杠的。
对了，还有个细节，label标签。默认情况下，小省份的标签会被挤没。你得手动调整label的位置，或者用rich文本搞点花样。别嫌麻烦，用户看到清晰的标注，才会觉得你专业。
有时候你会发现，地图加载特别慢。为啥？因为json文件太大。解决办法：压缩json，或者只加载需要的省份。别全量加载，除非你服务器是土豪级别的。
最后，调试的时候，多用console.log。看看你的数据格式对不对，geo配置有没有报错。很多时候，报错信息写得挺清楚，就是没人仔细看。
总之，echarts的geo用法虽然有点绕，但摸清规律后，也就是那么回事。别被那些复杂的配置吓倒，一步步来，先跑通最简单的demo，再慢慢加功能。
本文关键词：echarts的geo用法
