echarts--3D效果柱状图

echarts二维柱状图做3D效果，先看下效果：

 废话不多说，直接上代码：

<div class="box_echart" id="bar_echart"></div>复制

initBarEchart(){
      //柱状图
      let option_bar = this.setOption()
      let array = [{name:'5-10',value:232},{name:'5-11',value:132},{name:'5-12',value:432},{name:'5-13',value:632},{name:'5-14',value:252}]
      let x_array = []
      let y_array = []
      array.forEach(item =>{
        x_array.push(item.name)
        y_array.push(item.value)
      })
      option_bar.xAxis.data = x_array
      option_bar.series[0].data = y_array
      option_bar.series[1].data = y_array
      option_bar.series[2].data = y_array
      var myEchart = echarts.init(document.getElementById('bar_echart'))
      myEchart.setOption(option_bar)
    },
setOption(){
  return {
    grid: {
      top: 45,
      bottom: 60,
      left: "13%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: 'none'
      },
    },
    xAxis: {
      type: "category",
      data: [],
      axisLabel: {
        color: "#ffffff",
        interval: 0,
        rotate: 315,
        fontSize: 12,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#ffffff",
        fontSize: 12,
      },
    },
    series: [{
        name: 'A',//柱状A面
        data: [],
        type: "bar",
        barWidth: 14,
        showSymbol: false,
        hoverAnimation: false,
        itemStyle: {
          //柱状图渐变色
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#05D7FF"
            },
            {
              offset: 1,
              color: "#00A8F9"
            },
          ]),
        }
      },
      {
        name: 'B',//柱状B面
        type: "bar",
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#05D7FF"
            },
            {
              offset: 1,
              color: "#00A8F9"
            },
          ]),
        },
        barGap: 0,
        data: [],
      },
      {
        //柱状顶部
        tooltip: {
          show: false,
        },
        type: "pictorialBar",
        itemStyle: {
          borderWidth: 1,
          borderColor: "#0571D5",
          color: "#0571D5",
        },
        symbol: "diamond",
        symbolSize: ["24", "10"],
        symbolOffset: ["0", "-5"],
        symbolPosition: "end",
        data: [],
        z: 3,
      },
    ],
  };
}复制

在配置option时，可以根据自己需求重新定义，柱状图实现3D效果的大致思路就是这样的

记录一下echarts数据更新刷新柱状图

      let array = [] //新数据      
      let x_array = []
      let y_array = []
      array.forEach(item =>{
        x_array.push(item.name)
        y_array.push(item.value)
      })
      //获取已存在的echarts
      let myEchart = echarts.getInstanceByDom(document.getElementById('bar_echart'))
      //获取option
      let option = myEchart.getOption()
      option.xAxis[0].data = x_array
      option.series[0].data = y_array
      //重新赋值
      myEchart.setOption(option)复制