echarts雙軸軸線不對齊的解決辦法

背景：當設置雙軸的時候，軸線的刻度數量、間距均由echart內部自動計算，導致兩邊的軸線大概率下不會對齊，如下圖所示：

查詢echarts配置文檔，發現以下屬性:

min: 坐標軸刻度最小值

max: 坐標軸刻度最大值

splitNumber：坐標軸的分割段數

interval：強制設置坐標軸分割間隔

OK，我們根據業務數據，定制化的計算相關屬性值即可。

options.yAxis.forEach((y, index) => {
  // leftMax, rightMax的值，請自行根據自身數據計算，即：默認配置下的最大值
  // const { leftMax, rightMax} = this.getMaxValue();
  // index === 0時是左軸，1是右軸
  let max = !index ? rightMax + '' : leftMax + '';
  max = value === 'null' ? 0 : this.computeMax(max);
  y.splitNumber = SPLIT_NUMBER;
  y.interval = max / SPLIT_NUMBER;
  y.max = max;
});

const SPLIT_NUMBER = 4; // 分割段數

/**
 * @description 根據實際最大值，計算軸的最大值
 * @param { String} value 實際的最大值(字符串的數字)
 * @returns { Number } 計算后的最大值
 */
computeMax(value) {
  if (Math.floor(value) === 0) {  // 是小數
    let { result, digit } = getNumberFromDecimal(Number(value));
    result = result.substr(0, 2);    // 取前兩位
    return Number(Math.ceil(value / SPLIT_NUMBER) * SPLIT_NUMBER) / Math.pow(10, digit - 1 + 2);
  } else {
    const roundValue = Math.floor(value).toString();
    if (roundValue.length > 2) { // 兩位以上
      const topTwo = roundValue.substr(0, 2);
      const len = roundValue.length;
      return Number(Math.ceil(topTwo / SPLIT_NUMBER) * SPLIT_NUMBER) * Math.pow(10, len - 2);
    } else {
      return Number(Math.ceil(value / SPLIT_NUMBER) * SPLIT_NUMBER);
    }
  }
}

/**
 * @description 獲取小於0的小數中的數字
 * @param { Number } decimal  小數
 * @returns { result, digit } 小數點后不包括0的數字，小數點后的位數
 */
getNumberFromDecimal = function(decimal) {
  let str = decimal.toString();
  if (typeof decimal !== 'number' || !str.includes('.')) {
    throw '參數不是小數';
  }
  if (decimal >= 1) {
    throw '參數大於等於1';
  }
  for (let i = 0; i < str.length; i ++) {
    if (str[i] !== '0' && str[i] !== '.') {
      return { result: str.substring(i, str.length), digit: i - 2 };
    }
  }
}

思路大致如上, 具體可根據自身業務做相應的調整。
附上最后效果圖：