座標軸

直角座標系中的 x/y 軸。

x 軸、y 軸

x 軸和 y 軸都包含軸線、刻度、標籤和標題。有些圖表會使用網格線來輔助檢視和計算資料。

一個普通的二維座標系擁有 x 軸和 y 軸。通常情況下，x 軸位於底部，y 軸位於左側。配置項如下所示。

option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
  // ...
};

x 軸通常用來宣告類目，也稱作觀察資料的維度，例如：“銷售時間”、“銷售地點”、“產品名稱”等。y 軸通常用來表示類目的數值。這些資料用於考察某一類資料的量化數值或需要分析的某些指標，例如：“銷售數量”、“銷售價格”。

option = {
  xAxis: {
    type: 'time',
    name: 'Sales Time'
    // ...
  },
  yAxis: {
    type: 'value',
    name: 'Sales Quantity'
    // ...
  }
  // ...
};

當 x 軸的資料跨度很大時，我們可以使用縮放（zoom）的方法來顯示圖表中的部分資料。

option = {
  xAxis: {
    type: 'time',
    name: 'Sales Time'
    // ...
  },
  yAxis: {
    type: 'value',
    name: 'Sales Quantity'
    // ...
  },
  dataZoom: []
  // ...
};

在二維資料中，可以有多於兩個座標軸。在 ECharts 中，通常可以同時存在兩個 x 軸或 y 軸。你可以更改配置項 offset 來避免座標軸在同一位置重疊。x 軸可以顯示在頂部和底部，y 軸可以顯示在左側和右側。

option = {
  xAxis: {
    type: 'time',
    name: 'Sales Time'
    // ...
  },
  yAxis: [
    {
      type: 'value',
      name: 'Sales Quantity'
      // ...
    },
    {
      type: 'value',
      name: 'Sales Price'
      // ...
    }
  ]
  // ...
};

座標軸軸線

ECharts 提供了 axisLine 的配置項。你可以根據需求更改設定，例如座標軸兩端的箭頭和軸線樣式。

option = {
  xAxis: {
    axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
    // ...
  },
  yAxis: {
    axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
  }
  // ...
};

座標軸刻度

ECharts 提供了 axisTick 的配置項。你可以根據需求更改設定，例如刻度的長度和樣式。

option = {
  xAxis: {
    axisTick: {
      length: 6,
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
    // ...
  },
  yAxis: {
    axisTick: {
      length: 6,
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
  }
  // ...
};

座標軸刻度標籤

ECharts 提供了 axisLabel 的配置項。你可以根據需求更改設定，例如文字對齊方式和自定義標籤內容。

option = {
  xAxis: {
    axisLabel: {
      formatter: '{value} kg',
      align: 'center'
      // ...
    }
    // ...
  },
  yAxis: {
    axisLabel: {
      formatter: '{value} ¥',
      align: 'center'
      // ...
    }
  }
  // ...
};

示例

左側的 y 軸代表東京的月平均氣溫，右側的 y 軸代表東京的降水量。x 軸代表時間。它反映了平均氣溫和降水量之間的趨勢和關係。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        rotate: 30
      },
      data: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      position: 'right',
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      position: 'left',
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 0,
      data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [
        6.0,
        10.2,
        10.3,
        11.5,
        10.3,
        13.2,
        14.3,
        16.4,
        18.0,
        16.5,
        12.0,
        5.2
      ]
    }
  ]
};
線上示例

以上是關於座標軸配置項用法的簡明介紹。更多詳情請查閱官方網站。

貢獻者 在 GitHub 上編輯此頁

pissang