echarts 带背景的二维3D柱状图

echarts 带背景的二维3D柱状图

var abilityuse = document.getElementById("abilityuse_echarts")
var abilityuse_echarts = echarts.init(abilityuse);
var xData = ["04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
var line = ["375", "500", "900", "800", "610", "1001", "350"];
var line_bg = ["1500", "1500", "1500", "1500", "1500", "1500", "1500"]
var abilityuse_option = {
  title: {
    text: '(万次)',
    textStyle: {
      fontSize: 12,
      color: "#666",
      fontWeight: '400'
    },
    top: 0,
    left: "0%",
  },
  tooltip: {
    formatter: function (data) {
      let aaa = data.name + ":" + data.value + "万次"
      return aaa
    }
  },

  grid: {
    left: "4%",
    right: '1%',
    top: '11%',
    bottom: "15%"
  },
  legend: {
    show: true,
    icon: 'circle',
    orient: 'horizontal',
    top: '90.5%',
    right: 'center',
    itemWidth: 16.5,
    itemHeight: 6,
    // itemGap: 30,
    textStyle: {
      // color: '#FFFFFF'
      color: '#C9C8CD',
      fontSize: 14
    }
  },
  xAxis: [{
    data: xData,
    axisLabel: {
      show: true,
      textStyle: {
        color: '#666',
        fontSize: 12
      },
      margin: 30, //刻度标签与轴线之间的距离。
    },

    axisLine: {
      show: false //不显示x轴
    },
    axisTick: {
      show: false //不显示刻度
    },
    boundaryGap: true,
    splitLine: {
      show: false,
      width: 0.08,
      lineStyle: {
        type: "solid",
        color: "#dfdfdf"
      }
    }
  }],
  yAxis: [{
    show: true,
    splitLine: {
      show: true,
      lineStyle: {
        color: '#dfdfdf',
        type: 'solid'
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#dfdfdf',
        type: 'solid'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#666'
      },
    }
  }],
  series: [
    {//柱底圆片
      name: "",
      type: "pictorialBar",
      symbolSize: [32, 18],//调整截面形状
      symbolOffset: [0, 10],
      z: 12,
      itemStyle: {
        'normal': {
          color: "#4898FF",

        }
      },
      data: line_bg
    },
    //柱体
    {
      name: '',
      type: 'bar',
      barWidth: 32,
      barGap: '-100%',
      itemStyle: {
        normal: {
          color: "#4898FF",
        }
      },
      showBackground: true,
      backgroundStyle: {
        color: '#EFF8FA'
      },
      data: line
    },

    //背景柱顶圆片
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [32, 18],//调整截面形状
      symbolOffset: [0, -10],
      z: 12,
      symbolPosition: "end",
      "itemStyle": {
        'normal': {
          color: '#C2E1F0',
        }
      },
      data: line_bg
    },

    //柱顶圆片
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [32, 18],//调整截面形状
      symbolOffset: [0, -10],
      z: 12,
      symbolPosition: "end",
      "itemStyle": {
        'normal': {
          color: '#246FF4',
        }
      },
      data: line
    }
  ]
}
abilityuse_echarts.setOption(abilityuse_option);
window.addEventListener("resize", function () {
  abilityuse_echarts.resize()
});