做前端可视化久了，你会发现Echarts虽然强大，但有些坑是真的让人头秃。特别是当你需要在一个页面里既展示全国宏观数据，又想深入看某个省份的微观细节，或者把散点图叠加在复杂的地理区域上时，单纯的map或者geo都搞不定。这篇笔记不整那些虚的，直接聊聊echarts geo和map混用时的真实踩坑经历和解决办法，帮你省下熬夜调配置的时间。
记得去年做个物流监控大屏，老板要求能看到全国各省的发货量，同时点击某个省，能高亮显示该省内的城市分布，还得在地图上标出几个关键仓库的位置。一开始我想着简单，直接上map，结果发现map对地理坐标的支持太弱，那些散点位置全飘了，根本对不上。后来换了geo，geo是基于地理坐标系的，位置准了，但问题是geo默认不支持直接加载省份的多边形数据，除非你自己去搞GeoJSON，这门槛太高了，对于赶进度的项目来说不现实。
这时候我就想到了echarts geo和map混用的思路。其实原理并不复杂，就是利用Echarts的系列（series）特性。你可以把map系列作为底图，负责展示行政区域的边界和填充颜色；然后再叠加一个geo系列，或者反过来，用geo做底图，用map做局部细节。但这里有个大坑，很多人直接叠加，结果发现两个地图的坐标系对不上，数据完全错位。
我当时的做法是，先定义一个全局的geojson，这个json里包含了全国各省的边界数据。然后，在series里，第一个series用type: 'map'，设置map: 'china'，用来展示全国轮廓和省份颜色。第二个series用type: 'scatter'或者'effectScatter'，但关键是它的coordinateSystem要设为'geo'。等等，这里有个细节容易搞错，如果你用的是echarts 4.x版本，scatter的coordinateSystem默认可能就是geo，但如果是map系列，它有自己的坐标系。
为了让echarts geo和map混用更顺滑，我建议在配置项里，把geo的region或者map的map属性指向同一个GeoJSON源。这样能保证底层的地理坐标是一致的。比如，你可以这样写：
series: [
{
name: '全国分布',
type: 'map',
map: 'china',
roam: true,
label: { show: false },
itemStyle: { areaColor: '#eee', borderColor: '#999' }
},
{
name: '关键点位',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{ name: '北京', value: [116.407526, 39.90403, 100] }
],
symbolSize: 10,
itemStyle: { color: 'red' }
}
]
你看，这样写看起来挺简单，但实际操作中，你会发现散点的位置经常不对。这是因为经纬度的顺序问题，Echarts要求的是[经度, 纬度]，而很多数据源给的是[纬度, 经度]，反过来的话，点就跑到海里去了。另外，缩放和平移的时候，如果两个系列的roam设置不一致，也会出现视觉上的割裂感。
还有一个更高级的需求，就是echarts geo和map混用时的动态切换。比如用户点击某个省份，地图放大到该省，这时候底图要从全国切换成该省的地图。这时候就不能硬套上面的代码了。你需要监听map的select事件，然后动态更新series的data，并且重新加载该省份的GeoJSON。这个过程比较繁琐，因为要确保新加载的GeoJSON里的坐标系统和原来的保持一致。
我遇到过一次特别离谱的情况，就是echarts geo和map混用后，图例（legend）不显示。查了半天文档，才发现是因为两个series的name属性必须唯一，而且要在legend里分别配置。这属于文档里没写清楚的小bug。还有啊，有时候你会发现地图加载出来是灰色的，啥也看不见，这时候大概率是GeoJSON的数据格式不对，或者缺少了某些必须的字段，比如properties里的name。
总之，处理这类问题，心态要稳。别指望一键搞定，得一步步调试。先确保底图能显示，再叠加散点，最后调整样式。如果你也在折腾echarts geo和map混用，记得多看看控制台报错，有时候浏览器会提示GeoJSON解析失败，那基本就是数据源的问题。
最后总结一下，echarts geo和map混用的核心在于坐标系的统一和GeoJSON的正确引用。别被那些花哨的特效迷了眼，先把基础的地理事物画对，再谈美观。希望这些踩坑经验能帮到你，毕竟谁还没个改bug的夜晚呢，对吧？
本文关键词：echarts geo和map混用
