ECharts柱状图背景动态效果实现

ECharts柱状图背景动态效果实现

引用

CSDN

1.

https://blog.csdn.net/weixin_46394325/article/details/139477217

本文将介绍如何使用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 },
          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=true
      setInterval(()=>{
        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=true
          option.series.pop()
        }
        myChart.setOption(option,true)
      },1000)
    }