Vue中ECharts堆叠柱状图/瀑布图配置问题求助

我现在正试着做一个堆叠柱状图/瀑布图，但在配置过程中遇到了好多困难。我是在Vue项目里用ECharts开发的，不过其实框架本身影响不大，要是能有关于如何在ECharts里配置出目标效果的任何帮助，我都会超级感激！

我想要做出的效果是这样的：

下面是我目前写出来的代码，里面用了随机生成的数据作为模拟：

import { defineComponent, ref, onMounted } from 'vue';
import { use } from 'echarts/core';
import VChart from 'vue-echarts';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

export default defineComponent({
  components: {
    VChart,
  },
  setup() {
    const timeIntervals = ref([]);
    
    const updateTimeIntervals = () => {
      const intervals = [];
      let startTime = new Date();
      startTime.setMinutes(0, 0, 0);
      for (let i = 0; i < 8; i++) { // 8 hours with 1-hour intervals
        intervals.push(
          startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        );
        startTime.setHours(startTime.getHours() + 1);
      }
      timeIntervals.value = intervals;
    };
    
    onMounted(updateTimeIntervals);
    
    const chartOptions = ref({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      },
      xAxis: {
        type: 'category',
        data: timeIntervals,
        axisLabel: { rotate: 45 },
      },
      yAxis: {
        type: 'value',
        min: -100,
        max: 100,
      },
      series: [
        {
          name: 'Category A',
          type: 'bar',
          stack: 'total',
          data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
          color: '#5470c6',
        },
        {
          name: 'Category A (Duplicate)',
          type: 'bar',
          stack: 'total',
          data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
          color: '#91cc75',
        },
        {
          name: 'Category B',
          type: 'bar',
          stack: 'total',
          data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
          color: '#fac858',
        },
        {
          name: 'Category C',
          type: 'bar',
          stack: 'total',
          data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
          color: '#ee6666',
        },
        {
          name: 'Category D',
          type: 'bar',
          stack: 'total',
          data: Array.from({ length: 8 }, () => Math.floor(Math.random() * 200 - 100)),
          color: '#73c0de',
        },
      ],
    });
    
    return { chartOptions, timeIntervals };
  },
});

上面这段代码生成的效果和我想要的差很多——比如元素会重叠，数据没有以0为中心对齐（我知道这是因为用了随机模拟数据），整体完全不是我想要的样子。这已经是我能做到的最接近的效果了：

备注：内容来源于stack exchange，提问作者dunct