本文关键词：geo echarts
前两天有个哥们问我，说做项目要搞个地图大屏，看着挺唬人，其实心里虚得很。他之前试过百度地图API，结果那加载速度，慢得让人想砸键盘。而且还要处理那些复杂的经纬度转换，搞半天发现坐标对不上，数据全飘到海里去了。
后来我给他推荐了 geo echarts。说实话，一开始我也抵触，觉得又是那种文档写得像天书的技术栈。但真上手后发现，只要路子对，它比那些重型GIS库轻快多了。特别是对于咱们这种做后台管理系统或者轻量级数据大屏的，它简直就是神器。
很多人卡在第一步，就是搞不定 GeoJSON。你去网上随便下个中国的地图json，打开一看，密密麻麻的代码，眼都花了。其实不用全看懂，你只需要知道，那个文件里存的是地图的轮廓坐标。
这里有个坑，很多人下载的geojson格式不对，或者坐标系和后端给的经纬度不一致。比如后端给的是GCJ-02，你用的却是WGS84，那地图上你的项目位置能偏出好几公里。这一步必须得核对清楚，别偷懒。
搞定数据源，第二步就是引入库。别搞那些复杂的构建工具，直接CDN引用最快。
对，就是这么简单。前提是你得把 china.js 或者你需要的省份、城市 geojson 文件准备好。现在网上有很多现成的资源站，找那种更新比较近的，别用十年前的，不然有些新设立的区县根本找不到。
第三步，写配置项。这是最核心的部分。
var chart = echarts.init(document.getElementById('main'));
var option = {
geo: {
map: 'china',
roam: true, // 允许缩放和平移
zoom: 1.2,
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
itemStyle: {
areaColor: '#2a333d'
},
label: {
color: '#fff'
}
}
},
series: [
{
name: '项目分布',
type: 'effectScatter', // 带涟漪效果的散点
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.407526, 39.90403, 100]}
],
symbolSize: function (val) {
return val[2] / 10;
},
rippleEffect: {
brushType: 'stroke'
}
}
]
};
chart.setOption(option);
看这段代码，是不是清晰多了？重点在于 coordinateSystem 必须设为 'geo'，不然你的散点根本贴不到地图上。还有那个 symbolSize，它是根据数值动态改变大小的，这样视觉冲击力一下就上来了。
这里再啰嗦一句，关于性能。如果你的数据点超过几千个，页面可能会卡。这时候别硬扛，要么做聚合，要么用 WebGL 版本的 echarts，也就是 echarts-gl。不过对于大多数中小项目，普通版足矣。
还有一个小细节，地图的配色。别用那种高饱和度的亮色，看着廉价。用深色系，配合一些霓虹感的点缀色，瞬间就有科技感了。这也是为什么很多大厂的大屏喜欢用 dark 模式的原因。
最后，记得处理一下异常数据。如果后端返回的经纬度是 null 或者越界，前端最好做个过滤，不然地图上一片空白，或者报错，挺尴尬的。
总之，geo echarts 上手不难，难的是对细节的把控。多调试几次，多看看官方示例，很快就能出效果。别被那些高大上的概念吓住，代码跑通了，就是胜利。
如果你还在为地图数据对不上而头疼，或者搞不定复杂的交互效果，不妨试试从最基础的 geojson 解析开始。遇到具体的报错，别急着百度，先看看控制台的红字，通常答案就在那里。实在搞不定，也可以找专业的人聊聊，毕竟有些坑，踩一次就够了。
