ECharts技术需求：所有数据为0时Y轴仅显示0

问题出在当所有数据为0时，ECharts自动生成的Y轴刻度会包含接近0的小数值（比如0.1），用Math.ceil()处理后就变成了1，导致所有刻度都显示1。要实现“所有数据为0时Y轴仅显示0”，可以按以下方式修改配置：

步骤1：判断所有数据是否为0 #

在组件中先计算一个标识位，判断当前数据集是否全部为0：

// 假设你的数据数组是data，根据实际结构调整判断逻辑
const isAllZero = data.every(item => item === 0); 
// 如果是对象数组（比如[{value: 0}, ...]），就改成item.value === 0

步骤2：修改Y轴配置 #

结合这个标识位，动态调整Y轴的max和axisLabel.formatter：

yAxis: {
  show: true,
  type: "value",
  min: 0,
  // 动态设置max：全0时max设为0，否则让ECharts自动计算
  max: isAllZero ? 0 : undefined,
  axisLabel: {
    formatter: (val) => {
      if (props.time) {
        return timeFormatter(val / 1000);
      }
      // 全0时直接返回0加单位，否则用Math.ceil处理
      return isAllZero ? `0 ${props.units}` : `${Math.ceil(val)} ${props.units}`;
    },
  },
}

这样修改后，当所有数据为0时，Y轴只会显示0刻度；数据不为全0时，依然保留原来的Math.ceil格式化逻辑，同时刻度显示也会恢复正常。

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