echarts 柱状图在鼠标滑过时柱子消失处理方法

zhoupeng-

写过echarts的同学深知，echarts中有很多深坑。今天本仙人掌就踩了一个大大的坑，记下以供大家参考。

首先，我要实现的效果

这个图看起来很简单吧，echarts上有现成的（图1），但是我直接复制过来，一字不差，我后面的灰色就是不显示，真的是很无语。官方例子是靠showBackground: true实现的。

于是我看了其他例子，发现有一个例子同样可以实现（图2）

就是给每个柱子后面加一个阴影，看着例子写出来后，效果是实现了，可是发现鼠标一放在灰色阴影上，当前的柱子就消失了（图3）

真是见鬼了，各种百度，百度说是把color十六进制的写法改成rgba，但我的改完也依然有这个bug，然后看了例子看了两天，各个属性都试过了，还是不行。于是，我把整个例子复制到我的项目中，发现罪魁祸首竟然是它。其实百度说的没错，确实要换成rgba，但是rgba里面只能写成（0，0，0，.7）,而我写的是rgba（244，244，244，.7），是不是很坑。我感觉是因为用阴影写的，所以那个颜色只能设为阴影，不能设为实际的颜色，但我也不知道它里面的逻辑到底是什么，不过终于跳出了坑，记录一下，以免有的小伙伴跟我一样。（最后附上正确实现的代码）

1. option = {
   
2.     // ...
   
3.     series: [{
   
4.         type: 'bar',
   
5.         barWidth:'60%',
   
6.         data: dataNumber,
   
7.         itemStyle: {
   
8.             // 柱状图颜色
   
9.             color: 'rgba(46, 199, 201)'
   
10.         }
    
11.     }]
    
12. };

复制代码