圖例

圖例透過不同的顏色、形狀和文字來標註圖表中的內容，以指代不同的資料類別。使用者透過點選圖例，可以顯示或隱藏對應的類別。圖例是理解圖表的關鍵之一。

佈局

圖例通常位於圖表的右上角。同一頁面中的所有圖例都需要保持一致，並結合整體圖表空間的佈局進行水平或垂直對齊。當圖表垂直空間較小或內容區域擁擠時，將圖例放在圖表底部也是一個不錯的選擇。以下是一些圖例的佈局方式：

option = {
  legend: {
    // Try 'horizontal'
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
線上示例

如果圖例項過多，可使用可滾動的控制元件。

option = {
  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x']
    // ...
  }
  // ...
};

樣式

對於深色背景，為圖例背景層和文字使用淺色，同時將背景設定為半透明。

option = {
  legend: {
    data: ['Legend A', 'Legend B', 'Legend C'],
    backgroundColor: '#ccc',
    textStyle: {
      color: '#ccc'
      // ...
    }
    // ...
  }
  // ...
};

圖例的顏色有多種設計方式。針對不同的圖表，圖例樣式可以有所不同。

option = {
  legend: {
    data: ['Legend A', 'Legend B', 'Legend C'],
    icon: 'rect'
    // ...
  }
  // ...
};

互動

根據環境需求，圖例可以支援互動操作。點選圖例可顯示或隱藏對應的類別。

option = {
  legend: {
    data: ['Legend A', 'Legend B', 'Legend C'],
    selected: {
      'Legend A': true,
      'Legend B': true,
      'Legend C': false
    }
    // ...
  }
  // ...
};

提示

圖例應根據具體情況使用。一些雙軸圖表包含多種圖表型別，應區分不同種類的圖例樣式。

option = {
  legend: {
    data: [
      {
        name: 'Legend A',
        icon: 'rect'
      },
      {
        name: 'Legend B',
        icon: 'circle'
      },
      {
        name: 'Legend C',
        icon: 'pin'
      }
    ]
    //  ...
  },
  series: [
    {
      name: 'Legend A'
      //  ...
    },
    {
      name: 'Legend B'
      //  ...
    },
    {
      name: 'Legend C'
      //  ...
    }
  ]
  //  ...
};

當圖表中只有一類資料時，應使用圖表標題而非圖例來解釋說明。

貢獻者 在 GitHub 上編輯此頁

pissang