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} 配置,基础示例:

实例演示
预览 复制