echarts堆叠的条形图 /瀑布图无法创建

Question

以下代码是我最终提出的，它只是将随机生成的数据作为模拟创建。

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 };
  },
});

上面的代码生成了类似的东西，其中具有多个位置，其中htings htings重叠，不以0为中心（这是因为模拟数据），而这通常不是我想要的。但这是我来的最远：

您可以使用两个不同的堆栈来实现给定的外观，一个用于阳性，一个用于负部分。所得条可以与barGap: "-100%"重叠。请注意，将蓝条切成两块，在使用Legend或Tooltip时可能会使事情变得复杂。

Answer 1

：

const data = [{
    time: 1,
    blue: 48,
    green_pos: 0,
    green_neg: 0,
    yellow_pos: 0,
    yellow_neg: 0
  }, ... ];

option = {
  xAxis: {
    type: 'category',
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'blue_pos',
      type: 'bar',
      stack: 'pos',
      data: data.map(x => x.blue / 2),
      color: '#5470c6'
    },
    {
      name: 'blue_neg',
      type: 'bar',
      stack: 'neg',
      data: data.map(x => -x.blue / 2),
      color: '#5470c6'
    },
    {
      name: 'green_pos',
      type: 'bar',
      stack: 'pos',
      data: data.map(x => x.green_pos),
      color: '#91cc75'
    },
    {
      name: 'green_neg',
      type: 'bar',
      stack: 'neg',
      data: data.map(x => -x.green_neg),
      color: '#91cc75'
      
    },
    {
      name: 'yellow_pos',
      type: 'bar',
      stack: 'pos',
      data: data.map(x => x.yellow_pos),
      color: '#fac858'
    },
    {
      name: 'yellow_neg',
      type: 'bar',
      stack: 'neg',
      data: data.map(x => -x.yellow_neg),
      color: '#fac858',
      barGap: "-100%"
    },
  ]
};