Apache ECharts堆叠/取消堆叠后柱状图顺序异常问题求助

问题原因 #

这种现象是主流柱状图渲染库（如ECharts、Highcharts）的内部排序逻辑导致的：

• 堆叠模式下，库会基于stack属性对系列进行分组，同时生成一套临时的堆叠排序映射来控制绘制层级
• 取消堆叠时，部分库不会自动将系列的绘制优先级重置为初始状态，而是沿用了堆叠阶段的临时排序规则，导致部分系列被后置到分组末尾
• 二次堆叠时，库会重新读取stack属性的分组规则，恢复预设的系列顺序，因此看起来又正常了

可行解决方案 #

1. 手动强制重置系列绘制顺序（通用方案） #

取消堆叠操作时，不要仅清空stack属性，同时显式将每个系列的层级/索引重置为初始值，确保绘制顺序和首次加载时一致：

• ECharts：设置series[i].zIndex = i（i为系列的初始索引）
• Highcharts：设置series[i].index = i

示例代码（ECharts）：

// 取消堆叠的触发函数
function disableStack() {
  const chart = echarts.getInstanceByDom(document.getElementById('your-chart-id'));
  const currentOption = chart.getOption();
  
  currentOption.series.forEach((series, idx) => {
    series.stack = ''; // 取消堆叠
    series.zIndex = idx; // 强制重置为初始顺序
  });
  
  chart.setOption(currentOption, { notMerge: false });
}

2. 同步系列与分类数组的对应关系 #

如果系列的name与x轴分类数组完全匹配，可在取消堆叠后，强制按分类数组的顺序重新排序系列：

function syncSeriesOrder() {
  const chart = echarts.getInstanceByDom(document.getElementById('your-chart-id'));
  const currentOption = chart.getOption();
  const categoryOrder = currentOption.xAxis[0].data;
  
  // 按分类数组的顺序重新排列系列
  currentOption.series.sort((a, b) => {
    return categoryOrder.indexOf(a.name) - categoryOrder.indexOf(b.name);
  });
  
  chart.setOption(currentOption);
}

在取消堆叠后调用此函数，确保系列顺序与分类数组严格对应。

3. 预存初始顺序，每次切换时复用 #

首次加载图表时，记录每个系列的初始索引：

// 全局变量存储初始索引
let initialSeriesIndices = [];

// 首次初始化图表后执行
function saveInitialOrder() {
  const chart = echarts.getInstanceByDom(document.getElementById('your-chart-id'));
  const option = chart.getOption();
  initialSeriesIndices = option.series.map((_, idx) => idx);
}

之后每次切换堆叠状态时，都基于这个数组重置系列的层级属性，彻底避免库的内部排序干扰。

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