如何隐藏ECharts Y轴最大值对应的splitLine并设置轴最大值为数据1.3倍

问题说明 #

需将Y轴最大值设为实际数据最大值的1.3倍，同时隐藏该最大值对应的水平分割线（splitLine），已尝试调整interval和splitNumber参数但无效。

解决方案 #

利用ECharts Y轴的splitLine.filter配置项，通过过滤函数判断当前刻度值是否等于Y轴最大值，若相等则不显示对应分割线。

修改后的完整配置 #

// 先计算堆叠数据的总最大值，再生成Y轴上限
const totalMax = 13000 + 8000;
const yAxisMax = totalMax * 1.3;

export const chartConfig = {
  xAxis: {
    type: 'category',
    data: ["Q1 '24", "Q2 '24", "Q3 '24", "Q4 '24"],
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    max: yAxisMax,
    axisLine: {
      show: true,
    },
    axisLabel: {
      showMaxLabel: false,
    },
    // 核心配置：过滤最大值对应的分割线
    splitLine: {
      filter: (value) => value !== yAxisMax
    },
    name: 'Y axis',
    nameGap: 50,
    nameLocation: 'middle',
    nameTextStyle: {
      fontSize: 14,
    },
  },
  legend: {
    type: 'plain',
    bottom: '2%',
    left: '10%',
  },
  tooltip: {
    show: true,
  },
  grid: { left: '10%' },
  series: [
    {
      data: [13000],
      type: 'bar',
      stack: 'a',
      name: 'First value',
      itemStyle: {
        color: 'rgb(69, 101, 76)',
      },
    },
    {
      data: [8000],
      type: 'bar',
      stack: 'a',
      name: 'Second value',
      itemStyle: {
        color: 'rgb(245, 218, 102)',
      },
    },
  ],
};

关键说明 #

1. 修正原配置的错误：将根节点的max配置移至yAxis内部（ECharts全局无max配置项），并提前计算好固定值，方便在过滤函数中直接引用
2. splitLine.filter函数会遍历所有刻度值，返回false时对应的分割线会被隐藏
3. 保留原axisLabel.showMaxLabel: false配置，同步隐藏最大值的刻度标签

动态数据适配 #

如果数据是动态生成的，可以通过以下方式自动计算堆叠最大值：

// 动态计算所有分类的堆叠总和，取最大值
const seriesData = [
  { data: [13000] },
  { data: [8000] }
];
const totalMax = Math.max(...seriesData[0].data.map((val, idx) => val + seriesData[1].data[idx]));
const yAxisMax = totalMax * 1.3;

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