echarts 多y轴 数据有负数导致0刻度线不对齐

开发时用echarts做双轴时发现其中某轴有负数时0刻度线会不对齐

网上找了很多方法去尝试，效果都不是很好，这边自己写了个处理的方法

let y1Data = [2.0, 4.9, 7.0, 23.2, 25.6, -76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
let y2Data = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
let rowNum = 6;
let max1 = y1Data.length != 0 ? Math.max(...y1Data) : 1;
let max2 = y2Data.length != 0 ? Math.max(...y2Data) : 1;
let min1 = y1Data.length != 0 ? Math.min(...y1Data) : 1;
let min2 = y2Data.length != 0 ? Math.min(...y2Data) : 1;复制

先分别读取出两个数组的最大值和最小值，如果数组的长度为0，为了方面后面的计算先设置值为1
rowNum 为理想的分段数，实际数量并不是真的这个

let inter1 = Math.ceil((max1 - min1) / rowNum) || 1;
let inter2 = Math.ceil((max2 - min2) / rowNum) || 1;复制

然后分别计算出，每个数组在理想分段数下的每段实际间隔数inter

if (y1Data.length != 0) {
  min1 = Math.floor(min1 / inter1) * inter1;
  max1 = Math.ceil(max1 / inter1) * inter1;
}
if (y2Data.length != 0) {
  min2 = Math.floor(min2 / inter2) * inter2;
  max2 = Math.ceil(max2 / inter2) * inter2;
}复制

然后根据计算的实际分段间隔数去重新计算最大和最小数
目的是为了让最大和最小数刚好分段间隔成比例，这个时候的最大和最小数就是根据间隔比例来的

if (y2Data.length != 0 && y1Data.length != 0) {
  let maxNum1 = Math.floor(Math.abs(max1) / inter1)
  let minNum1 = Math.floor(Math.abs(min1) / inter1)
  let maxNum2 = Math.floor(Math.abs(max2) / inter2)
  let minNum2 = Math.floor(Math.abs(min2) / inter2)
  if (maxNum1 > maxNum2) {
    if (maxNum2 == 0) {
      max2 = maxNum1 * inter2 * 1
    } else {
      max2 = maxNum1 * inter2 * ((max2 || 1) / (Math.abs(max2) || 1))
    }
  } else if (maxNum1 < maxNum2) {
    if (maxNum1 == 0) {
      max1 = maxNum2 * inter1 * 1
    } else {
      max1 = maxNum2 * inter1 * ((max1 || 1) / (Math.abs(max1) || 1))
    }
  }
  if (minNum1 > minNum2) {
    if (minNum2 == 0) {
      min2 = minNum1 * inter2 * -1
    } else {
      min2 = minNum1 * inter2 * ((min2 || 1) / (Math.abs(min2) || 1))
    }
  } else if (minNum1 < minNum2) {
    if (minNum1 == 0) {
      min1 = minNum2 * inter1 * -1
    } else {
      min1 = minNum2 * inter1 * ((min1 || 1) / (Math.abs(min1) || 1))
    }
  }
}复制

先计算出每列的最大数占比数量和最小数占比数量，然后分别去对比，少数量的就根据分段间隔去补数量，保证两边的最大数列数和最小数列数相同，就可以保持一致的列刻度

yAxis: [
    {
      type: 'value',
      min: min1,
      max: max1,
      interval: inter1,
      splitNumber: rowNum,
    },
    {
      type: 'value',
      min: min2,
      max: max2,
      interval: inter2,
      splitNumber: rowNum,
    }
  ],复制

最后在yAxis上设置好上面计算的属性

完整代码如下：（图表渲染那块，只需要参考yAxis的配置就行）

let y1Data = [2.0, 4.9, 7.0, 23.2, 25.6, -76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
let y2Data = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
let rowNum = 6;
let max1 = y1Data.length != 0 ? Math.max(...y1Data) : 1;
let max2 = y2Data.length != 0 ? Math.max(...y2Data) : 1;
let min1 = y1Data.length != 0 ? Math.min(...y1Data) : 1;
let min2 = y2Data.length != 0 ? Math.min(...y2Data) : 1;
let inter1 = Math.ceil((max1 - min1) / rowNum) || 1;
let inter2 = Math.ceil((max2 - min2) / rowNum) || 1;
if (y1Data.length != 0 && inter1 != 0) {
  min1 = Math.floor(min1 / inter1) * inter1;
  max1 = Math.ceil(max1 / inter1) * inter1;
}
if (y2Data.length != 0 && inter2 != 0) {
  min2 = Math.floor(min2 / inter2) * inter2;
  max2 = Math.ceil(max2 / inter2) * inter2;
}
if (y2Data.length != 0 && y1Data.length != 0) {
  let maxNum1 = Math.floor(Math.abs(max1) / inter1)
  let minNum1 = Math.floor(Math.abs(min1) / inter1)
  let maxNum2 = Math.floor(Math.abs(max2) / inter2)
  let minNum2 = Math.floor(Math.abs(min2) / inter2)
  if (maxNum1 > maxNum2) {
    if (maxNum2 == 0) {
      max2 = maxNum1 * inter2 * 1
    } else {
      max2 = maxNum1 * inter2 * ((max2 || 1) / (Math.abs(max2) || 1))
    }
  } else if (maxNum1 < maxNum2) {
    if (maxNum1 == 0) {
      max1 = maxNum2 * inter1 * 1
    } else {
      max1 = maxNum2 * inter1 * ((max1 || 1) / (Math.abs(max1) || 1))
    }
  }
  if (minNum1 > minNum2) {
    if (minNum2 == 0) {
      min2 = minNum1 * inter2 * -1
    } else {
      min2 = minNum1 * inter2 * ((min2 || 1) / (Math.abs(min2) || 1))
    }
  } else if (minNum1 < minNum2) {
    if (minNum1 == 0) {
      min1 = minNum2 * inter1 * -1
    } else {
      min1 = minNum2 * inter1 * ((min1 || 1) / (Math.abs(min1) || 1))
    }
  }
}
 
if (y1Data.length == 0) {
  max1 = 1
  min1 = 0
}
if (y2Data.length == 0) {
  max2 = 1
  min2 = 0
}
 
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: min1,
      max: max1,
      interval: inter1,
      splitNumber: rowNum,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Evaporation',
      min: min2,
      max: max2,
      interval: inter2,
      splitNumber: rowNum,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: y1Data
    },
    {
      name: 'Precipitation',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: y2Data
    }
  ]
};复制

最终效果