如何在Apache ECharts中设置固定数量的y轴分割线并适配全图表类型

可行配置方案 #

你之前配置的splitNumber不生效属于ECharts的正常逻辑：splitNumber只是预估的分割段数，ECharts会自动调整刻度为规整易读的数值，所以不会严格匹配你设置的数值。要强制固定分割线数量，可选择以下两种方案：

方案1：固定y轴上下限，直接指定间隔（最稳定） #

如果你可以确定y轴的取值范围，直接设置min、max和interval即可，分割线数量 = 分割段数 - 1，示例配置如下：

yAxis: [
  {
    type: 'value',
    min: 0,
    max: 6000,
    // 要分割为4段的话，interval = (max - min)/4 = 1500，此时分割线共3条
    // 如果需要4条分割线，就分为5段，interval = 1200
    interval: 1500,
    splitLine: {
      show: true // 确保分割线开启，默认值为true
    }
  }
]

方案2：自适应数据范围，动态计算间隔 #

如果需要y轴随数据自动适配范围，可通过min、max回调动态计算规整后的范围和间隔，示例如下：

// 自定义目标分割段数，对应分割线数量为该值减1
const targetSplitNumber = 4
yAxis: [
  {
    type: 'value',
    scale: true,
    min: function (value) {
      // 把最小值向下规整为整百，可根据业务场景调整精度
      return Math.floor(value.min / 100) * 100
    },
    max: function (value) {
      // 把最大值向上规整为整百，可根据业务场景调整精度
      return Math.ceil(value.max / 100) * 100
    },
    interval: function (value) {
      // 动态计算固定间隔
      return (value.max - value.min) / targetSplitNumber
    },
    splitLine: {
      show: true
    }
  }
]

注意：如果需要避免间隔出现小数，可对计算出的interval做向上取整处理，同时同步调整max的值适配即可。
额外提醒：你给出的示例配置中重复声明了两次yAxis数组属于错误写法，需要把所有y轴配置合并到同一个对象中才会生效。

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