如何使用Apache ECharts按柱子总值对stacked bar chart排序？

你当前的排序方式无效，原因是直接针对单条数据的totalWeight排序，而每个carrierName对应多条不同transportLeg的数据，这种排序不会改变x轴的分类顺序。要实现按柱子总值排序，需要先计算每个carrierName的总权重，再基于这个总值来排序x轴分类。

解决步骤 #

1. 新增一个汇总数据集，计算每个carrierName的总totalWeight
2. 对汇总数据集按总权重降序排序，提取排序后的carrierName列表作为x轴的分类顺序
3. 让所有系列的x轴数据遵循这个排序后的顺序

修改后的完整代码 #

{
  dataset: [
    {
      source: [
        { carrierName: "jopie", transportLeg: "Retour", totalWeight: 20 },
        { carrierName: "jopie", transportLeg: "Inbound", totalWeight: 20 },
        { carrierName: "def", transportLeg: "Retour", totalWeight: 15 },
        { carrierName: "def", transportLeg: "Inbound", totalWeight: 15 },
        { carrierName: "def", transportLeg: "Replenish", totalWeight: 15 },
        { carrierName: "ghi", transportLeg: "Inbound", totalWeight: 10 }
      ],
      dimensions: ["carrierName", "transportLeg", "totalWeight"]
    },
    // 新增：计算每个carrierName的总权重并排序
    {
      transform: [
        {
          type: "aggregate",
          config: {
            groupBy: "carrierName",
            aggregations: [
              {
                dimension: "totalWeight",
                resultDimension: "totalSum",
                aggregation: "sum"
              }
            ]
          }
        },
        {
          type: "sort",
          config: {
            dimension: "totalSum",
            order: "desc"
          }
        }
      ]
    },
    {
      transform: [
        { type: "filter", config: { dimension: "transportLeg", value: "Inbound" } }
      ]
    },
    {
      transform: [
        { type: "filter", config: { dimension: "transportLeg", value: "Replenish" } }
      ]
    },
    {
      transform: [
        { type: "filter", config: { dimension: "transportLeg", value: "Retour" } }
      ]
    }
  ],
  xAxis: {
    type: "category",
    // 从汇总数据集获取排序后的carrierName顺序
    data: function (params) {
      const sumDataset = params.ecModel.getDatasetByIndex(1);
      return sumDataset.getSource().map(item => item.carrierName);
    }
  },
  yAxis: {},
  series: [
    {
      encode: { x: "carrierName", y: "totalWeight" },
      type: "bar",
      stack: "x",
      name: "Inbound",
      datasetIndex: 2
    },
    {
      encode: { x: "carrierName", y: "totalWeight" },
      type: "bar",
      stack: "x",
      name: "Replenish",
      color: "yellow",
      datasetIndex: 3
    },
    {
      encode: { x: "carrierName", y: "totalWeight" },
      type: "bar",
      stack: "x",
      name: "Retour",
      color: "green",
      datasetIndex: 4
    }
  ]
}

说明 #

• 新增的数据集（索引1）通过aggregate变换计算每个carrierName的总权重，再用sort按总值降序排列
• x轴的data通过函数从汇总数据集提取排序后的carrierName列表，强制x轴按这个顺序显示
• 注意调整了各个系列的datasetIndex，因为新增了一个汇总数据集，原来的索引1-3变成了2-4

内容的提问来源于stack exchange，提问作者johan81238