返回

以简驭繁，绘图帮手：ECharts图例组件探秘

前端

ECharts图例组件是ECharts中较为常用的组件之一。它用于以不同的颜色区别系列标记的名字，表述了数据与图形的关联。用户在操作时，可以通过单击图例控制哪些数据系列显示或不显示。图例组件的配置项包括：

  • show：是否显示图例组件。
  • type：图例组件的类型，可以是'plain'、'scroll'或'page'。
  • orient：图例组件的方位，可以是'horizontal'或'vertical'。
  • left：图例组件距离容器左侧的距离。
  • top：图例组件距离容器顶部的距离。
  • right：图例组件距离容器右侧的距离。
  • bottom：图例组件距离容器底部的距离。
  • width：图例组件的宽度。
  • height：图例组件的高度。
  • itemGap：图例项之间的间距。
  • lineHeight：图例项的高度。
  • textStyle：图例项的文本样式。
  • selectedMode：图例项的选中模式，可以是'single'、'multiple'或'none'。
  • selected：图例项的选中状态。

以下是图例组件的配置示例：

{
  show: true,
  type: 'plain',
  orient: 'horizontal',
  left: 'center',
  top: 'top',
  itemGap: 10,
  lineHeight: 20,
  textStyle: {
    color: '#000',
    fontSize: 12
  },
  selectedMode: 'single',
  selected: {
    'series1': true,
    'series2': false
  }
}

通过以上配置，我们可以实现一个显示在图表顶部的水平图例组件，图例项之间的间距为10像素，图例项的高度为20像素，图例项的文本样式为黑色12像素的字体，图例项的选中模式为单选，默认选中'series1'系列。

以下是图例组件的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var chart = echarts.init(document.getElementById('main'));
    var option = {
      legend: {
        show: true,
        type: 'plain',
        orient: 'horizontal',
        left: 'center',
        top: 'top',
        itemGap: 10,
        lineHeight: 20,
        textStyle: {
          color: '#000',
          fontSize: 12
        },
        selectedMode: 'single',
        selected: {
          'series1': true,
          'series2': false
        }
      },
      series: [
        {
          name: '系列1',
          type: 'line',
          data: [1, 2, 3, 4, 5]
        },
        {
          name: '系列2',
          type: 'line',
          data: [6, 7, 8, 9, 10]
        }
      ]
    };
    chart.setOption(option);
  </script>
</body>
</html>

运行以上代码，即可在页面中看到一个带图例的ECharts图表。

图例组件是ECharts中非常重要的组件之一，它可以帮助用户更好地理解图表中的数据。通过合理配置图例组件，我们可以让图表更加美观，更加便于理解。