echarts柱状图-实现柱状体堆叠从上到下显示

echarts在柱状体堆叠时，默认从下到上显示，例如温度告警在前，但是图表中的温度告警却是在最下面，效果图如下：

代码如下：

const xDataList = [
  '2024-02-01',
  '2024-02-02',
  '2024-02-03',
  '2024-02-04',
  '2024-02-05',
  '2024-02-06',
  '2024-02-07',
  '2024-02-08',
  '2024-02-09',
  '2024-02-10',
  '2024-02-11',
  '2024-02-12',
  '2024-02-13',
  '2024-02-14',
  '2024-02-15',
  '2024-02-16',
  '2024-02-17',
  '2024-02-18',
  '2024-02-19',
  '2024-02-20',
  '2024-02-21',
  '2024-02-22',
  '2024-02-23',
  '2024-02-24',
  '2024-02-25',
  '2024-02-26',
  '2024-02-27',
  '2024-02-28',
  '2024-02-29'
];
const dataList = [
  {
    name: '温度告警',
    values: [
      0, 0, 11, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 23, 25, 31, 11,
      0, 0, 0, 0, 0, 0, 0
    ]
  },
  {
    name: '湿度告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  },
  {
    name: '烟雾告警',
    values: [
      1, 0, 0, 0, 2, 0, 0, 1, 2, 4, 6, 4, 6, 0, 0, 0, 0, 0, 2, 11, 18, 8, 0, 0,
      0, 0, 0, 0, 0
    ]
  },
  {
    name: '水浸告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  },
  {
    name: '安防告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  },
  {
    name: '网络告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  }
];
option = {
  color: ['#7F8AF2', '#FFD666', '#F892B7', '#FFA275', '#79D38A', '#81D3F8'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: xDataList
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: dataList.map((item) => {
    return {
      name: item.name,
      type: 'bar',
      barWidth: 20,
      stack: 'warnTrend',
      data: item.values
    };
  })
};

但是存在一种需求是柱状体可以根据数据顺序从上往下显示，效果图如下：
更改后的代码如下：

const xDataList = [
  '2024-02-01',
  '2024-02-02',
  '2024-02-03',
  '2024-02-04',
  '2024-02-05',
  '2024-02-06',
  '2024-02-07',
  '2024-02-08',
  '2024-02-09',
  '2024-02-10',
  '2024-02-11',
  '2024-02-12',
  '2024-02-13',
  '2024-02-14',
  '2024-02-15',
  '2024-02-16',
  '2024-02-17',
  '2024-02-18',
  '2024-02-19',
  '2024-02-20',
  '2024-02-21',
  '2024-02-22',
  '2024-02-23',
  '2024-02-24',
  '2024-02-25',
  '2024-02-26',
  '2024-02-27',
  '2024-02-28',
  '2024-02-29'
];
const dataList = [
  {
    name: '温度告警',
    values: [
      0, 0, 11, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 23, 25, 31, 11,
      0, 0, 0, 0, 0, 0, 0
    ]
  },
  {
    name: '湿度告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  },
  {
    name: '烟雾告警',
    values: [
      1, 0, 0, 0, 2, 0, 0, 1, 2, 4, 6, 4, 6, 0, 0, 0, 0, 0, 2, 11, 18, 8, 0, 0,
      0, 0, 0, 0, 0
    ]
  },
  {
    name: '水浸告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  },
  {
    name: '安防告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  },
  {
    name: '网络告警',
    values: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0
    ]
  }
];
  // 1. 获取legend
  const legendData = dataList.map(item => item.name);
option = {
    // 2. 颜色倒着写
    // color: ['#7F8AF2','#FFD666','#F892B7','#FFA275','#79D38A','#81D3F8'],
    color: ['#81D3F8','#79D38A','#FFA275','#F892B7','#FFD666','#7F8AF2'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      // 3.自定义内容
      formatter: function (params) {
        let res = '';
        let data = '';
        for (let i = params.length - 1; i > -1; i--) {
          data = `<div style="margin-bottom: 5px;">${params[i].name}</div>`;
          res += `<div style="display: flex;">
                    <div style="margin-right: 4px;">${params[i].marker}</div>
                    <div style="margin-right: 20px;">${params[i].seriesName}</div>
                    <div style="font-weight: bold;text-align: right;">${params[i].value}</div>
                  </div>`;
        }
        return data + res;
      },
    },
    legend: {
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xDataList,
      }
    ],
    yAxis: [
      {
        type: 'value',
      }
    ],
    // 4. 数据倒序
    series: dataList.reverse().map((item) => {
      return {
        name: item.name,
        type: 'bar',
        barWidth: 20,
        stack: 'warnTrend',
        data: item.values,
      }
    })
  }

备注：代码可以直接粘贴到echarts官网的示例中运行：https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align