echarts中geo和bar同时使用

最近接了个需求，要在地图上叠加柱状图。

说实话，刚听到这需求我头都大了。

之前一直以为geo和bar是两个独立的系列，

直接堆代码肯定报错。

毕竟做这行9年了，

这种基础配置要是还搞不定，

回去真得被新人笑话。

但现实就是，

官方文档虽然全，

但混合使用的细节真的少得可怜。

我就直接说干货吧。

很多人第一次搞echarts中geo和bar同时使用，

最容易犯的错误就是坐标系搞混。

geo自带的是地理坐标系，

而bar默认是直角坐标系。

你如果不指定series里的coordinateSystem，

那柱状图绝对会飘到左上角，

或者干脆不显示。

这点一定要记住。

我上周给一个客户做物流数据大屏，

就是栽在这个坑里。

客户盯着屏幕看了半天，

问我是不是echarts版本不对。

其实根本不是版本问题，

是配置逻辑没理顺。

正确的做法是，

geo系列负责渲染地图底图，

类型设为geo。

然后bar系列，

类型设为bar，

关键点是加上 coordinateSystem: 'geo'。

这样柱状图就会吸附在地图对应的地理坐标上。

这里有个小细节，

柱状图的data数据，

不能直接放数值。

得配合geo的regionName或者经纬度。

不过现在echarts 5版本后，

支持直接用regionName作为data的key，

这就方便多了。

比如你要展示各省份的销量，

data里直接写 {name: '广东', value: 1000}。

这样既简洁又直观。

但是，

这里有个大坑，

就是tooltip的显示。

很多兄弟配置完，

鼠标移上去没反应。

这是因为tooltip的trigger没设对。

如果是混合图表，

建议把tooltip的trigger设为'item'，

并且formatter函数里要做一下判断。

判断当前触发的是geo区域还是bar柱子。

不然数据展示会乱套。

我之前的一个项目，

因为没处理好这个，

导致数据对不上，

被产品经理骂了半小时。

真的，

细节决定成败。

还有一点，

样式的美化。

geo的地图颜色，

和bar的柱子颜色，

最好区分开。

不然用户根本分不清哪里是地图，

哪里是数据。

我一般会把geo的背景色设得淡一点，

比如#f0f0f0，

然后bar用高饱和度的颜色，

比如#ff5722。

这样视觉层次一下就出来了。

另外，

地图的缩放和平移，

也要配合bar一起。

不然用户放大地图后，

柱子还在那儿不动，

体验极差。

这需要在resize事件里重新计算布局。

虽然有点麻烦，

但为了用户体验，

值得折腾。

最后总结一下，

echarts中geo和bar同时使用，

核心就三点：

一是坐标系指定为geo，

二是数据格式要匹配regionName，

三是tooltip和样式要区分处理。

只要抓住这三点，

基本就不会出大问题。

当然，

实际开发中肯定还会遇到各种奇葩bug。

比如数据量太大导致卡顿，

或者某些偏远地区地图缺失。

这些都需要针对性优化。

比如数据量大时，

可以用webgl渲染，

或者简化地图路径。

地图缺失的话，

只能手动补全json数据了。

总之，

技术这东西，

多踩坑才能进步。

希望这篇经验能帮到正在头疼的你。

别怕报错，

多看文档，

多试几次，

总能搞定。

毕竟，

谁还没几个深夜改bug的经历呢？

加油吧，

同行们。