解決ECharts雙座標左右分隔線無法重合問題

當我們兩組數據在一張圖上時經常遇到左右兩個Y軸的問題,如果最大值不能整除則會出現分隔線不重疊影響視覺效果的問題,

如圖:

解決方法:

解決思路通過簡單的計算,讓左右Y軸變成可以整除的倍數關係既可,我的算法代碼如下:

// 計算左右軸可整除的最大值
calculateMax() {
  // 業績最大值
  let resultMax = Math.max(...this.resultArr);
  // 排名最大值
  let orderMax = Math.max(...this.orderByArr);
  // 定義餘數
  let remainderNum = 0;
  // 如果業績大於排名
  if (resultMax >= orderMax) {
    remainderNum = resultMax % orderMax;
    // 小值加餘數讓其可整除
    orderMax += remainderNum;
    // 大值乘以向上取整的倍數讓其也可以整除
    resultMax = Math.ceils(resultMax / orderMax) * orderMax;
  } else {
    remainderNum = orderMax % resultMax;
    resultMax += remainderNum;
    orderMax = Math.ceil(orderMax / resultMax) * resultMax;
  }
  return {
    resultMax,
    orderMax,
  };

最後來看下效果: