Apache ECharts 中的图例系统提供了一种显示和交互数据可视化图例的方式。它允许用户识别不同的数据系列、切换系列的可见性，并自定义图例项的外观。
图例系统由两个主要组件组成：数据模型（LegendModel）和视图组件（LegendView）。这些组件协同工作以渲染和管理图例项，处理用户交互，并与图表系列进行通信。
来源
LegendModel 继承自 ComponentModel，负责：
关键方法
select/unSelect/toggleSelected：管理项选择状态isSelected：检查项是否当前被选中allSelect/inverseSelect：选择工具方法_updateData：处理和准备来自系列图例数据来源
LegendView 继承自 ComponentView，负责：
重要方法
render：渲染图例的主入口renderInner：根据模型数据创建图例项layoutInner：根据方向和位置计算并应用布局_createItem：创建具有正确样式的单个图例项来源
下图说明了数据和交互如何流经图例系统
来源
图例项由符号/图标和文本标签组成。两者的外观都高度可定制。
系列可以通过 getLegendIcon 方法定义自定义图例图标
来源
图例系统提供广泛的配置选项
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
show | 布尔值 | true | 是否显示图例 |
orient | 字符串 | 'horizontal' | 方向：'horizontal'（水平）或 'vertical'（垂直） |
align | 字符串 | 'auto' | 对齐方式：'auto'、'left'（左）、'right'（右） |
data | 数组 | [] | 图例项数据（默认使用系列名称） |
selectedMode | 布尔值/字符串 | true | 选择模式：true、false、'single'（单选）、'multiple'（多选） |
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
left | string/number | 'center' | 距左侧的位置 |
top | string/number | 0 | 距顶部的位置 |
right | string/number | - | 距右侧的位置 |
底部 | string/number | - | 距底部的位置 |
width | string/number | - | 图例区域的宽度 |
height | string/number | - | 图例区域的高度 |
padding | number/Array | 5 | 图例区域的内边距 |
itemGap | 数字 | 10 | 图例项之间的间距 |
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
itemStyle | 对象 | - | 图例符号的样式 |
lineStyle | 对象 | - | 图例线条的样式 |
textStyle | 对象 | - | 图例标签的文本样式 |
inactiveColor | 字符串 | '#ccc' | 图例项非激活时的颜色 |
symbolRotate | number/string | 'inherit' | 图例符号的旋转 |
来源
图例可以包含选择器按钮，用于全选或反选当前选择
来源
系列可以通过 getLegendIcon 方法定义自定义图例图标
来源
图表系列以几种方式与图例系统集成：
来源
来源
创建图例项时，会发生以下过程：
来源
当用户与图例项交互时，可能会分发以下几个事件：
legendToggleSelect：切换系列可见性highlight：高亮相关系列元素downplay：取消系列元素的高亮来源