You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Echarts能否按数值从高到低堆叠柱状图?

解决ECharts堆叠柱状图按数值排序堆叠的问题

没问题!要实现堆叠顺序从数值最高到最低,分两种常见场景,我分别给你解决方案:

场景1:按每个系列的总和从高到低堆叠

如果你的需求是让整体数值总和大的系列排在堆叠最底层(从下到上数值递减),只需要调整series数组的顺序即可——ECharts的堆叠顺序完全由你定义series的先后顺序决定:先写的系列在堆叠最下方,后写的在上方。

看你的示例数据:

  • teste2总和:220+182+191+234+290+330+310 = 1757
  • teste3总和:150+232+201+154+190+330+410 = 1667
  • teste1总和:120+132+101+134+90+230+210 = 1017

按总和从高到低调整series顺序后,代码如下:

series: [
  { name: 'teste2', type: 'bar', stack: '1', data: [220, 182, 191, 234, 290, 330, 310] },
  { name: 'teste3', type: 'bar', stack: '1', data: [150, 232, 201, 154, 190, 330, 410] },
  { name: 'teste1', type: 'bar', stack: '1', data: [120, 132, 101, 134, 90, 230, 210] }
]

这样堆叠起来,最底层是数值总和最高的teste2,往上依次是teste3和teste1,符合“从高到低”的堆叠顺序。

场景2:每个柱子单独按当前点数值从高到低堆叠

如果你的需求是每个单独的柱子里,各个分段的数值从下到上依次递减(比如第一个柱子里teste2(220)在最下面,teste3(150)中间,teste1(120)在最上面;第二个柱子里teste3(232)在最下面,teste2(182)中间,teste1(132)在最上面),这种情况ECharts没有原生支持,需要我们手动处理数据:

核心思路是,对每个X轴位置的所有数据点排序,然后为每个排序后的位置生成对应的系列。这里提供一个可行的实现方式:

// 原始数据
const originalSeries = [
  { name: 'teste1', data: [120, 132, 101, 134, 90, 230, 210] },
  { name: 'teste2', data: [220, 182, 191, 234, 290, 330, 310] },
  { name: 'teste3', data: [150, 232, 201, 154, 190, 330, 410] }
];

// 处理数据:对每个X轴位置的数值从大到小排序
const processedData = [];
const xCount = originalSeries[0].data.length;

for (let i = 0; i < xCount; i++) {
  // 收集当前X位置的所有数据项
  const items = originalSeries.map(s => ({ name: s.name, value: s.data[i] }));
  // 按数值从大到小排序
  items.sort((a, b) => b.value - a.value);
  processedData.push(items);
}

// 重新构建series:每个排序后的层级对应一个系列
const stackedSeries = processedData[0].map((_, layerIndex) => {
  const data = processedData.map(xItems => xItems[layerIndex].value);
  // 注意:如果保留原始系列名称,图例会因每个柱子层级顺序不同而混乱,可自定义层级名称
  return {
    name: `数值层 ${layerIndex + 1}`,
    type: 'bar',
    stack: '1',
    data: data
  };
});

// 最终将stackedSeries作为ECharts的series配置使用

如果需要保留原始系列的图例关联,可以进一步自定义tooltip,在提示框中显示当前分段对应的原始系列名称。


内容的提问来源于stack exchange,提问作者Victor

火山引擎 最新活动