Echarts 雙 Y 軸詳解

一、什麼是雙 Y 軸

Echarts 雙 Y 軸是一種常見的圖表類型，它可以在同一張圖表中展示多個指標，每個指標都有自己的 Y 軸。這種圖表類型主要用於展示異構指標之間的關係，可以幫助用戶更加直觀地理解這些指標之間的關係。

使用 Echarts 雙 Y 軸非常簡單，只需要在配置項中設置 yAxis 數組，並將其中的每個軸分別配置即可。例如：

option = {
  yAxis: [
    {
      type: 'value',
      ...
    },
    {
      type: 'value',
      ...
    }
  ],
  ...
};

其中，yAxis 數組中的每個元素都是一個配置項對象，可以通過設置對象中的各個屬性來對該 Y 軸進行自定義。例如，可以設置軸類型、刻度範圍、名稱、刻度標籤樣式、軸線樣式等等。具體屬性請參考 Echarts 官方文檔。

yAxis.type 屬性用於設置 Y 軸的類型，可選值有 'value'、'category'、'time'、'log'，分別表示數值軸、類目軸、時間軸和對數軸。默認值為 'value'。

yAxis: {
  type: 'value'
}

yAxis.name 屬性用於設置 Y 軸的名稱。

yAxis: {
  name: '銷售額'
}

yAxis.nameTextStyle 屬性用於設置 Y 軸名稱的樣式，可以設置字體顏色、字號、字體粗細等。

yAxis: {
  name: '銷售額',
  nameTextStyle: {
    color: '#333',
    fontSize: 14,
    fontWeight: 'bold'
  }
}

yAxis.min 和 yAxis.max 屬性用於設置 Y 軸的刻度範圍。默認情況下，Echarts 會自動計算刻度範圍，以適應數據的範圍。但是有時候我們需要手動設置這個範圍，以顯示更加直觀的圖表。例如：

yAxis: {
  min: 0,
  max: 100
}

yAxis.splitNumber 屬性用於設置 Y 軸的刻度分割數量，默認為 5。如果將其設置為10，則 Y 軸上會展示更多的刻度，圖表會顯示更加精細的數據變化趨勢。

yAxis: {
  splitNumber: 10
}

yAxis.axisLine 屬性用於設置 Y 軸軸線的樣式，可以設置軸線顏色、寬度、類型等。

yAxis: {
  axisLine: {
    lineStyle: {
      color: '#ccc',
      width: 2,
      type: 'dashed'
    }
  }
}

yAxis.axisTick 屬性用於設置 Y 軸刻度線的樣式，可以設置刻度線長度、寬度、顏色等。

yAxis: {
  axisTick: {
    length: 10,
    lineStyle: {
      color: '#333',
      width: 2
    }
  }
}

yAxis.axisLabel 屬性用於設置 Y 軸刻度標籤的樣式，可以設置字體大小、顏色、間隔等。

yAxis: {
  axisLabel: {
    fontSize: 12,
    color: '#999',
    interval: 0
  }
}

yAxis.inverse 屬性用於控制 Y 軸的方向，如果設置為 true，則 Y 軸的刻度會從右往左展示，這在某些需要從右到左展示的圖表中非常有用。

yAxis: {
  inverse: true
}

yAxis.gridIndex 屬性用於將 Y 軸和指定的網格組合起來展示，可以實現多個 Y 軸在同一張圖表中展示，但每個 Y 軸只能在一個網格中展示。可以通過設置不同的 gridIndex 值來將多個 Y 軸分別和不同的網格組合展示。

yAxis: {
  gridIndex: 0
}

通過本文的闡述，我們可以看到 Echarts 雙 Y 軸的配置項非常豐富，可以根據不同的數據類型和展示需求進行自由配置。通過合理的配置，我們可以讓圖表更加直觀、易懂，幫助用戶更加深入地理解數據。

原創文章，作者：EMBJT，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/372860.html