寫過echarts的同學深知该编,echarts中有很多深坑。今天本仙人掌就踩了一個大大的坑硕淑,記下以供大家參考课竣。
首先,我要實現(xiàn)的效果(下圖)
這個圖看起來很簡單吧喜颁,echarts上有現(xiàn)成的(圖1)稠氮,但是我直接復制過來,一字不差半开,我后面的灰色就是不顯示隔披,真的是很無語。官方例子是靠showBackground: true實現(xiàn)的寂拆。
于是我看了其他例子奢米,發(fā)現(xiàn)有一個例子同樣可以實現(xiàn)(圖2)
就是給每個柱子后面加一個陰影,看著例子寫出來后纠永,效果是實現(xiàn)了鬓长,可是發(fā)現(xiàn)鼠標一放在灰色陰影上,當前的柱子就消失了(圖3)
真是見鬼了尝江,各種百度涉波,百度說是把color十六進制的寫法改成rgba,但我的改完也依然有這個bug,然后看了例子看了兩天啤覆,各個屬性都試過了苍日,還是不行。于是窗声,我把整個例子復制到我的項目中相恃,發(fā)現(xiàn)罪魁禍首竟然是它。其實百度說的沒錯笨觅,確實要換成rgba拦耐,但是rgba里面只能寫成(0,0见剩,0杀糯,.7),而我寫的是rgba(244,244炮温,244火脉,.7),是不是很坑柒啤。我感覺是因為用陰影寫的倦挂,所以那個顏色只能設為陰影,不能設為實際的顏色担巩,但我也不知道它里面的邏輯到底是什么方援,不過終于跳出了坑,記錄一下涛癌,以免有的小伙伴跟我一樣犯戏。(最后附上正確實現(xiàn)的代碼)
ps:不過有沒有童鞋知道,我用showBackground: true為什么實現(xiàn)不了呢拳话,真是頭大先匪。。弃衍。