这里的动态效果实现原理，就是相当于柱状图多了一组同系列数据，其值与数组展示数据一致（类似下图）
即，柱形图的每一个柱体都有它对应的另外一个柱体
其中白色柱体要与展示柱体重合，效果类似与给柱体做背景，只需要加上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,即合并，那我们动态效果只会变化一次，这就是导致二次渲染不成功的原因，由于我们这里会重复渲染，因此要传第二个参数，且为truemyChart.setOption(option,true)
})
首图效果图代码
initCategory(){let option={color:['rgba(255,255,255,0.1)'],xAxis: {type: 'value',splitLine: { show: false },axisTick: { show: false },axisLine: { show: false },axisLabel: { show: false }},yAxis: {type: 'category',inverse:true,data:['1','2','3','4'],splitLine: { show: false },axisTick: { show: false },axisLine: { show: false },},series: [{barWidth:20,animation:false,data: [{value:500,label:{show:true,position:'right'},itemStyle:{color:{type: 'linear',x: 0,y: 1,x2: 1,y2: 0,colorStops: [{offset: 0, color: '#3caee7' // 0% 处的颜色}, {offset: 1, color: '#2e8bb9' // 100% 处的颜色}],global: false // 缺省为 false}}}, {value:200,label:{show:true,position:'right'},itemStyle:{color:{type: 'linear',x: 0,y: 1,x2: 1,y2: 0,colorStops: [{offset: 0, color: '#32c5e9' // 0% 处的颜色}, {offset: 1, color: '#2494ad' // 100% 处的颜色}],global: false // 缺省为 false},}}, {value:150,label:{show:true,position:'right'},itemStyle:{color:{type: 'linear',x: 0,y: 1,x2: 1,y2: 0,colorStops: [{offset: 0, color: '#68dfe2' // 0% 处的颜色}, {offset: 1, color: '#54b8b9' // 100% 处的颜色}],global: false // 缺省为 false}}}, {value:80,label:{show:true,position:'right'},itemStyle:{color:{type: 'linear',x: 0,y: 1,x2: 1,y2: 0,colorStops: [{offset: 0, color: '#9fe6b8' // 0% 处的颜色}, {offset: 1, color: '#89c79f' // 100% 处的颜色}],global: false // 缺省为 false}}}],type: 'bar',itemStyle:{borderRadius: 15},z:2},]}const myChart=this.$echarts.init(document.getElementById('category'))myChart.setOption(option)let flag=truesetInterval(()=>{if(flag){option.series.push({barWidth:20,barGap:'-100%',data: [500, 200, 150, 80],type: 'bar',itemStyle:{borderRadius: 15},z:3})flag=false}else{flag=trueoption.series.pop()}myChart.setOption(option,true)},1000)}
