echarts 关于柱状图鼠标滑过背景时柱子消失问题

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

首先,我要实现的效果(下图)

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

图1
于是我看了其他例子,发现有一个例子同样可以实现(图2)

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

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