echarts 3D立体圆柱堆叠柱状图

3D立体圆柱堆叠柱状图

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

let barData1 = [10, 15, 8, 18, 9, 12, 14];
let barData2 = [8, 6, 5, 8, 4, 6, 4];
let barData3 = [8, 5, 12, 8, 20, 14, 17];
let dateX = [`周一`, '周二', '周三', '周四', '周五', '周六', '周日'];
let pictorialBar = [];
// let pictorialBar2 = [];
// let pictorialBar2 = [];
// let pictorialBar3 = [];
for (let i = 0; i < barData1.length; i++) {
  // pictorialBar.push(barData1[i] + barData2[i])
  // pictorialBar2.push(barData1[i] + barData2[i] + barData3[i])
  if (barData2[i] > 0) {
    pictorialBar.push(Number(barData1[i]) + Number(barData2[i]));
  } else {
    pictorialBar.push('');
  }
  // if (barData3[i] > 0) {
  //   pictorialBar2.push(Number(barData3[i]));
  // } else {
  //   pictorialBar2.push('');
  // }
}

option = {
  title: {
    text: '完成情况',
    x: 'center',
    textStyle: {
      //文字颜色
      color: '#000',
      //字体风格,'normal','italic','oblique'
      // fontStyle: 'normal',
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: '400',
      //字体系列
      // fontFamily: 'sans-serif',
      //字体大小
      fontSize: 16
    }
  },
  legend: {
    orient: 'horizontal',
    x: 'center',
    y: 'bottom',
    // padding: this.isDeptBedUsed == '1' ? [0, 0, 20, 0] : [0, 0, 0, 0],
    itemWidth: 12,
    itemHeight: 12,
    data: ['未完成', '申报数量', '实际完成量'],
    icon: 'rect'
  },
  dataZoom: this.dataZoom,
  backgroundColor: '#fff',
  tooltip: {
    trigger: 'axis',
    show: true,
    formatter: function (value) {
      // console.log(value);
      return `<span>${value[1].axisValueLabel}</span></br>
                            <div style="display: inline-block;
                               width:  10px;
                               height: 20px;
                               color:${value[1].color.colorStops[0].color};!important
                               ">●</div>&nbsp;<span>${value[1].seriesName}
                               </span>&nbsp;&nbsp;&nbsp;&nbsp;<span><strong>${value[1].data}</strong></span></br>

                               <div style="display: inline-block;
                               width:  10px;
                               height: 20px;
                               color:${value[3].color};!important
                               ">●</div>&nbsp;<span>${value[3].seriesName}
                               </span>&nbsp;&nbsp;&nbsp;&nbsp;<span><strong>${value[3].data}</strong></span></br>

                              <div style="display: inline-block;
                               width:  10px;
                               height: 20px;
                               color:${value[6].color.colorStops[0].color};!important
                               ">●</div>&nbsp;<span>${value[6].seriesName}
                               </span>&nbsp;&nbsp;&nbsp;&nbsp;<span><strong>${value[6].data}</strong></span></br>
                

                              `;
    }
  },
  grid: {
    left: '2%',
    right: '2%',
    bottom: '14%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    data: dateX,
    axisLabel: {
      margin: 20,
      // show: true,
      // interval: 0,
      textStyle: {
        color: '#888',
        fontSize: 14
      }
    }
  },
  yAxis: {
    axisLabel: {
      margin: 20,
      textStyle: {
        color: '#888',
        fontSize: 14
      }
    }
  },
  series: [
    // 底
    {
      name: '申报数量',
      type: 'pictorialBar',
      //圆片大小
      symbolSize: [16, 6],
      //圆片位置
      symbolOffset: [-8, 3],
      //显示层级
      z: 12,
      itemStyle: {
        //lenged文本
        color: '#a5cc0c'
      },

      data: barData1
    },

    //柱状图
    {
      name: '申报数量',
      type: 'bar',
      barWidth: 16,
      // barCategoryGap: '10%',
      barGap: '2%',
      barCategoryGap: '-4%',
      stack: 'group1',
      // barGap: '10%',
      itemStyle: {
        //lenged文本
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#dff77e'
          },
          {
            offset: 1,
            color: '#dff77e'
          }
        ])
      },

      data: barData1
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [16, 6],
      symbolOffset: [-8, -3],
      symbolPosition: 'end',
      z: 12,
      itemStyle: {
        //lenged文本
        color: '#27b9d6'
      },
      data: barData1
    },

    {
      name: '未完成',
      type: 'bar',
      barWidth: 30,
      barGap: '2%',
      barCategoryGap: '-4%',
      stack: 'group1',
      itemStyle: {
        // barBorderRadius: 20,
        color: '#8fe6f7'
      },
      data: barData2
    },
    {
      name: '', //头部
      type: 'pictorialBar',
      symbolSize: [16, 6],
      symbolOffset: [-8, -2],
      symbolPosition: 'end',

      z: 12,
      itemStyle: {
        //lenged文本
        color: '#27b9d6'
      },
      data: pictorialBar
    },

    // 底
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [16, 6],
      symbolOffset: [8, 3],
      z: 12,
      itemStyle: {
        //lenged文本
        color: '#eb47b7'
      },

      data: barData3
    },

    //柱状图
    {
      name: '实际完成量',
      type: 'bar',
      barWidth: 16,
      barGap: '2%',
      barCategoryGap: '-4%',
      stack: 'group2',
      itemStyle: {
        //lenged文本
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#f09cd6'
          },
          {
            offset: 1,
            color: '#f09cd6'
          }
        ])
      },

      data: barData3
    },
    // 顶
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [16, 6],
      symbolOffset: [8, -3],
      symbolPosition: 'end',
      z: 12,
      itemStyle: {
        //lenged文本
        color: '#eb47b7'
      },
      data: barData3
    }
  ]
};

option && myChart.setOption(option);