echart 3d视觉柱状堆叠图

在开发一大屏项目中遇到需要将echart柱状图开发成这样的UI效果：

思路如下：

使得柱状图从视觉上到达3d效果，就要在原柱状图相应的部位加一层椭圆形圆盖，从而实现视觉3d效果

代码如下：

data:

timeData1:[0,0,0,3,6],
timeData2:[0,2,8,8,0],
endTimeData:[0,2,8,11,0],
// endTimeData[i] = timeData2[i]==0? 0: timeData1[i] + timeData2[i] 这样最后的圆盖才会在柱子最上面

initEcharts() {
      let Chart = this.$echarts.init(document.getElementById(this.randomId));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            return (
              params[0].name +
              '<br/>' +
              params[0].seriesName +
              ' : ' +
              params[0].value +
              '<br/>' +
              params[2].seriesName +
              ' : ' +
              params[2].value +
              '<br/>' 
            );
          }
        },
        grid: {
          top: "24%",
          bottom: "30%",
        },
        xAxis: [
          {
            type: "category",
            data: this.timeXData,
            axisLine: {
              show: false,
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              margin: 10,
              interval: '0',
              textStyle: {
                fontSize: 12,
                width: "0",
                color: "rgba(255,255,255,0.45)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "项数",
            nameTextStyle: {
              color: "rgba(255,255,255,0.45)",
              fontSize: 12,
              padding: [0, 0, 0, -14]
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: 12,
                color: "rgba(255,255,255,0.45)",
                // margin: 15
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                color: "rgba(255,225,255,0.2)",
                type: "solid",
              },
            },
          },
        ],
        legend: [
          {
            data: ["已整改"],
            bottom: "8",
            right: "50%",
            icon: "rect",
            itemHeight: 8,
            itemWidth: 8,
            textStyle: {
              color: "rgba(255,255,255,0.65)",
            },
            itemStyle: {
              color: '#00D273'
            },
            // 因为柱子顶部和底部是通过 offset 跟柱子结合起来的，如果取消选中，柱子数量变化，又要重新计算 offset，为了简单点就直接禁掉了
            selectedMode: false
          },
          {
            data: ["未整改"],
            bottom: "8",
            right: "35%",
            icon: "rect",
            itemHeight: 8,
            itemWidth: 8,
            textStyle: {
              color: "rgba(255,255,255,0.65)",
            },
            itemStyle: {
              color: '#FFA900'
            },
            selectedMode: false
          },
        ],
        series: [
          {
            z: 1,
            name: "已整改",
            barWidth: 20,
            stack: 'total',
            type: 'bar',
            yAxisIndex: 0,
            itemStyle: {
              //渐变颜色
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00D273",
                },
                {
                  offset: 1,
                  color: "rgba(0,210,115,0.0)",
                },
              ]),
            },
            data: this.timeData1,
          },
          {
            z: 2,
            name: "已整改",
            barWidth: 20,
            stack: 'total',
            symbol: 'circle',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [20 - 2, (10 * (20 - 2)) / 20],
           //20为barWidth，减去的2可不固定，自己根据样式实现自己调整到合适大小直至圆盖恰巧覆盖柱子
            symbolPosition: 'end',//定位到最顶部
            type: "pictorialBar",
            yAxisIndex: 0,
            itemStyle: {
              //渐变颜色
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,210,115,0.9)",
                },
                {
                  offset: 1,
                  color: "rgba(0,210,115,0.9)",
                },
              ]),
            },
            data: this.timeData1,
          },
          {
            z: 3,
            name: "未整改",
            barWidth: 20,
            stack: 'total',
            type: "bar",
            yAxisIndex: 0,
            itemStyle: {
              //渐变颜色
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFA900",
                },
                {
                  offset: 1,
                  color: "rgba(255,169,0,0.0)",
                },
              ]),
            },
            data: this.timeData2,
          },
          {
            z: 4,
            name: "未整改",
            barWidth: 20,
            stack: 'total',
            symbol: 'circle',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [20 - 2, (10 * (20 - 2)) / 20],
            symbolPosition: 'end',
            type: "pictorialBar",
            yAxisIndex: 0,
            itemStyle: {
              //渐变颜色
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 169, 0,0.9)",
                },
                {
                  offset: 1,
                  color: "rgba(255,169,0,0.9)",
                },
              ]),
            },
            data: this.endTimeData,
          },
        ],
      };
      Chart.clear();
      Chart.resize();
      Chart.setOption(option);
    },