图例

图例用于使用不同的颜色、形状和文本对图表中的内容进行注释，以指示不同的类别。通过单击图例，用户可以显示或隐藏相应的类别。图例是理解图表的一个关键。

布局

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

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