技術標籤：echarts

一開始是參照了這個連結實現echarts雙y軸0刻度對齊進行的改造，但是發現放到專案裡，會出現其中一個y軸刻度不顯示的情況。

然後又參照了這個連結Echarts的雙y軸0刻度對齊問題,這個方法也有個問題，是以0為分界線，實現0上和0下等分的情況，若值都是大於0的話，是無需0下部分的。

上面兩種都不能有效解決問題，所以只能自己寫了

第一步：分別找出雙y軸的最大最小值

const max1 = Math.max(1, ...data1) || 1;
const min1 = Math.min(0, ...data1) || 0;
 

const max2 = Math.max(1, ...data2) || 1;
const min2 = Math.min(0, ...data2) || 0;

第二步：計算兩組資料範圍的比值(相當於比例尺)

const ratio = (max1 - min1) / (max2 - min2);

第三步：兩組資料對階,然後確定應當使用哪一組的資料作為最大值或最小值

  if (max1 < max2 * ratio) {
    y1Max = max2 * ratio;
    y2Max = max2;
  } else {
    y1Max = max1;
    y2Max =
 
 max1 / ratio;
  }
  if (min1 < min2 * ratio) {
    y1Min = min1;
    y2Min = min1 / ratio;
  } else {
    y1Min = min2 * ratio;
    y2Min = min2;
  }

第四步：給y軸分別設定最大最小值(乘以1.2是為了最大最小值不在頂格的位置)

yAxis: [
    {
        ...
        max: (y1Max * 1.2).toFixed(0),
        min: (y1Min * 1.2).toFixed(0),
        ...
 

    },
    {
        ...
        max: (y2Max * 1.2).toFixed(0),
        min: (y2Min * 1.2).toFixed(0),
        ...
    }
],

最終實現的效果圖