堆叠效果的两种实现方式echarts 柱状配置项内容和展示

预期效果:绿色堆叠在红色上方。 #1 使用 scatter,能正确显示。#2 使用 stacked bar,x 位置有问题,应该如何设置?

配置项如下
      var BIN_SIZE = 10;
var FFT_ZERO = 110; // zero position in fft
var FFT_MAX = 150;

var data = [];
for (var i = 0; i < BIN_SIZE; ++i) {
    data.push(Math.random() * 40 + 110);
}

option = {
    series: [{
        type: 'bar',
        data: data,
        stack: 1,
        barCategoryGap: 20,
        barGap: 20,
        barWidth: 40
    }, {
        type: 'bar',
        data: (function () {
            var d = [];
            for (var i = 0; i < BIN_SIZE; ++i) {
                d.push(0);
            }
            console.log(d)
            return d;
        })(),
        stack: 1,
        barCategoryGap: '-100%',
        barGap: 0,
        barWidth: 20,
        itemStyle: {
            normal: {
                color: 'green'
            }
        },
        barMinHeight: 4
    }],
    xAxis: {
        min: 0,
        max: BIN_SIZE,
        data: (function () {
            var d = [];
            for (var i = 0; i < BIN_SIZE; ++i) {
                d.push(i + '');
            }
            return d;
        })(),
        type: 'category'
        // show: false
    },
    yAxis: {
        // show: false,
        min: FFT_ZERO,
        max: FFT_MAX
    },
    tooltip: {
        show: true
    }
};
    
截图如下