eachart实现堆叠立体柱状图

上图

上代码 不知道为什么前面两行没有加进代码片段里面，看的时候应该可以看懂吧哈哈哈哈，有更简单的实现方式欢迎补充

`var chartDom = document.getElementById('main')

var myChart = echarts.init(chartDom) var xData = ['南宁', '海南', '上海', '兰州','安宁','黎塘','大连','天津','深圳','广东','深圳']

var data: number[] = [2, 4, 6, 8, 2, 4, 6, 8, 2, 4, 2]

var option = {

grid: {
  left: '0%',
  right: '0%',
  top: '5%',
  bottom: '5%',
  containLabel: true,
},

xAxis: {
  type: 'category',
  data: xData,
  nameLocation: 'middle',

  axisLabel: { interval: 0, rotate: 30, fontSize: 8 },
  axisLine: {
    lineStyle: {
      color: '#fff',
    },
  },
  axisTick: {
    show: false,
    lineStyle: {
      type: 'dashed',
      color: '#e5e5e5',
    },
  },
},
yAxis: {
  type: 'value',
  axisLabel: { fontSize: 10 },
  axisLine: {
    lineStyle: {
      color: '#fff',
    },
  },
  splitLine: {
    lineStyle: {
      // type: 'dashed',
      type: [5, 5],
      dashOffset: 5,
      color: '#e5e5e5',
      opacity: 0.5,
    },
  },
},
series: [
  {
    // /数据图
    data: data,
    type: 'bar',
    barGap: '-0%',
    barWidth: 11,
    stack: 'a',
    itemStyle: {
      color: '#D04C47',
    },
    z: 1,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barWidth: 4,
    // barGap: '0%',
    stack: 'b',
    itemStyle: {
      color: '#8C231F',
    },
    z: 2,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barGap: '-0%',
    barWidth: 11,
    stack: 'a',
    itemStyle: {
      color: '#F58B3B',
    },
    z: 1,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barWidth: 4,
    // barGap: '0%',
    stack: 'b',
    itemStyle: {
      color: '#A44B00',
    },
    z: 2,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barGap: '-0%',
    barWidth: 11,
    stack: 'a',
    itemStyle: {
      color: '#ECC75A',
    },
    z: 1,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barWidth: 4,
    // barGap: '0%',
    stack: 'b',
    itemStyle: {
      color: '#BA931E',
    },
    z: 2,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barGap: '-0%',
    barWidth: 11,
    stack: 'a',
    itemStyle: {
      color: '#5AC0EC',
    },
    z: 1,
  },
  {
    // /数据图
    data: data,
    type: 'bar',
    barWidth: 4,
    // barGap: '0%',
    stack: 'b',
    itemStyle: {
      color: '#3088AD',
    },
    z: 2,
  },
  {
    // 最上面菱形
    data: [8, 16, 24, 32, 8, 16, 24, 32, 8, 16, 8],
    type: 'pictorialBar',
    symbol: 'diamond',
    symbolSize: ['16', '4'],
    symbolPosition: 'end',
    symbolOffset: ['0', '-55%'],
    stack: 'c',
    itemStyle: {
      color: '#5AC0EC',
    },
    z: 3,
  },
],  }  option && myChart.setOption(option)`

重点是这块，最上面菱形的数据是怎么来的，他就是前面几层数据的总和，比如我现在的模拟数据是

[2, 4, 6, 8, 2, 4, 6, 8, 2, 4, 2]，

然后现在有四层，那么data数据*4就是菱形的数据啦

[8, 16, 24, 32, 8, 16, 24, 32, 8, 16, 8],

现在还有一个问题就是菱形的颜色，我现在统一用的最后一层的颜色，如果有些数据只有两层的话那这个颜色就会有问题，现在有点思路还么验证，后续实现了会来补充哒！