Legend 图例

图例是图表中的辅助标记，通过颜色、形状、大小来区分不同的数据分组，有助于更好地传达不同视觉编码的含义，也常用于图表中数据的筛选。在 VChart 中图例根据关联的数据类型的不同分为离散图例和连续图例，其中连续图例又分为颜色图例和尺寸图例。本教程主要讲解 Legend 的相关概念以及组成，关于 Legend 更加详细的配置及示例，详见配置项文档及示例页面。

离散图例

离散图例是用于表示图表中由不同颜色或形状区分的数据类别。

组成

离散图例由以下部分组成：

图例标题 title：表示图例的名称
图例项 item 表示各个数据类别，其中每个图例项由以下部件组成

shape：图例项的 shape，通常同具体的图表类型相对应
label：图例项文本，表示该类别的名称
value：图例项数值，如果有可以显示该类别对应的数值
background：图例项背景，设置图例项的背景颜色或透明度等样式

分页器：当图例项过多时会自动分页，方便用户浏览和操作

布局

目前离散图例分为水平布局和垂直布局两种布局方式，在不同的布局方式下，图例内部的标题、图例项和分页器的布局占位如下：

目前默认布局策略为流式布局，即

水平布局：水平布局下的图例项会做从左到右的布局。如果设置了限制宽度（maxWidth），超出之后：
- 如果配置了 autoPage （即自动分页，默认为 true）则会根据配置项 maxRow (限制的行数，默认为 2) 自动出现分页器
- 如果 autoPage 为 false，则进行自动换行
垂直布局：垂直布局下的图例项会做自上到下的布局。如果设置了限制高度（maxHeight），超出之后：
- 如果配置了 autoPage （即自动分页，默认为 true）则会根据配置项 maxCol (限制的列数，默认为 1) 自动出现分页器
- 如果 autoPage 为 false，则进行自动换列

交互

图例是允许交互的，在不同的交互状态下会有不同的样式响应，包含：

鼠标悬浮到图例项时的交互
鼠标点击图例时的交互

目前提供了图例项在如下交互状态的样式配置：

'selected'：选中态，表示当前图例项被选中
'unSelected'：非选中状态，表示当前图例项未被选中
'selectedHover'：选中并 hover 状态，表示鼠标悬浮在选中的图例项上
'unSelectedHover'：非选中并 hover 状态，表示鼠标悬浮在选中的图例项上

另外分页器也提供了自己的交互状态样式配置，包含：

鼠标 hover 到按钮时的交互
鼠标点击时的交互

可在 pager.handler.state 上进行配置，详见pager 配置项文档。

连续图例

连续图例分为颜色图例和尺寸图例，其中颜色图例用于表示数据随着颜色的变化而呈现出的连续变化特征，尺寸图例用于表示数据随着尺寸的变化而呈现出的连续变化特征，也可进行数据筛选。

组成

连续图例分为颜色图例和尺寸图例，均由以下部分组成：

图例标题 title：表示图例的名称
滑块轨道 rail：表示数值变化的连续区间
滑块条 track：表示当前选择的数值范围
起始、结束文本 handlerText：表示连续区间的最小值和最大值

自定义图例

VChart 的图例组件提供了丰富的配置项，可以满足各种数据可视化需求，同时也提供了相关的 API 接口，当默认的图例无法满足业务需求时，可以通过图例配置项以及相关的 api 接口来进行图例的自定义。

UI 自定义

当图例整体的展示样式不满足需求时，可以通过 visible 属性关闭图例的展示，然后通过提供的相关图例的 API（vchart.getLegendSelectedDataByIndex() 获取图例项数据，vchart.setLegendSelectedDataByIndex() 设置图例项的选中数据）实现自定义图例的展示及交互。

自定义图例交互

离散图例默认提供了数据筛选的交互。如果需要自定义选中交互，可以先关闭 legend 的 select 配置。然后通过 legendItemHover 和 legendItemUnHover 事件以及状态更新 API 来实现。

自定义图例项数据

在离散图例中，当图例项的数据不符合要求时，可以通过 data 配置来自定义图例项的数据。

更多 legend 的示例请参考图例。