图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选

引入

  1. import { Category, Continuous } from '@antv/gui';

基本配置

属性名 类型 描述 默认值
padding number | number [] 内边距 10
orient 'horizontal' | 'vertical' 横向、纵向模式 'horizontal'
backgroundStyle MixAttrs 图例背景样式 []
title TitleCfg 图例标题配置 []
type 'category' | 'continuous' 高度 []

连续图例 (todo 待梳理)

属性名 类型 描述 默认值
min number 最小值 []
max number 最大值 []
start number 开始区间 min
end number 结束区间 max
color string | string[] 颜色 []
label false | LabelCfg 标签 []
rail RailCfg 色板 []
slidable boolean 是否可滑动 true
step number 步长 (max-min)*1%
handle false | HandleCfg 手柄配置 []
indicator false | indicatorCfg 指示器配置 []

分类图例

属性名 类型 描述
通用配置
maxWidth number 最大宽度
maxHeight number 最大高度
分类图例
items CategoryItemValue[] 图例项
itemWidth number 图例项宽度
maxItemWidth number 最大图例项宽度
spacing [number,number] 图例项横向、纵向间隔
itemPadding [number,number] 图例项内边距
itemMarker ItemMarkerCfg | ((item, index, items) => ItemMarkerCfg) 图例项图标
itemName ItemNameCfg | ((item, index, items) => ItemNameCfg) 图例项名
itemValue ItemValueCfg | ((item, index, items) => ItemValueCfg) 图例项值
itemBackgroundStyle MixAttrs | ((item, index, items) => MixAttrs) 图例项背景
reverse boolean 图例项倒序
autoWrap boolean 自动换行、列
maxRows number 最大列数
cols number 自动换行、列数
maxCols ~~number~~ 最大行数
pageNavigator false | PageNavigatorCfg 分页器

TitleCfg

属性名 类型 描述
content string 标题
spacing number 标题与图例元素间距
align 'left' | 'center' | 'right' 标题对齐方式
style TextProps 标题样式
formatter (text:string)=>string 标题格式化

LabelCfg

属性名 类型 描述
style TextProps 标签样式
spacing number 标签与图例间距
formatter (value: number, idx: number)=>string 标签文本格式化
align 'rail' | 'inside' | 'outside' 标签对齐方式

RailCfg

属性名 类型 描述 默认值
width number 色板宽度 []
height number 色板高度 []
type 'color' | 'size' 色板类型 color
chunked boolean 是否分块 false
ticks number[] 分块分割点（label 显示的值） []
isGradient boolean | 'auto' 是否使用渐变色 auto
backgroundColor string 色板背景色 []

HandleCfg

属性名 类型 描述 默认值
size number 手柄大小 4
text Object 手柄文本 {formatter: (value:number)=>string, style: TextProps, align: 'rail' \\| 'inside' \\| 'outside' }
icon Object 手柄图标 {marker: MarkerCfg}
spacing number 手柄文本到手柄图标的间距 10

IndicatorCfg

属性名 类型 描述 默认值
size number 指示器大小 8
spacing number 指示器文本到色板间距 5
padding number | number[] 指示器文本内边距 5
backgroundStyle RectProps 指示器背景样式 []
text Object 指示器文本样式 {style: TextProps, formatter:(value: number)=>string}

CategoryItemValue

属性名 类型 描述 默认值
state string(‘default’, ‘active’, ‘selected’… 对应 style 中的状态样式） 图例项状态 default
name string 图例项名 ``
value string 图例项值 ``
id string 图例项 ID name-index

ItemMarkerCfg

属性名 类型 描述 默认值
symbol string | ((x: number,y: number,r: number) =>string) 图标 {}
size number 图标大小 8
style object 图例样式 {}
  • 示例
    1. {
    2.  itemMarker: {
    3.     symbol: 'circle',
    4.     size: 6,
    5.     style: {
    6.        fill: 'pink',
    7.        // 激活样式 （也可以是 selected, unselected, inactive 等其它自定义状态）
    8.        active: {
    9.           fill: 'red',
    10.           cursor: 'pointer'
    11.        }，
    12.     }
    13.  }
    14. }

    ItemNameCfg

    | 属性名 | 类型 | 描述 | 默认值 | | —- | —- | —- | —- | | spacing | number | 图例名与图标的间距 | 10 | | formatter | ((item: any, index: number, items: any[])=>string) | 图例名格式化 |
    | | style | object | 图例名样式 | {} |

ItemValueCfg

属性名 类型 描述 默认值
spacing number 图例值与图例名 10
formatter ((item: any, index: number, items: any[])=>string) 图例名格式化
align ~~'left' | 'right'~~ 图例值对齐方式 ~~left~~
style object 图例值样式 {}

PageNavigatorCfg

属性名 类型 描述 默认值

<br />
``

事件交互

图例项

  • 设置状态 ```typescript const categoryItem = category.querySelector(‘.legend-item’);

categoryItem.setState(‘active’); // 对应样式设置为: style.active: {...}

  2. <a name="Az9o9"></a>
  3. #### 用法
  4. ```typescript
  5. category.addEventListener('pointermove', (evt) => {
  6.   const legendItem = evt.composedPath().find((d) => d.className === 'legend-item');
  7.   if (!legendItem) return;
  8.   legendItem.setState('active');
  9. });
  10. category.addEventListener('pointerout', (evt) => {
  11.   const legendItem = evt.composedPath().find((d) => d.className === 'legend-item');
  12.   if (!legendItem) return;
  13.   legendItem.setState('default');
  14. });