漂亮的3D柱状图

效果

html代码

 <div id="echartitem" style="width: 100%; height: 100%"></div>

import * as echarts from "echarts";
 drawChart() {
  const that=this;
  if (this.charts) {
    this.charts.clear();
  } 
  this.charts = echarts.init(document.getElementById('echartitem'));

  let dataAxis = ['岳阳电厂SS系统', '报表系统', '财预系统', '经营日报', '经营日报2', '经营日报3', '经营日报4', '经营日报5']
  let data = [220, 182, 191, 234, 290, 330, 310, 123];
  let yMax = 500;
  let dataShadow = [];
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }
  const option = {
    grid: {
      top: "30px",
      left: "20px",
      right: "20px",
      bottom: "30px",
      containLabel: true,
    },
    dataZoom: {
      type: 'inside',
      start: 0,
      end: 80,
    },
    tooltip:{
      trigger: "axis",
      backgroundColor: "rgba(50,50,50,0.6)",
      formatter:function(serie){   
      let that=this,_html = '<div style="width:100%;text-align:left;height:5px">' + serie[0].name + "</div><br/>";
      serie.forEach(function(iserie){
        if(iserie.seriesType!=="pictorialBar"){
          _html += '<div style="text-align:left;height:10px;float:left">' + serie[0].marker + iserie.seriesName+"</div><div style='text-align:right;margin-left:10px;height:10px;float:left'>" + iserie.value;
          _html += '</div><br/>';
        }
      })
      return _html;
    },
      borderColor: "rgba(50,50,50,0.6)",
      axisPointer: {
        lineStyle: {
          color: "#fff",
        },
      },
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: false,
        color: '#fff'
      },
      axisLine: { onZero: true ,lineStyle: { color: "#666" } },
      splitLine: { show: false  },
      splitArea: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: "#c2dcf5"
      },
      z: 10
    },
    yAxis: {
      type: "value",
      name:'表数量',
      nameTextStyle:{
        color:'#fff',
        fontSize:12,
        padding:[0,35,0,0],
        verticalAlign: 'middle',
      },
      splitLine: {
        show: false,
      },
      axisLine: { show: true, lineStyle: { color: "#666" } },
      axisTick: { show: false },
      axisLabel: { color: "#fff" },
    },
    toolbox: {
      show: true,
        saveAsImage: {
          backgroundColor: "#0f1d40"
        }
      },
      top: "0px",
      right: "2%",
    },
    series: [
        {
          name: "上部圆",
          type: "pictorialBar",
          silent: true,
          symbolSize: [26, 10],
          symbolOffset: [0, -5],
          symbolPosition: "end",
          z: 14,
          label: {
            show: true,
            position: "top",
            fontSize: 15,
            fontWeight: "bold",
            color: "#5BFCF4",
          },
          color: "#5BFCF4",
          data: data
        },
        {
          name: "底部圆",
          type: "pictorialBar",
          silent: true,
          symbolSize: [26, 10],
          symbolOffset: [0, 5],
          z: 12,
          color: "#5BFCF4",
          data: data
        },

        {
          name: "设备数量",
          type: "bar",
          barWidth: "26",
          barGap: "10%", // Make series be overlap
          barCateGoryGap: "10%",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
              {
                offset: 0,
                color: "rgba(210,210,210,0.3)",
              },
              {
                offset: 1,
                color: "#5BFCF4",
              },
            ]),
            opacity: 0.8,
          },
          emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
              {
                offset: 0,
                color:  "#5BFCF4"
              },
              {
                offset: 1,
                color: "rgba(210,210,210,0.3)"
              },
            ]),
            opacity: 1,
          }
        },
          data: data
        },
    ],
  };
  const zoomSize = 6;
  this.charts.on('click', (params)=> {
    this.$parent.systemName=params.name;
    this.charts.dispatchAction({
      type: 'dataZoom',
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
  });
  this.charts.setOption(option);
  this.resize();
  },