echarts3 geo显示
昨晚搞那个大屏项目，卡了一整晚。真的，心态崩了。明明代码跟官网例子一模一样，结果地图上啥也没有，就剩个空白背景。我盯着屏幕看了半小时，眼睛都酸了。最后发现是个弱智错误。今天把这个坑填上，顺便把echarts3 geo显示那些乱七八糟的细节捋一捋。别去整那些花里胡哨的UI库了，原生ECharts才是王道，虽然它有时候挺让人抓狂的。
先说最核心的问题，为什么你的地图不显示？90%的人栽在JSON数据加载上。
第一步，你得有地图的JSON文件。别去网上随便下个通用的，版本不对直接废。去阿里DataV的GeoAtlas或者ECharts官方提供的示例数据里找。记住，echarts3 geo显示对JSON格式要求很严，必须包含features数组，每个feature里得有properties.name。少了name，你连tooltip都弹不出来。
第二步，加载数据。很多人喜欢用$.get或者axios。这里有个大坑。异步加载的时候，你必须等数据回来了再init图表。别急着写setOption。我之前的写法是：
$.get('map/china.json', function (geoJson) {
echarts.registerMap('china', geoJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
geo: {
map: 'china',
roam: true,
label: {
show: true
}
}
});
});
看着没问题对吧？错。如果你在这个回调外面还写了别的逻辑，或者页面渲染太快，地图可能还没注册好，你就去调用了。结果就是白屏。
正确的姿势，把init和setOption都放在回调里，或者用Promise包一下。这样稳妥。
再说坐标问题。echarts3 geo显示用的坐标系是经纬度。如果你的数据是屏幕像素坐标，那肯定对不上。你得做转换。比如你要打点，点的坐标必须是[经度, 纬度]。顺序千万别反了。我有一次把[纬度, 经度]传进去，点全跑到海里去了，还以为是地图偏移，折腾半天。
还有个小细节，很多新手不知道geo和series里的scatter要联动。你得在series里设置geoIndex: 0，不然点虽然画出来了，但不在地图上，或者地图没跟着缩放。
关于样式，别用那些默认的颜色。太丑了。我在项目里用了深色背景，地图颜色设为#1a1a1a，边框色#00bcd4。这样科技感强点。记得加emissive属性，开启发光效果，大屏上效果炸裂。
价格方面，如果你买现成的地图数据，大概几十到几百不等。其实没必要买，自己从OpenStreetMap或者高德API里导出来就行，免费。别被那些卖数据的忽悠了。
避坑指南：
1. 检查浏览器控制台，有没有404错误。地图JSON路径不对，直接报错。
2. 检查JSON结构，确保有properties.name字段。
3. 检查坐标顺序，是[lon, lat]。
4. 检查异步加载时机，确保数据加载完再渲染。
我有一次遇到个奇葩问题，地图显示出来了，但是点击事件没反应。查了半天，发现是zlevel层级问题。geo的zlevel设得太低，被别的div挡住了。把zlevel调高，或者把z设大点，就好了。
还有，echarts3 geo显示在移动端可能会有性能问题。如果点太多，会卡。这时候得用symbolSize控制一下，或者做聚类处理。别一股脑全扔上去。
最后，调试的时候多用console.log。打印一下geoJson的数据结构，看看里面到底有啥。别瞎猜。
总之，echarts3 geo显示不难，难的是细节。多试几次，多报错几次，自然就熟了。别怕麻烦，代码这东西，越磨越亮。
希望这篇能帮到你。如果有其他问题，评论区见。别私信我，太忙了。
