图例

图例通过不同的颜色、形状和文字来标注图表中的内容，以指代不同的数据类别。用户通过点击图例，可以显示或隐藏对应的类别。图例是理解图表的关键之一。

布局

图例通常位于图表的右上角。同一页面中的所有图例都需要保持一致，并结合整体图表空间的布局进行水平或垂直对齐。当图表垂直空间较小或内容区域拥挤时，将图例放在图表底部也是一个不错的选择。以下是一些图例的布局方式：

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