echarts 横向对向堆叠柱状图

option = {
  // 设置两个独立的绘图区域（上下排列）
  grid: [
    {
      // 上方柱状图的网格区域
      width: '30%',
      left: '10%'
    },
    {
      // 下方柱状图的网格区域
      width: '30%',
      right: '10%'
    }
  ],
  // 配置两组坐标轴（每个柱状图需要独立的X轴和Y轴）
  xAxis: [
    {
      // 上方柱状图的X轴
      gridIndex: 0, // 绑定到第一个grid
      type: 'value',
      axisLabel: { interval: 0 }
    },
    {
      // 下方柱状图的X轴
      type: 'value',
      gridIndex: 1, // 绑定到第二个grid
      axisLabel: { interval: 0 }
    }
  ],
  yAxis: [
    {
      // 上方柱状图的Y轴
      gridIndex: 0,
      type: 'category',
      data: ['一', '二', '三', '四', '五'],
      position: 'right' // 确保轴居中
    },
    {
      // 下方柱状图的Y轴
      gridIndex: 1,
      type: 'category',
      data: ['一', '二', '三', '四', '五']
    }
  ],
  // 配置两个独立的系列（柱状图）
  series: [
    {
      name: '数据系列1',
      type: 'bar',
      stack: 'total',
      xAxisIndex: 0, // 使用第一个xAxis
      yAxisIndex: 0, // 使用第一个yAxis
      data: [-120, -200, -150, -80, -70],
      itemStyle: {
        color: '#f9a656'
      }
    },
    {
      name: '数据系列1',
      type: 'bar',
      stack: 'total',
      xAxisIndex: 0, // 使用第一个xAxis
      yAxisIndex: 0, // 使用第一个yAxis
      data: [-120, -200, -150, -80, -70],
      itemStyle: {
        color: '#8e82f2'
      }
    },
    {
      name: '数据系列2',
      type: 'bar',
      stack: 'total',
      xAxisIndex: 1, // 使用第二个xAxis
      yAxisIndex: 1, // 使用第二个yAxis
      data: [20, 50, 100, 60, 80],
      itemStyle: {
        color: '#33b8b3'
      }
    },
    {
      name: '数据系列2',
      type: 'bar',
      stack: 'total',
      xAxisIndex: 1, // 使用第二个xAxis
      yAxisIndex: 1, // 使用第二个yAxis
      data: [20, 50, 100, 60, 80],
      itemStyle: {
        color: '#4486ff'
      }
    }
  ],
  // 可选：添加标题和图例
  title: {
    text: '双柱状图示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    // 自定义提示框内容（显示绝对值）
    formatter: (params) => {
      return (
        params[0].name +
        '<br/>' +
        params
          .map((item) => {
            const value = Math.abs(item.value);
            return `${item.marker} ${item.seriesName}: ${value}`;
          })
          .join('<br/>')
      );
    }
  },
  legend: {
    data: ['数据系列1', '数据系列2'],
    bottom: 0
  }
};