echarts 显示顺序_解决echarts的stack堆积柱状图顺序反的问题

在 Echarts 中，可以通过 `yAxis` 的 `inverse` 属性来控制坐标轴的显示顺序，但是对于堆积柱状图，可能会出现堆积顺序反转的问题。

解决这个问题的方法是，在设置数据时，将数据按照堆积的顺序进行排序。例如，如果有 A、B、C 三个堆积，需要将数据按照 C、B、A 的顺序排列，才能保证堆积的顺序正确。

示例代码：

// 假设有 A、B、C 三个堆积
var data = [
  { name: 'item1', value: [10, 20, 30] },
  { name: 'item2', value: [15, 25, 35] },
  { name: 'item3', value: [20, 30, 40] }
];

// 按照 C、B、A 的顺序排序
data.sort(function(a, b) {
  return b.value[2] - a.value[2];
});

// 创建堆积柱状图
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value',
    inverse: true
  },
  series: [{
    type: 'bar',
    stack: 'stack1',
    data: data.map(function(item) {
      return item.value[0];
    })
  }, {
    type: 'bar',
    stack: 'stack1',
    data: data.map(function(item) {
      return item.value[1];
    })
  }, {
    type: 'bar',
    stack: 'stack1',
    data: data.map(function(item) {
      return item.value[2];
    })
  }]
});

在上面的示例中，我们通过 `sort()` 方法将数据按照 C、B、A 的顺序排序，然后在创建堆积柱状图时，按照排序后的顺序设置数据。这样就能保证堆积的顺序正确了。