图例

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

布局

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

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 pissang