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




