跳到主要内容

ECharts 图例组件

我们之前看到的图表基本上都是同一个内容不同时间的变化展示，当时当我们需要将多条数据放在同一个图表中进行观察比较时，我们如何才能区分哪个代表哪个呢？所以我们就需要下面将要讲到的这个组件来帮助我们进行区分，让错综复杂的图表变得直观一些。

1. 简介​

官方定义：

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。ECharts 3 中单个 ECharts 实例中可以存在多个图例组件，会方便多个图例的布局。

慕课解释

图例是图表的辅助视觉引导组件，用以解释说明图表中各数据序列的含义及图表中数据的筛选。在 ECharts 中的图例在视觉上通常包含颜色、图表、图案名称两类要素，形如：

ECharts 的图例组件主要实现了两类交互功能：

  1. 鼠标悬停时高亮相应图表；
  2. 点击选中后，隐藏/显示相应图表。

Tips：

图例组件的引入为使用者开放了图表显示、隐藏的控制能力，适用于图表数量较多或交互要求较高的场景。但并不是多多益善，比如在移动端这种小尺寸环境，图例会占据一定的屏幕空间，而且点击交互略为别扭，应尽量避免使用。

2. 实例解析​

ECharts 中的图例通过 legend 项配置，主要包含以下几类属性：

  • 用于控制图例位置大小的属性，包括 left、top、right、bottom、width、height；
  • 用于设定图例样式的属性，包括 background、shadowColor、borderColor 等；
  • 用于图例项大小的属性，包括 itemGap、itemWidth、itemHeight；
  • 与选中功能相关的属性，包括 selected、selectedMode；
  • 与选择器相关的属性，包括 selector、selectorLabel、selectorPosition、selectorItemGap、selectorButtonGap；
  • 用于设定分页效果的属性，包括 scrollDataIndex、pageButtonItemGappageButtonGap、pageButtonPosition、pageFormatter、pageIcons、pageIconColor、pageIconInactiveColor、pageIconSize、pageTextStyle；
  • 用于设置图例数据的 data属性。

下面展开讨论。

2.1 基础配置​

启动 legend 组件，简单方法是提供 legend: {show: true} 配置，基础示例：