配置图例有两种方式

第一种，传入 boolean 设置是否显示图例。

chart.legend(false); // 关闭图例

第二种，传入 legendOption 对图例进行整体配置。

(field: legendOption) => View;

chart.legend({
  position: 'right',
});

第三种，对 field 字段对应的图例进行配置。

(field: string, legendOption) => View;

// 关闭某个图例，通过数据字段名进行关联
view.legend('city', false);

// 对特定的图例进行配置
view.legend('city', {
  position: 'right',
});

legendOption 配置如下：

legendOption.layout

布局方式： horizontal，vertical

legendOption.position

图例的位置。

legendOption.background

背景框配置项。LegendBackgroundCfg 配置如下：

legendOption.flipPage

legendOption.maxRow

legendOption.pageNavigator

示例：

pageNavigator: {
  marker: {
    style: {
      // 非激活，不可点击态时的填充色设置
      inactiveFill: '#000',
      inactiveOpacity: 0.45,
      // 默认填充色设置
      fill: '#000',
      opacity: 0.8,
      size: 12,
    },
  },
  text: {
    style: {
      fill: '#ccc',
      fontSize: 8,
    },
  },
},

legendOption.selected ✨ 🆕

图例高亮状态，false 表示默认置灰，默认不设置 或 true 表示高亮，会同步进行数据的筛选展示。

示例：

chart.legend('type', {
  selected: {
    分类一: true,
    分类二: false,
    分类三: false,
  },
});

legendOption.handler

legendOption.itemHeight

legendOption.itemWidth

legendOption.itemName

其中, ShapeAttrs 详细配置见：文档；ListItem 配置如下：

type ListItem = {
  /**
   * 名称 {string}
   */
  name: string;
  /**
   * 值 {any}
   */
  value: any;
  /**
   * 图形标记 {object|string}
   */
  marker?: Marker | string;
}

type Marker = {
  symbol? string;
  style?: ShapeAttrs;
  spacing?: number;
};

legendOption.itemSpacing

legendOption.itemValue

其中, ShapeAttrs 详细配置见：文档；ListItem 配置如下：

type ListItem = {
  /**
   * 名称 {string}
   */
  name: string;
  /**
   * 值 {any}
   */
  value: any;
  /**
   * 图形标记 {object|string}
   */
  marker?: Marker | string;
}

type Marker = {
  symbol? string;
  style?: ShapeAttrs;
  spacing?: number;
};

legendOption.radio

LegendRadio 配置如下：

legendOption.animate

是否开启动画开关。

legendOption.animateOption

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置详情如下：

ComponentAnimateOption 为组件各个动画类型配置。其中 easing 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 registerAnimation 自定义动画函数。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。

legendOption.label

legendOption.marker

MarkerCfg  配置

marker.symbol

内置一些 symbol 类型，可以指定具体的标记类型，也可以通过回调的方式返回 symbol 绘制的 path 命令

内置支持的标记类型有："circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"

回调的方式为：(x: number, y: number, r: number) => PathCommand；

type LegendItem = { name: string; value: string; } & MarkerCfg;

type MarkerCfgCallback = (name: string, index: number, item: LegendItem) => MarkerCfg;

legendOption.min

legendOption.max

legendOption.maxItemWidth

legendOption.maxWidthRatio

legendOption.maxHeightRatio

legendOption.maxWidth

const viewBBox = this.view.viewBBox;
const maxWidth = Math.min(maxWidth, maxWidthRatio * viewBBox.width);

legendOption.maxHeight

const viewBBox = this.view.viewBBox;
const maxHeight = Math.min(maxHeight, maxHeightRatio * viewBBox.height);

legendOption.offsetX

图例 x 方向的偏移。

legendOption.offsetY

图例 y 方向的偏移。

legendOption.rail

legendOption.reversed

legendOption.slidable

legendOption.title

图例标题配置，默认不展示。G2LegendTitleCfg 配置如下：

legendOption.track

legendOption.values

legendOption.custom

是否为自定义图例，当该属性为 true 时，需要声明 items 属性。

legendOption.items

MarkerCfg  配置

marker.symbol

内置一些 symbol 类型，可以指定具体的标记类型，也可以通过回调的方式返回 symbol 绘制的 path 命令

内置支持的标记类型有："circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"

回调的方式为：(x: number, y: number, r: number) => PathCommand；