echarts柱状图的背景动态效果

这里的动态效果实现原理，就是相当于柱状图多了一组同系列数据，其值与数组展示数据一致（类似下图）

即，柱形图的每一个柱体都有它对应的另外一个柱体

其中白色柱体要与展示柱体重合，效果类似与给柱体做背景，只需要加上barGap，值为-100%即可，白色柱体在展示柱体上方，可以通过设置大于展示柱体的 z值 实现

我们想要实现的效果是动态的，即白色柱体并不是一直存在的，因此可以通过定时器，设置每隔1秒 series中白色柱体的配置动态显示一次，

let option={
   
   ...}
let myChart=this.$echarts.init(document.getElementById('canvas'))
myChart.setOption(option)
let flag=true
setInterval(()=>{
   
   
	if(flag){
   
   
		//给series添加白色主题配置
		option.series.push({
   
   ...//白色主题配置})
		flag=false
	}else{
   
   
		//动态效果显示后要正常显示，因此还要把白色柱体去掉
		option.series.pop()
		flag=true
	}
	//渲染新的表格,这里要注意的是要传第二个参数 true
	//第二个参数表示是否不跟之前设置的option进行合并，默认为false,即合并，那我们动态效果只会变化一次，这就是导致二次渲染不成功的原因，由于我们这里会重复渲染，因此要传第二个参数，且为true
	myChart.setOption(option,true)
})

首图效果图代码

initCategory(){
   
   
      let option={
   
   
        color:['rgba(255,255,255,0.1)'],
        xAxis: {
   
   
          type: 'value',
          splitLine: {
   
    show: false },
          axis