如何基于ECharts柱状图数据值设置z-index实现层级排序？

核心思路 #

ECharts的series.itemStyle.z支持回调函数，可针对单个数据项设置层级，而非给整个系列统一赋值。我们需要先预处理每个横轴位置的所有数值，生成「数值→层级z值」的映射表，再在回调中根据当前数据的数值和横轴位置匹配对应的z值，实现数值小的柱子在底层、大的在上层的效果。

具体实现代码 #

1. 预处理层级映射表 #

先整理每个横轴节点下的所有数值，排序后生成数值到z值的对应关系：

// 示例系列数据
const seriesData = [
  { name: '系列A', data: [8, 12, 7] },
  { name: '系列B', data: [10, 9, 15] },
  { name: '系列C', data: [5, 14, 6] }
];

// 预处理每个横轴位置的数值-z映射表
const zMap = [];
const axisCount = seriesData[0].data.length; // 横轴节点数量

for (let axisIdx = 0; axisIdx < axisCount; axisIdx++) {
  // 收集当前横轴下所有系列的数值
  const values = seriesData.map(serie => serie.data[axisIdx]);
  // 对数值去重并从小到大排序
  const sortedValues = [...new Set(values)].sort((a, b) => a - b);
  // 生成映射：最小数值对应z=1，依次递增
  const valueToZ = {};
  sortedValues.forEach((val, idx) => {
    valueToZ[val] = idx + 1;
  });
  zMap.push(valueToZ);
}

2. 配置ECharts选项 #

在series的itemStyle中用回调函数设置每个柱子的z值：

const option = {
  xAxis: {
    type: 'category',
    data: ['横轴1', '横轴2', '横轴3']
  },
  yAxis: {
    type: 'value'
  },
  series: seriesData.map(serie => ({
    name: serie.name,
    type: 'bar',
    data: serie.data,
    itemStyle: {
      // 针对每个数据项返回对应的z值
      z: (params) => {
        const axisIndex = params.dataIndex; // 当前横轴节点索引
        const value = params.value; // 当前柱子的数值
        return zMap[axisIndex][value];
      }
    }
  }))
};

处理数值相同的情况 #

如果存在相同数值的柱子，上面的方案会给它们设置相同的z值，此时ECharts会按系列顺序渲染。若想给相同数值的柱子也区分层级，可以修改预处理逻辑，结合系列索引排序：

for (let axisIdx = 0; axisIdx < axisCount; axisIdx++) {
  // 收集当前横轴下所有系列的数值+系列索引
  const valueWithSerieIdx = seriesData.map((serie, idx) => ({
    val: serie.data[axisIdx],
    serieIdx: idx
  }));
  // 先按数值排序，数值相同则按系列索引排序
  valueWithSerieIdx.sort((a, b) => {
    if (a.val !== b.val) return a.val - b.val;
    return a.serieIdx - b.serieIdx;
  });
  // 生成带系列索引的唯一键映射
  const valueToZ = {};
  valueWithSerieIdx.forEach((item, idx) => {
    const key = `${item.val}-${item.serieIdx}`;
    valueToZ[key] = idx + 1;
  });
  zMap.push(valueToZ);
}

// 对应修改itemStyle的z回调
itemStyle: {
  z: (params) => {
    const axisIndex = params.dataIndex;
    const value = params.value;
    const serieIdx = params.seriesIndex;
    const key = `${value}-${serieIdx}`;
    return zMap[axisIndex][key];
  }
}

为什么你之前的方法行不通 #

你尝试给整个系列设置z: serie.map(...)，但ECharts的series.z是给整个系列设置统一层级，无法针对单个柱子调整。只有通过itemStyle.z的回调，才能为每个数据项单独指定z值，实现按数值动态调整层级的需求。

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