@antv/g2

  • Version 4.2.10
  • Published
  • 13 MB
  • 15 dependencies
  • MIT license

Install

npm i @antv/g2
yarn add @antv/g2
pnpm add @antv/g2

Overview

the Grammar of Graphics in Javascript

Index

Variables

Functions

Classes

Interfaces

Enums

Namespaces

Variables

variable Util

const Util: {
getLegendItems: typeof getLegendItems;
translate: typeof translate;
rotate: typeof rotate;
zoom: typeof zoom;
transform: (m: number[], actions: any[][]) => number[];
getAngle: typeof getAngle;
getSectorPath: typeof getSectorPath;
polarToCartesian: typeof polarToCartesian;
getDelegationObject: typeof getDelegationObject;
getTooltipItems: typeof getTooltipItems;
getMappingValue: typeof getMappingValue;
getPath: typeof getPath;
getPathPoints: typeof getPathPoints;
};

    variable VERSION

    const VERSION: string;

      Functions

      function getActionClass

      getActionClass: (actionName: string) => ActionConstructor;
      • 根据 action 的 name 获取定义的类

        Parameter actionName

        action 的 name

      function getAnimation

      getAnimation: (type: string) => Animation;
      • 根据名称获取对应的动画执行函数

        Parameter type

        动画函数名称

      function getEngine

      getEngine: (name: string) => IG;
      • 通过名字获取渲染 engine

        Parameter name

        渲染引擎名字

        Returns

        G engine

      function getFacet

      getFacet: (type: string) => FacetCtor;
      • 根据 type 获取 facet 类

        Parameter type

        分面类型

      function getGeometryLabel

      getGeometryLabel: (type: string) => GeometryLabelConstructor;
      • 获取 type 对应的 [[GeometryLabel]] 类

        Parameter type

        Returns

      function getGeometryLabelLayout

      getGeometryLabelLayout: (type: string) => GeometryLabelsLayoutFn;
      • 获取 type 对应的 [[GeometryLabelsLayoutFn]] label 布局函数

        Parameter type

        布局函数名称

        Returns

      function getInteraction

      getInteraction: (name: string) => InteractionSteps | InteractionConstructor;
      • 根据交互行为名字获取对应的交互类

        Parameter name

        交互名字

        Returns

        交互类

      function getShapeFactory

      getShapeFactory: (factoryName: string) => ShapeFactory;
      • 获取 factoryName 对应的 shapeFactory

        Parameter factoryName

        Returns

        shape factory

      function getTheme

      getTheme: (theme?: string) => LooseObject;
      • 获取主题配置信息。

        Parameter theme

        主题名

      function registerAction

      registerAction: (
      actionName: string,
      ActionClass: ActionConstructor,
      cfg?: LooseObject
      ) => void;
      • 注册 Action

        Parameter actionName

        action 的名称

        Parameter ActionClass

        继承自 action 的类

      function registerAnimation

      registerAnimation: (type: string, animation: Animation) => void;
      • 注册动画执行函数

        Parameter type

        动画执行函数名称

        Parameter animation

        动画执行函数

      function registerComponentController

      registerComponentController: (name: string, plugin: ControllerCtor) => void;
      • 全局注册组件。

        Parameter name

        组件名称

        Parameter plugin

        注册的组件类

        Returns

        void

      function registerEngine

      registerEngine: (name: string, engine: IG) => void;
      • 注册渲染引擎

        Parameter name

        Parameter engine

      function registerFacet

      registerFacet: (type: string, ctor: FacetCtor) => void;
      • 注册一个 Facet 类

        Parameter type

        分面类型

        Parameter ctor

        分面类

      function registerGeometry

      registerGeometry: (name: string, Ctor: any) => void;
      • 注册 geometry 组件

        Parameter name

        Parameter Ctor

        Returns

        Geometry

      function registerGeometryLabel

      registerGeometryLabel: (type: string, ctor: GeometryLabelConstructor) => void;
      • 注册定义的 GeometryLabel 类

        Parameter type

        GeometryLabel 类型名称

        Parameter ctor

        GeometryLabel 类

      function registerGeometryLabelLayout

      registerGeometryLabelLayout: (
      type: string,
      layoutFn: GeometryLabelsLayoutFn
      ) => void;
      • 注册定义的 label 布局函数

        Parameter type

        label 布局函数名称

        Parameter layoutFn

        label 布局函数

      function registerInteraction

      registerInteraction: (
      name: string,
      interaction: InteractionSteps | InteractionConstructor
      ) => void;
      • 注册交互行为

        Parameter name

        交互行为名字

        Parameter interaction

        交互类

      function registerShape

      registerShape: (
      factoryName: string,
      shapeType: string,
      cfg: RegisterShape
      ) => Shape;
      • 注册 Shape。

        Parameter factoryName

        对应的 ShapeFactory 名称。

        Parameter shapeType

        注册的 shape 名称。

        Parameter cfg

        注册 Shape 需要覆写定义的属性。

        Returns

        shape 返回注册的 shape 对象。

      function registerShapeFactory

      registerShapeFactory: (
      factoryName: string,
      cfg: RegisterShapeFactory
      ) => ShapeFactory;
      • 注册 ShapeFactory。

        Parameter factoryName

        ShapeFactory 名称,对应 Geometry 几何标记名称。

        Parameter cfg

        注册 ShapeFactory 需要覆写定义的属性。

        Returns

        返回 ShapeFactory 对象。

      function registerTheme

      registerTheme: (theme: string, value: LooseObject) => void;
      • 注册新的主题配置信息。

        Parameter theme

        主题名。

        Parameter value

        具体的主题配置。

      Classes

      class Action

      abstract class Action<T = LooseObject> implements IAction {}
      • Action 的基类

      constructor

      constructor(context: IInteractionContext, cfg?: {});

        property cfg

        protected cfg: {};
        • Action 配置

        property cfgFields

        protected cfgFields: string[];
        • 配置项的字段,自动负值到 this 上

        property context

        context: IInteractionContext;
        • 上下文对象

        property name

        name: any;
        • Action 名字

        method applyCfg

        protected applyCfg: (cfg: any) => void;
        • 设置配置项传入的值

          Parameter cfg

        method destroy

        destroy: () => void;
        • Destroys action

        method init

        init: () => void;
        • Inits action,提供给子类用于继承

        class Chart

        class Chart extends View {}
        • Chart 类,是使用 G2 进行绘图的入口。

        constructor

        constructor(props: ChartCfg);

          property autoFit

          autoFit: boolean;
          • 是否自适应 DOM 容器宽高,默认为 false,需要用户手动指定宽高

          property ele

          ele: HTMLElement;
          • Chart 的 DOM 容器

          property height

          height: number;
          • 图表高度

          property localRefresh

          localRefresh: boolean;
          • 是否开启局部刷新

          property renderer

          renderer: 'canvas' | 'svg';
          • 图表渲染引擎

          property width

          width: number;
          • 图表宽度

          method aria

          aria: (ariaOption: AriaOption) => void;
          • 设置 WAI-ARIA 无障碍标签。如何根据图形语法自动生成 arial 内容?

            Parameter ariaOption

          method changeSize

          changeSize: (width: number, height: number) => this;
          • 改变图表大小,同时重新渲染。

            Parameter width

            图表宽度

            Parameter height

            图表高度

            Returns

          method changeVisible

          changeVisible: (visible: boolean) => this;
          • 显示或隐藏图表

            Parameter visible

            是否可见,true 表示显示,false 表示隐藏

            Returns

          method clear

          clear: () => void;
          • 清空图表,同时清除掉 aria 配置

          method destroy

          destroy: () => void;
          • 销毁图表,同时解绑事件,销毁创建的 G.Canvas 实例。

            Returns

            void

          method forceFit

          forceFit: () => void;
          • 自动根据容器大小 resize 画布

          class ComponentController

          abstract class Controller<O = unknown> {}
          • Component Controller 规范需要定义的基类 1. 规范的 option 输入 2. 统一的信息获取 API 3. 明确定义的组件事件(名称、数据)

          constructor

          constructor(view: View);

            property components

            protected components: ComponentOption[];
            • 所有的 component

            property name

            readonly name: string;

              property option

              protected option: {};
              • option 配置,不同组件有自己不同的配置结构

              property view

              protected view: View;

                property visible

                visible: boolean;
                • 是否可见

                method changeVisible

                changeVisible: (visible: boolean) => void;
                • change visibility of component

                  Parameter visible

                method clear

                clear: (includeOption?: boolean) => void;
                • clear

                  Parameter includeOption

                  是否清空 option 配置项(used in annotation)

                method destroy

                destroy: () => void;
                • destroy the component

                method getComponents

                getComponents: () => ComponentOption[];
                • get all components

                  Returns

                  components array

                method init

                abstract init: () => any;
                • init the component

                method layout

                abstract layout: () => any;
                • do layout

                method render

                abstract render: () => any;
                • render the components

                method update

                abstract update: () => any;
                • 组件的更新逻辑 - 根据字段为标识,为每一个组件生成一个 id,放到 option 中 - 更新的时候按照 id 去做 diff,然后对同的做处理 - 创建增加的 - 更新已有的 - 销毁删除的

                class Element

                class Element extends Base {}
                • Element 图形元素。 定义:在 G2 中,我们会将数据通过图形语法映射成不同的图形,比如点图,数据集中的每条数据会对应一个点,柱状图每条数据对应一个柱子,线图则是一组数据对应一条折线,Element 即一条/一组数据对应的图形元素,它代表一条数据或者一个数据集,在图形层面,它可以是单个 Shape 也可以是多个 Shape,我们称之为图形元素。

                constructor

                constructor(cfg: ElementCfg);

                  property animate

                  animate: boolean | AnimateOption;
                  • shape 的动画配置

                  property container

                  container: IGroup;
                  • shape 容器

                  property elementIndex

                  elementIndex: number;
                  • element 索引

                  property geometry

                  geometry: Geometry<ShapePoint>;
                  • element 对应的 Geometry 实例

                  property labelShape

                  labelShape: IGroup[];
                  • 保存 shape 对应的 label

                  property shape

                  shape: any;
                  • 最后创建的图形对象

                  property shapeFactory

                  shapeFactory: ShapeFactory;
                  • 用于创建各种 shape 的工厂对象

                  method changeVisible

                  changeVisible: (visible: boolean) => void;
                  • 显示或者隐藏 element。

                    Parameter visible

                    是否可见。

                  method clearStates

                  clearStates: () => void;
                  • 清空状量态,恢复至初始状态。

                  method destroy

                  destroy: () => void;
                  • 销毁 element 实例。

                  method draw

                  draw: (model: ShapeInfo, isUpdate?: boolean) => void;
                  • 绘制图形。

                    Parameter model

                    绘制数据。

                    Parameter isUpdate

                    可选,是否是更新发生后的绘制。

                  method getBBox

                  getBBox: () => BBox;
                  • 返回 Element 元素整体的 bbox,包含文本及文本连线(有的话)。

                    Returns

                    整体包围盒。

                  method getData

                  getData: () => Datum;
                  • 获取 Element 对应的原始数据。

                    Returns

                    原始数据。

                  method getModel

                  getModel: () => ShapeInfo;
                  • 获取 Element 对应的图形绘制数据。

                    Returns

                    图形绘制数据。

                  method getStates

                  getStates: () => string[];
                  • 获取当前 Element 上所有的状态。

                    Returns

                    当前 Element 上所有的状态数组。

                  method hasState

                  hasState: (stateName: string) => boolean;
                  • 查询当前 Element 上是否已设置 stateName 对应的状态。

                    Parameter stateName

                    状态名称。

                    Returns

                    true 表示存在,false 表示不存在。

                  method setState

                  setState: (stateName: string, stateStatus: boolean) => void;
                  • 设置 Element 的状态。

                    目前 Element 开放三种状态: 1. active 2. selected 3. inactive

                    这三种状态相互独立,可以进行叠加。

                    这三种状态的样式可在 [[Theme]] 主题中或者通过 geometry.state() 接口进行配置。

                    // 激活 active 状态
                    setState('active', true);

                    Parameter stateName

                    状态名

                    Parameter stateStatus

                    是否开启状态

                  method update

                  update: (model: ShapeInfo) => void;
                  • 更新图形。

                    Parameter model

                    更新的绘制数据。

                  class Event

                  class Event {}
                  • Whether it can(or necessary to) keep consistent with the structure of G.Event or directly use the structure of G.Event G2 事件的事件包装类,基于 G.Event

                  constructor

                  constructor(view: View, gEvent: GEvent, data?: Datum);

                    property clientX

                    readonly clientX: number;
                    • x 窗口坐标

                    property clientY

                    readonly clientY: number;
                    • y 窗口坐标

                    property data

                    data?: Datum;
                    • 原始数据

                    property event

                    readonly event: any;
                    • 获取对应的 dom 原生时间

                    property gEvent

                    gEvent: GEvent;
                    • 被包装的原生 G 事件

                    property target

                    readonly target: IShape;
                    • the real trigger shape of the event

                    property type

                    type: string;
                    • 事件类型

                    property view

                    view: View;
                    • 当前 target 归属的 view 实例

                    property x

                    readonly x: number;
                    • x 画布坐标

                    property y

                    readonly y: number;
                    • y 画布坐标

                    method clone

                    clone: () => Event;
                    • clone a new event with same attributes

                      Returns

                      [[Event]]

                    method fromData

                    static fromData: (view: View, type: string, data: Datum) => Event;
                    • 非交互产生的事件

                      Parameter view

                      Parameter type

                      Parameter data

                    method toString

                    toString: () => string;
                    • event string

                      Returns

                      string

                    class Facet

                    abstract class Facet<
                    C extends FacetCfg<FacetData> = FacetCfg<FacetData>,
                    F extends FacetData = FacetData
                    > {}
                    • facet 基类 - 定义生命周期,方便自定义 facet - 提供基础的生命流程方法

                      生命周期:

                      初始化 init 1. 初始化容器 2. 数据分面,生成分面布局信息

                      渲染阶段 render 1. view 创建 2. title 3. axis

                      清除阶段 clear 1. 清除 view

                      销毁阶段 destroy 1. clear 2. 清除事件 3. 清除 group

                    constructor

                    constructor(view: View, cfg: FacetCfg<FacetData>);

                      property cfg

                      protected cfg: FacetCfg<FacetData>;
                      • 分面的配置项

                      property container

                      container: IGroup;
                      • 分面容器

                      property destroyed

                      destroyed: boolean;
                      • 是否销毁

                      property facets

                      protected facets: F[];
                      • 分面之后的所有分面数据结构

                      property view

                      view: View;
                      • 分面所在的 view

                      method afterEachView

                      protected abstract afterEachView: (view: View, facet: F) => any;
                      • 处理 eachView 之后

                        Parameter view

                        Parameter facet

                        Modifiers

                        • @override

                      method beforeEachView

                      protected abstract beforeEachView: (view: View, facet: F) => any;
                      • 开始处理 eachView

                        Parameter view

                        Parameter facet

                        Modifiers

                        • @override

                      method clear

                      clear: () => void;
                      • 清空,clear 之后如果还需要使用,需要重新调用 init 初始化过程 一般在数据有变更的时候调用,重新进行数据的分面逻辑

                      method destroy

                      destroy: () => void;
                      • 销毁

                      method facetToView

                      protected facetToView: (facet: F) => View;
                      • 根据 facet 生成 view,可以给上层自定义使用

                        Parameter facet

                      method generateFacets

                      protected abstract generateFacets: (data: Datum[]) => F[];
                      • 生成分面数据,包含布局

                        Parameter data

                        Modifiers

                        • @override

                      method getDefaultCfg

                      protected getDefaultCfg: () => {
                      eachView: any;
                      showTitle: boolean;
                      spacing: number[];
                      padding: number;
                      fields: any[];
                      };

                        method getDefaultTitleCfg

                        protected getDefaultTitleCfg: () => {
                        style: { fontSize: number; fill: string; fontFamily: any };
                        };
                        • 默认的 title 样式,因为有的分面是 title,有的分面配置是 columnTitle、rowTitle

                        method getFacetDataFilter

                        protected getFacetDataFilter: (conditions: Condition[]) => FacetDataFilter;
                        • 获取分面数据

                          Parameter conditions

                        method getFieldValues

                        protected getFieldValues: (data: Datum[], field: string) => string[];
                        • 获取这个字段对应的所有值,数组

                          Parameter data

                          数据

                          Parameter field

                          字段名 字段对应的值

                        method getRegion

                        protected getRegion: (
                        rows: number,
                        cols: number,
                        xIndex: number,
                        yIndex: number
                        ) => Region;
                        • 获得每个分面的 region,平分区域

                          Parameter rows

                          row 总数

                          Parameter cols

                          col 总数

                          Parameter xIndex

                          x 方向 index

                          Parameter yIndex

                          y 方向 index

                        method getXAxisOption

                        protected abstract getXAxisOption: (
                        x: string,
                        axes: any,
                        option: AxisCfg,
                        facet: F
                        ) => object;
                        • 获取 x 轴的配置

                          Parameter x

                          Parameter axes

                          Parameter option

                          Parameter facet

                        method getYAxisOption

                        protected abstract getYAxisOption: (
                        y: string,
                        axes: any,
                        option: AxisCfg,
                        facet: F
                        ) => object;
                        • 获取 y 轴的配置

                          Parameter y

                          Parameter axes

                          Parameter option

                          Parameter facet

                        method init

                        init: () => void;
                        • 初始化过程

                        method processAxis

                        protected processAxis: (view: View, facet: F) => void;
                        • 处理 axis 的默认配置

                          Parameter view

                          Parameter facet

                        method render

                        render: () => void;
                        • 渲染分面,由上层 view 调用。包括: - 分面 view - 轴 - title

                          子类可以复写,添加一些其他组件,比如滚动条等

                        method update

                        update: () => void;
                        • 更新 facet

                        class Geometry

                        class Geometry<S extends ShapePoint = ShapePoint> extends Base {}
                        • Geometry 几何标记基类,主要负责数据到图形属性的映射以及绘制逻辑。

                        constructor

                        constructor(cfg: GeometryCfg);
                        • 创建 Geometry 实例。

                          Parameter cfg

                        property adjustOption

                        protected adjustOption: AdjustOption[];
                        • adjust 配置项

                        property animateOption

                        animateOption: boolean | AnimateOption;
                        • animate 配置项

                        property attributeOption

                        protected attributeOption: Record<string, AttributeOption>;
                        • 图形属性映射配置

                        property attributes

                        attributes: Record<string, Attribute>;
                        • Attribute map

                        property beforeMappingData

                        protected beforeMappingData: Data[];
                        • 存储发生图形属性映射前的数据

                        property canvasRegion

                        canvasRegion: BBox;
                        • 画布区域,用于 label 布局。

                        property columnWidthRatio

                        protected columnWidthRatio: number;
                        • 一般柱状图宽度占比

                        property container

                        readonly container: IGroup;
                        • 图形绘制容器。

                        property coordinate

                        coordinate: Coordinate;
                        • Coordinate 坐标系实例。

                        property customOption

                        protected customOption: any;
                        • custom 自定义的配置项

                        property data

                        data: Data;
                        • 用户绘制数据。

                        property dataArray

                        dataArray: MappingDatum[][];
                        • 存储处理后的数据, + init() 及 updateData() 逻辑后, 结构为 Data[]; + paint() 逻辑后,结构为 MappingDatum[][]。

                        property defaultSize

                        protected defaultSize: number;
                        • 存储每个 shape 的默认 size,用于 Interval、Schema 几何标记

                        property dodgePadding

                        protected dodgePadding: number;
                        • 组内间距

                        property elements

                        elements: Element[];
                        • Element map

                        property elementsMap

                        elementsMap: Record<string, Element>;
                        • 使用 key-value 结构存储 Element,key 为每个 Element 实例对应的唯一 ID

                        property generatePoints

                        protected generatePoints: boolean;
                        • 是否生成多个点来绘制图形。

                        property intervalPadding

                        protected intervalPadding: number;
                        • 组间距

                        property isCoordinateChanged

                        protected isCoordinateChanged: boolean;

                          property labelOption

                          labelOption: false | LabelOption;
                          • 存储 label 配置信息。

                          property labelsContainer

                          readonly labelsContainer: IGroup;
                          • label 绘制容器。

                          property lastElementsMap

                          protected lastElementsMap: Record<string, Element>;
                          • 存储上一次渲染时的 element 映射表,用于更新逻辑

                          property maxColumnWidth

                          protected maxColumnWidth: number;
                          • 柱状图最大宽度

                          property minColumnWidth

                          protected minColumnWidth: number;
                          • 柱状图最小宽度

                          property multiplePieWidthRatio

                          protected multiplePieWidthRatio: number;
                          • 多层饼图/环图占比

                          property roseWidthRatio

                          protected roseWidthRatio: number;
                          • 玫瑰图占比

                          property scaleDefs

                          scaleDefs: Record<string, ScaleOption>;
                          • scale 定义,需要外部传入。

                          property scales

                          scales: Record<string, Scale>;
                          • 存储 geometry 需要的 scales,需要外部传入。

                          property shapeFactory

                          protected shapeFactory: ShapeFactory;
                          • 每个 Geometry 对应的 Shape 工厂实例,用于创建各个 Shape

                          property shapeType

                          readonly shapeType: string;
                          • ShapeFactory 对应的类型。

                          property sortable

                          sortable: boolean;
                          • 是否对数据进行排序,默认为 false。

                          property sortZIndex

                          sortZIndex?: boolean;
                          • 是否需要对 zIndex 进行 sort。因为耗时长,由具体场景自行决定

                          property stateOption

                          stateOption: StateOption;
                          • 状态量相关的配置项

                          property styleOption

                          protected styleOption: StyleOption;
                          • style 配置项

                          property theme

                          theme: LooseObject;
                          • 当前 Geometry 实例主题。

                          property tooltipOption

                          tooltipOption: boolean | GeometryTooltipOption;
                          • 存储 tooltip 配置信息。

                          property type

                          readonly type: string;
                          • Geometry 几何标记类型。

                          property useDeferredLabel

                          protected useDeferredLabel?: number;

                            property zIndexReversed

                            zIndexReversed?: boolean;
                            • elements 的 zIndex 默认按顺序提升,通过 zIndexReversed 可以反序,从而数据越前,层级越高

                            method adjust

                            adjust: (
                            adjustCfg: string | string[] | AdjustOption | AdjustOption[]
                            ) => Geometry;
                            • 设置数据调整方式。G2 目前内置了四种类型: 1. dodge 2. stack 3. symmetric 4. jitter

                              **Tip** + 对于 'dodge' 类型,可以额外进行如下属性的配置:

                              geometry.adjust('dodge', {
                              marginRatio: 0, // 取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距
                              dodgeBy: 'x', // 该属性只对 'dodge' 类型生效,声明以哪个数据字段为分组依据
                              });

                              + 对于 'stack' 类型,可以额外进行如下属性的配置:

                              geometry.adjust('stack', {
                              reverseOrder: false, // 用于控制是否对数据进行反序操作
                              });

                              Parameter adjustCfg

                              数据调整配置

                              Returns

                              Example 1

                              geometry.adjust('stack');
                              geometry.adjust({
                              type: 'stack',
                              reverseOrder: false,
                              });
                              // 组合使用 adjust
                              geometry.adjust([ 'stack', 'dodge' ]);
                              geometry.adjust([
                              { type: 'stack' },
                              { type: 'dodge', dodgeBy: 'x' },
                              ]);

                            method adjustScale

                            protected adjustScale: () => void;
                            • 调整度量范围。主要针对发生层叠以及一些特殊需求的 Geometry,比如 Interval 下的柱状图 Y 轴默认从 0 开始。

                            method animate

                            animate: (cfg: AnimateOption | boolean) => Geometry;
                            • Geometry 动画配置。

                              + animate(false) 关闭动画 + animate(true) 开启动画,默认开启。

                              我们将动画分为四个场景: 1. appear: 图表第一次加载时的入场动画; 2. enter: 图表绘制完成,发生更新后,产生的新图形的进场动画; 3. update: 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画; 4. leave: 图表绘制完成,数据发生变更后,被销毁图形的销毁动画。

                              Parameter cfg

                              动画配置

                              Returns

                              Example 1

                              animate({
                              enter: {
                              duration: 1000, // enter 动画执行时间
                              },
                              leave: false, // 关闭 leave 销毁动画
                              });

                            method changeVisible

                            changeVisible: (visible: boolean) => void;
                            • 显示或者隐藏 geometry。

                              Parameter visible

                            method clear

                            clear: () => void;
                            • 清空当前 Geometry,配置项仍保留,但是内部创建的对象全部清空。

                              Modifiers

                              • @override

                            method color

                            color: {
                            (field: AttributeOption): Geometry;
                            (
                            field: string,
                            cfg?: string | string[] | ColorAttrCallback
                            ): Geometry<ShapePoint>;
                            };
                            • 配置 color 通道映射规则。

                              Parameter field

                              映射规则

                              Returns

                              Example 1

                              // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
                              geometry.color({
                              fields: [ 'x' ],
                              values: [ '#1890ff', '#5AD8A6' ],
                              });

                            • Parameter field

                              参与颜色映射的数据字段,多个字段使用 '*' 连接符进行连接。

                              Parameter cfg

                              Optional, color 映射规则。

                              Returns

                              Example 1

                              // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
                              // 使用 '#1890ff' 颜色渲染图形
                              geometry.color('#1890ff');
                              // 根据 x 字段的数据值进行颜色的映射,这时候 G2 会在内部调用默认的回调函数,读取默认提供的颜色进行数据值到颜色值的映射。
                              geometry.color('x');
                              // 将 'x' 字段的数据值映射至指定的颜色值 colors(可以是字符串也可以是数组),此时用于通常映射分类数据
                              geometry.color('x', [ '#1890ff', '#5AD8A6' ]);
                              // 使用回调函数进行颜色值的自定义;可以使用多个字段使用、*号连接
                              geometry.color('x', (xVal) => {
                              if (xVal === 'a') {
                              return 'red';
                              }
                              return 'blue';
                              });
                              // 指定颜色的渐变路径,用于映射连续的数据
                              geometry.color('x', '#BAE7FF-#1890FF-#0050B3');

                            method createAttrOption

                            protected createAttrOption: (
                            attrName: string,
                            field: AttributeOption | string | number,
                            cfg?: any
                            ) => void;

                              method createElement

                              protected createElement: (
                              mappingDatum: MappingDatum,
                              index: number,
                              isUpdate?: boolean
                              ) => Element;
                              • 创建 Element 实例。

                                Parameter mappingDatum

                                Element 对应的绘制数据

                                Parameter isUpdate

                                是否处于更新阶段

                                Returns

                                element 返回创建的 Element 实例

                              method createShapePointsCfg

                              protected createShapePointsCfg: (obj: Datum) => S;
                              • 获取每个 Shape 对应的关键点数据。

                                Parameter obj

                                经过分组 -> 数字化 -> adjust 调整后的数据记录

                                Returns

                              method customInfo

                              customInfo: (cfg: any) => this;
                              • 用于向 shape 中传入自定义的数据。目前可能仅仅可能用于在自定义 shape 的时候,像自定义 shape 中传入自定义的数据,方便实现自定义 shape 的配置能力。

                                Parameter cfg

                                Example 1

                                chart.interval().customInfo({ yourData: 'hello, g2!' });

                                然后在自定义 shape 的时候,可以拿到这个信息。

                                registerShape('interval', 'your-shape', {
                                draw(shapeInfo, container) {
                                const { customInfo } = shapeInfo;
                                console.log(customInfo); // will log { yourData: 'hello, g2!' }.
                                }
                                });

                              method destroy

                              destroy: () => void;
                              • 销毁 Geometry 实例。

                              method getAdjust

                              getAdjust: (adjustType: string) => Adjust;
                              • 获取对应的 adjust 实例

                                Parameter adjustType

                                Returns

                              method getAttribute

                              getAttribute: (name: string) => Attribute;
                              • 根据名字获取图形属性实例。

                              method getAttributeValues

                              getAttributeValues: (attr: Attribute, obj: Datum) => any[];
                              • 获取该数据发生图形映射后对应的 Attribute 图形空间数据。

                                Parameter attr

                                Attribute 图形属性实例。

                                Parameter obj

                                需要进行映射的原始数据。

                                Returns

                              method getCoordinate

                              getCoordinate: () => Coordinate;
                              • 获得 coordinate 实例

                                Returns

                              method getData

                              getData: () => Data;

                                method getDefaultValue

                                getDefaultValue: (attrName: string) => any;
                                • 获取图形属性默认的映射值。

                                method getDrawCfg

                                protected getDrawCfg: (mappingDatum: MappingDatum) => ShapeInfo;
                                • 获取每条数据对应的图形绘制数据。

                                  Parameter mappingDatum

                                  映射后的数据

                                  Returns

                                  draw cfg

                                method getElementId

                                getElementId: (data: MappingDatum | MappingDatum[]) => any;
                                • 获取数据对应的唯一 id。

                                  Parameter data

                                  Element 对应的绘制数据

                                  Returns

                                method getElements

                                getElements: () => Element[];
                                • 获取 Geometry 的所有 Elements。

                                  getElements();

                                method getElementsBy

                                getElementsBy: (condition: (element: Element) => boolean) => Element[];
                                • 根据一定的规则查找 Geometry 的 Elements。

                                  getElementsBy((element) => {
                                  const data = element.getData();
                                  return data.a === 'a';
                                  });

                                  Parameter condition

                                  定义查找规则的回调函数。

                                  Returns

                                method getFields

                                getFields: () => any[];
                                • 获得所有的字段

                                method getGroupAttributes

                                getGroupAttributes: () => Attribute[];
                                • 获取决定分组的图形属性实例。

                                method getGroupFields

                                getGroupFields: () => string[];
                                • 获取当前配置中的所有分组 & 分类的字段。 fields string[]

                                method getGroupScales

                                getGroupScales: () => Scale[];
                                • 获取决定分组的图形属性对应的 scale 实例。

                                  Returns

                                method getLabelType

                                protected getLabelType: () => string;
                                • 获取渲染的 label 类型。

                                method getOffscreenGroup

                                getOffscreenGroup: () => IGroup;
                                • 获取虚拟 Group。

                                  Returns

                                method getScaleFields

                                getScaleFields: () => string[];
                                • 获取所有需要创建 scale 的字段名称。

                                method getShapeFactory

                                protected getShapeFactory: () => ShapeFactory;
                                • 获取当前 Geometry 对应的 Shape 工厂实例。

                                method getShapeMarker

                                getShapeMarker: (shapeName: string, cfg: ShapeMarkerCfg) => ShapeMarkerAttrs;
                                • 获取 shape 对应的 marker 样式。

                                  Parameter shapeName

                                  shape 具体名字

                                  Parameter cfg

                                  marker 信息

                                  Returns

                                method getShapes

                                getShapes: () => (IShape | IGroup)[];
                                • 获取该 Geometry 下所有生成的 shapes。

                                  Returns

                                  shapes

                                method getXField

                                getXField: () => string;
                                • x 字段

                                  Returns

                                method getXScale

                                getXScale: () => Scale;
                                • 获取 x 轴对应的 scale 实例。

                                method getXYFields

                                getXYFields: () => string[];
                                • 获得图形的 x y 字段。

                                method getYField

                                getYField: () => string;
                                • y 字段

                                  Returns

                                method getYMinValue

                                protected getYMinValue: () => number;
                                • 获取 Y 轴上的最小值。

                                method getYScale

                                getYScale: () => Scale;
                                • 获取 y 轴对应的 scale 实例。

                                method init

                                init: (cfg?: InitCfg) => void;
                                • 初始化 Geomtry 实例: 创建 [[Attribute]] and [[Scale]] 实例,进行数据处理,包括分组、数值化以及数据调整。

                                method initAttributes

                                protected initAttributes: () => void;

                                  method label

                                  label: {
                                  (field: LabelOption | false | string): Geometry;
                                  (
                                  field: string,
                                  secondParam: GeometryLabelCfg | LabelCallback
                                  ): Geometry<ShapePoint>;
                                  (
                                  field: string,
                                  secondParam: LabelCallback,
                                  thirdParam: GeometryLabelCfg
                                  ): Geometry<ShapePoint>;
                                  };
                                  • Geometry label 配置。

                                    Parameter field

                                    Returns

                                    label

                                    Example 1

                                    // data: [ {x: 1, y: 2, z: 'a'}, {x: 2, y: 2, z: 'b'} ]
                                    // 在每个图形上显示 z 字段对应的数值
                                    label({
                                    fields: [ 'z' ]
                                    });
                                    label(false); // 不展示 label
                                    // 在每个图形上显示 x 字段对应的数值,同时配置文本颜色为红色
                                    label('x', {
                                    style: {
                                    fill: 'red',
                                    },
                                    })
                                    // 以 type 类型的 label 渲染每个图形上显示 x 字段对应的数值,同时格式化文本内容
                                    label('x', (xValue) => {
                                    return {
                                    content: xValue + '%',
                                    };
                                    }, {
                                    type: 'base' // 声明 label 类型
                                    })

                                  method paint

                                  paint: (isUpdate?: boolean) => void;
                                  • 将原始数据映射至图形空间,同时创建图形对象。

                                  method position

                                  position: (cfg: string | string[] | AttributeOption) => Geometry;
                                  • 配置 position 通道映射规则。

                                    Parameter cfg

                                    映射规则

                                    Returns

                                    Example 1

                                    // 数据结构: [{ x: 'A', y: 10, color: 'red' }]
                                    geometry.position('x*y');
                                    geometry.position([ 'x', 'y' ]);
                                    geometry.position({
                                    fields: [ 'x', 'y' ],
                                    });

                                  method shape

                                  shape: {
                                  (field: AttributeOption): Geometry;
                                  (field: string, cfg?: string[] | ShapeAttrCallback): Geometry<ShapePoint>;
                                  };
                                  • 配置 shape 通道映射规则。

                                    Parameter field

                                    映射规则配置。

                                    Returns

                                    Example 1

                                    // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
                                    geometry.shape({
                                    fields: [ 'x' ],
                                    });

                                  • Parameter field

                                    参与 shape 映射的数据字段,多个字段使用 '*' 连接符进行连接。

                                    Parameter cfg

                                    Optional, shape 映射规则。

                                    Returns

                                    Example 1

                                    // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
                                    // 指定常量,将所有数据值映射到固定的 shape
                                    geometry.shape('circle');
                                    // 将指定的字段映射到内置的 shapes 数组中
                                    geometry.shape('x');
                                    // 将指定的字段映射到指定的 shapes 数组中
                                    geometry.shape('x', [ 'circle', 'diamond', 'square' ]);
                                    // 使用回调函数获取 shape,用于个性化的 shape 定制,可以根据单个或者多个字段确定
                                    geometry.shape('x', (xVal) => {
                                    if (xVal === 'a') {
                                    return 'circle';
                                    }
                                    return 'diamond';
                                    });

                                  method size

                                  size: {
                                  (field: AttributeOption): Geometry;
                                  (
                                  field: string | number,
                                  cfg?: [number, number] | SizeAttrCallback
                                  ): Geometry<ShapePoint>;
                                  };
                                  • 配置 size 通道映射规则。

                                    Parameter field

                                    映射规则。

                                    Returns

                                    Example 1

                                    // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
                                    geometry.size({
                                    values: [ 10 ],
                                    })

                                  • Parameter field

                                    参与 size 映射的数据字段,多个字段使用 '*' 连接符进行连接。

                                    Parameter cfg

                                    Optional, size 映射规则

                                    Returns

                                    Example 1

                                    // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
                                    // 直接指定像素大小
                                    geometry.size(10);
                                    // 指定映射到 size 的字段,使用内置的默认大小范围为 [1, 10]
                                    geometry.size('x');
                                    // 指定映射到 size 字段外,还提供了 size 的最大值和最小值范围
                                    geometry.size('x', [ 5, 30 ]);
                                    // 使用回调函数映射 size,用于个性化的 size 定制,可以使用多个字段进行映射
                                    geometry.size('x', (xVal) => {
                                    if (xVal === 'a') {
                                    return 10;
                                    }
                                    return 5;
                                    });

                                  method sort

                                  sort: (mappingArray: Data[]) => void;

                                    method state

                                    state: (cfg: StateOption) => this;
                                    • 设置状态对应的样式。

                                      Parameter cfg

                                      状态样式

                                      Example 1

                                      chart.interval().state({
                                      selected: {
                                      animate: { duration: 100, easing: 'easeLinear' },
                                      style: {
                                      lineWidth: 2,
                                      stroke: '#000',
                                      },
                                      },
                                      });

                                      如果图形 shape 是由多个 shape 组成,即为一个 G.Group 对象,那么针对 group 中的每个 shape,我们需要使用下列方式进行状态样式设置: 如果我们为 group 中的每个 shape 设置了 'name' 属性(shape.set('name', 'xx')),则以 'name' 作为 key,否则默认以索引值(即 shape 的 添加顺序)为 key。

                                      chart.interval().shape('groupShape').state({
                                      selected: {
                                      style: {
                                      0: { lineWidth: 2 },
                                      1: { fillOpacity: 1 },
                                      }
                                      }
                                      });

                                    method style

                                    style: {
                                    (field: StyleOption | LooseObject): Geometry;
                                    (field: string, styleFunc: StyleCallback): Geometry<ShapePoint>;
                                    };
                                    • 图形样式配置。

                                      Parameter field

                                      配置样式属性或者样式规则。

                                      Returns

                                      Example 1

                                      // 配置图形样式
                                      style({
                                      lineWidth: 2,
                                      stroke: '#1890ff',
                                      });
                                      // 根据具体的数据进行详细配置
                                      style({
                                      fields: [ 'x', 'y' ], // 数据字段
                                      callback: (xVal, yVal) => {
                                      const style = { lineWidth: 2, stroke: '#1890ff' };
                                      if (xVal === 'a') {
                                      style.lineDash = [ 2, 2 ];
                                      }
                                      return style;
                                      },
                                      });

                                    • Parameter field

                                      数据字段或者样式配置规则。

                                      Parameter styleFunc

                                      Optional, 样式配置回调函数。

                                      Returns

                                      Example 1

                                      style('x*y', (xVal, yVal) => {
                                      const style = { lineWidth: 2, stroke: '#1890ff' };
                                      if (xVal === 'a') {
                                      style.lineDash = [ 2, 2 ];
                                      }
                                      return style;
                                      });

                                    method tooltip

                                    tooltip: {
                                    (field: GeometryTooltipOption | boolean): Geometry;
                                    (field: string, cfg?: TooltipCallback): Geometry<ShapePoint>;
                                    };
                                    • 配置 Geometry 显示的 tooltip 内容。

                                      tooltip(false) 代表关闭 tooltip。 tooltip(true) 代表开启 tooltip。

                                      Geometry 默认允许 tooltip 展示,我们可以使用以下方法对 tooltip 的展示内容进行配置:

                                      Parameter field

                                      tooltip 配置信息。

                                      Returns

                                      Example 1

                                      // data: [{x: 'a', y: 10}]
                                      tooltip({
                                      fields: [ 'x' ],
                                      });

                                      ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*268uQ50if60AAAAAAAAAAABkARQnAQ)

                                      tooltip({
                                      fields: [ 'x', 'y' ],
                                      });

                                      ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*A_ujSa8QhtcAAAAAAAAAAABkARQnAQ)

                                      tooltip() 方法同样支持数据映射及回调用法:

                                      Example 2

                                      chart.tooltip({
                                      itemTpl: '<li>{x}: {y}</li>',
                                      });
                                      chart.line()
                                      .position('x*y')
                                      .tooltip({
                                      fields: [ 'x', 'y' ],
                                      callback: (x, y) => {
                                      return {
                                      x,
                                      y,
                                      };
                                      },
                                      });

                                      其返回的值必须为对象,该值中的属性同 chart.tooltip() 的 itemTpl 模板相对应,返回的变量可用于 itemTpl 的字符串模板。

                                    • Parameter field

                                      参与映射的字段。

                                      Parameter cfg

                                      Optional, 回调函数

                                      Returns

                                      Example 1

                                      // data: [{x: 'a', y: 10}]
                                      // 等同于 tooltip({ fields: [ 'x' ] })
                                      tooltip('x');
                                      // 等同于 tooltip({ fields: [ 'x', 'y' ] })
                                      tooltip('x*y');
                                      // 等同于 tooltip({ fields: [ 'x', 'y' ], callback: (x, y) => { x, y } })
                                      tooltip('x*y', (x, y) => {
                                      return {
                                      x,
                                      y,
                                      };
                                      });

                                    method update

                                    update: (cfg?: InitCfg) => void;
                                    • Geometry 更新。

                                      Parameter cfg

                                      更新的配置

                                    method updateElements

                                    protected updateElements: (
                                    mappingDataArray: MappingDatum[][],
                                    isUpdate?: boolean
                                    ) => void;

                                      class GeometryLabel

                                      class GeometryLabel {}
                                      • Geometry Label 基类,用于生成 Geometry 下所有 label 的配置项信息

                                      constructor

                                      constructor(geometry: Geometry<ShapePoint>);

                                        property defaultLayout

                                        defaultLayout: string;
                                        • 默认的布局

                                        property geometry

                                        readonly geometry: Geometry<ShapePoint>;
                                        • geometry 实例

                                        property labelsRenderer

                                        labelsRenderer: Labels;

                                          method clear

                                          clear: () => void;

                                            method destroy

                                            destroy: () => void;

                                              method getCoordinate

                                              getCoordinate: () => any;

                                                method getDefaultLabelCfg

                                                protected getDefaultLabelCfg: (offset?: number, position?: string) => any;
                                                • 获取 label 的默认配置

                                                method getLabelAlign

                                                protected getLabelAlign: (
                                                item: LabelItem,
                                                index: number,
                                                total: number
                                                ) => TextAlign;
                                                • 获取文本的对齐方式

                                                  Parameter item

                                                  Parameter index

                                                  Parameter total

                                                  Returns

                                                method getLabelId

                                                protected getLabelId: (mappingData: MappingDatum) => any;
                                                • 获取每一个 label 的唯一 id

                                                  Parameter mappingData

                                                  label 对应的图形的绘制数据

                                                method getLabelItems

                                                getLabelItems: (mapppingArray: MappingDatum[]) => LabelItem[];

                                                  method getLabelOffset

                                                  protected getLabelOffset: (offset: number | string) => number;
                                                  • 获取 label offset

                                                  method getLabelOffsetPoint

                                                  protected getLabelOffsetPoint: (
                                                  labelCfg: LabelCfg,
                                                  index: number,
                                                  total: number
                                                  ) => Point;
                                                  • 获取每个 label 的偏移量 (矢量)

                                                    Parameter labelCfg

                                                    Parameter index

                                                    Parameter total

                                                    {Point} offsetPoint

                                                  method getLabelPoint

                                                  protected getLabelPoint: (
                                                  labelCfg: LabelCfg,
                                                  mappingData: MappingDatum,
                                                  index: number
                                                  ) => LabelPointCfg;
                                                  • 获取每个 label 的位置

                                                    Parameter labelCfg

                                                    Parameter mappingData

                                                    Parameter index

                                                    Returns

                                                    label point

                                                  method getThemedLabelCfg

                                                  protected getThemedLabelCfg: (labelCfg: LabelCfg) => any;
                                                  • 获取当前 label 的最终配置

                                                    Parameter labelCfg

                                                  method render

                                                  render: (mappingArray: MappingDatum[], isUpdate?: boolean) => Promise<void>;

                                                    method setLabelPosition

                                                    protected setLabelPosition: (
                                                    labelPointCfg: LabelPointCfg,
                                                    mappingData: MappingDatum,
                                                    index: number,
                                                    position: string
                                                    ) => void;
                                                    • 设置 label 位置

                                                      Parameter labelPointCfg

                                                      Parameter mappingData

                                                      Parameter index

                                                      Parameter position

                                                    class Interaction

                                                    class Interaction {}
                                                    • 交互的基类。

                                                    constructor

                                                    constructor(view: View, cfg: LooseObject);

                                                      property cfg

                                                      protected cfg: LooseObject;
                                                      • 配置项

                                                      property view

                                                      protected view: View;
                                                      • view 或者 chart

                                                      method clearEvents

                                                      protected clearEvents: () => void;
                                                      • 销毁事件

                                                      method destroy

                                                      destroy: () => void;
                                                      • 销毁。

                                                      method init

                                                      init: () => void;
                                                      • 初始化。

                                                      method initEvents

                                                      protected initEvents: () => void;
                                                      • 绑定事件

                                                      class InteractionAction

                                                      abstract class Action<T = LooseObject> implements IAction {}
                                                      • Action 的基类

                                                      constructor

                                                      constructor(context: IInteractionContext, cfg?: {});

                                                        property cfg

                                                        protected cfg: {};
                                                        • Action 配置

                                                        property cfgFields

                                                        protected cfgFields: string[];
                                                        • 配置项的字段,自动负值到 this 上

                                                        property context

                                                        context: IInteractionContext;
                                                        • 上下文对象

                                                        property name

                                                        name: any;
                                                        • Action 名字

                                                        method applyCfg

                                                        protected applyCfg: (cfg: any) => void;
                                                        • 设置配置项传入的值

                                                          Parameter cfg

                                                        method destroy

                                                        destroy: () => void;
                                                        • Destroys action

                                                        method init

                                                        init: () => void;
                                                        • Inits action,提供给子类用于继承

                                                        class TooltipController

                                                        class Tooltip extends Controller<TooltipOption> {}

                                                        property name

                                                        readonly name: string;

                                                          method changeVisible

                                                          changeVisible: (visible: boolean) => void;

                                                            method clear

                                                            clear: () => void;

                                                              method destroy

                                                              destroy: () => void;

                                                                method getTooltipCfg

                                                                getTooltipCfg: () => any;

                                                                  method getTooltipItems

                                                                  getTooltipItems: (point: Point) => any[];

                                                                    method hideTooltip

                                                                    hideTooltip: () => void;

                                                                      method init

                                                                      init: () => void;

                                                                        method isCursorEntered

                                                                        isCursorEntered: (point: Point) => boolean;
                                                                        • 当前鼠标点是在 enter tooltip 中

                                                                          Parameter point

                                                                        method isTooltipLocked

                                                                        isTooltipLocked: () => boolean;
                                                                        • isTooltipLocked

                                                                        method layout

                                                                        layout: () => void;

                                                                          method lockTooltip

                                                                          lockTooltip: () => void;
                                                                          • lockTooltip

                                                                          method processCustomContent

                                                                          protected processCustomContent: (option: TooltipOption) => TooltipOption;

                                                                            method render

                                                                            render: () => void;

                                                                              method reset

                                                                              reset: () => void;

                                                                                method showTooltip

                                                                                showTooltip: (point: Point) => void;
                                                                                • Shows tooltip

                                                                                  Parameter point

                                                                                method unlockTooltip

                                                                                unlockTooltip: () => void;
                                                                                • unlockTooltip

                                                                                method update

                                                                                update: () => void;

                                                                                  class View

                                                                                  class View extends Base {}
                                                                                  • G2 视图 View 类

                                                                                  constructor

                                                                                  constructor(props: ViewCfg);

                                                                                    property appendPadding

                                                                                    appendPadding: ViewAppendPadding;
                                                                                    • padding的基础上增加的调整值

                                                                                    property autoPadding

                                                                                    autoPadding: PaddingCal;
                                                                                    • 存储最终计算的 padding 结果

                                                                                    property backgroundGroup

                                                                                    backgroundGroup: IGroup;
                                                                                    • 三层 Group 图形中的背景层。

                                                                                    property canvas

                                                                                    canvas: ICanvas;
                                                                                    • G.Canvas 实例。

                                                                                    property controllers

                                                                                    controllers: Controller<unknown>[];
                                                                                    • 所有的组件 controllers。

                                                                                    property coordinateBBox

                                                                                    coordinateBBox: BBox;
                                                                                    • 坐标系的位置大小,ViewBBox - padding = coordinateBBox。

                                                                                    property coordinateController

                                                                                    protected coordinateController: CoordinateController;
                                                                                    • Coordinate 相关的控制器类,负责坐标系实例的创建、更新、变换等

                                                                                    property coordinateInstance

                                                                                    protected coordinateInstance: Coordinate;

                                                                                    property facetInstance

                                                                                    protected facetInstance: Facet<FacetCfg<FacetData>, FacetData>;
                                                                                    • 分面类实例

                                                                                    property filteredData

                                                                                    protected filteredData: Data;
                                                                                    • 过滤之后的数据

                                                                                    property foregroundGroup

                                                                                    foregroundGroup: IGroup;
                                                                                    • 三层 Group 图形中的前景层。

                                                                                    property geometries

                                                                                    geometries: Geometry<ShapePoint>[];
                                                                                    • 所有的 geometry 实例。

                                                                                    property id

                                                                                    id: string;
                                                                                    • view id,全局唯一。

                                                                                    property interactions

                                                                                    interactions: Record<string, Interaction>;
                                                                                    • 所有的 Interaction 实例。

                                                                                    property layoutFunc

                                                                                    protected layoutFunc: Layout;
                                                                                    • 布局函数

                                                                                    property limitInPlot

                                                                                    limitInPlot: boolean;
                                                                                    • 是否对超出坐标系范围的 Geometry 进行剪切

                                                                                    property middleGroup

                                                                                    middleGroup: IGroup;
                                                                                    • 三层 Group 图形中的中间层。

                                                                                    property options

                                                                                    protected options: Options;

                                                                                      property padding

                                                                                      padding: ViewPadding;
                                                                                      • view 的 padding 大小,传入的配置(不是解析之后的值)。

                                                                                      property parent

                                                                                      parent: View;
                                                                                      • 父级 view,如果没有父级,则为空。

                                                                                      property region

                                                                                      protected region: Region;
                                                                                      • 标记 view 的大小位置范围,均是 0 ~ 1 范围,便于开发者使用,起始点为左上角。

                                                                                      property themeObject

                                                                                      protected themeObject: LooseObject;
                                                                                      • 主题配置,存储当前主题配置。

                                                                                      property viewBBox

                                                                                      viewBBox: BBox;
                                                                                      • view 区域空间。

                                                                                      property views

                                                                                      views: View[];
                                                                                      • 所有的子 view。

                                                                                      method adjustCoordinate

                                                                                      adjustCoordinate: () => void;
                                                                                      • 调整 coordinate 的坐标范围。

                                                                                      method animate

                                                                                      animate: (status: boolean) => View;

                                                                                        method annotation

                                                                                        annotation: () => Annotation;
                                                                                        • 辅助标记配置。

                                                                                          view.annotation().line({
                                                                                          start: ['min', 85],
                                                                                          end: ['max', 85],
                                                                                          style: {
                                                                                          stroke: '#595959',
                                                                                          lineWidth: 1,
                                                                                          lineDash: [3, 3],
                                                                                          },
                                                                                          });

                                                                                          更详细的配置项:https://github.com/antvis/component#annotation

                                                                                          Returns

                                                                                          [[Annotation]]

                                                                                        method axis

                                                                                        axis: { (field: boolean): View; (field: string, axisOption: AxisOption): View };
                                                                                        • 开启或者关闭坐标轴。

                                                                                          view.axis(false); // 不展示坐标轴

                                                                                          Parameter field

                                                                                          坐标轴开关

                                                                                        • 对特定的某条坐标轴进行配置。

                                                                                          Parameter field

                                                                                          要配置的坐标轴对应的字段名称

                                                                                          Parameter axisOption

                                                                                          坐标轴具体配置,更详细的配置项可以参考:https://github.com/antvis/component#axis

                                                                                          Example 1

                                                                                          view.axis('city', false); // 不展示 'city' 字段对应的坐标轴
                                                                                          // 将 'city' 字段对应的坐标轴的标题隐藏
                                                                                          view.axis('city', {
                                                                                          title: null,
                                                                                          });

                                                                                        method changeData

                                                                                        changeData: (data: Data) => void;
                                                                                        • 修改数据,数据更新逻辑,数据更新仅仅影响当前这一层的 view

                                                                                          view.changeData([{ city: '北京', sale: '200' }]);

                                                                                          Parameter data

                                                                                          Returns

                                                                                          void

                                                                                        method changeVisible

                                                                                        changeVisible: (visible: boolean) => View;
                                                                                        • 显示或者隐藏整个 view。

                                                                                          Parameter visible

                                                                                          是否可见

                                                                                          Returns

                                                                                          View

                                                                                        method clear

                                                                                        clear: () => void;
                                                                                        • 生命周期:清空图表上所有的绘制内容,但是不销毁图表,chart 仍可使用。

                                                                                          Returns

                                                                                          void

                                                                                        method coord

                                                                                        coord: (
                                                                                        type: string | CoordinateOption,
                                                                                        coordinateCfg?: CoordinateCfg
                                                                                        ) => CoordinateController;
                                                                                        • Deprecated

                                                                                          This method will be removed at G2 V4.1. Replaced by

                                                                                        method coordinate

                                                                                        coordinate: {
                                                                                        (option?: CoordinateOption): CoordinateController;
                                                                                        (type: string, coordinateCfg?: CoordinateCfg): CoordinateController;
                                                                                        };
                                                                                        • 坐标系配置。

                                                                                          Parameter option

                                                                                          Returns

                                                                                          Example 1

                                                                                          view.coordinate({
                                                                                          type: 'polar',
                                                                                          cfg: {
                                                                                          radius: 0.85,
                                                                                          },
                                                                                          actions: [
                                                                                          [ 'transpose' ],
                                                                                          ],
                                                                                          });

                                                                                        • 声明坐标系类型,并进行配置。

                                                                                          // 直角坐标系,并进行转置变换
                                                                                          view.coordinate('rect').transpose();
                                                                                          // 默认创建直角坐标系
                                                                                          view.coordinate();

                                                                                          Parameter type

                                                                                          坐标系类型

                                                                                          Parameter coordinateCfg

                                                                                          坐标系配置

                                                                                          Returns

                                                                                        method createScale

                                                                                        protected createScale: (
                                                                                        field: string,
                                                                                        data: Data,
                                                                                        scaleDef: ScaleOption,
                                                                                        key: string
                                                                                        ) => Scale;
                                                                                        • 创建 scale,递归到顶层 view 去创建和缓存 scale

                                                                                          Parameter field

                                                                                          Parameter data

                                                                                          Parameter scaleDef

                                                                                          Parameter key

                                                                                        method createView

                                                                                        createView: (cfg?: Partial<ViewCfg>) => View;
                                                                                        • 创建子 view

                                                                                          const innerView = view.createView({
                                                                                          start: { x: 0, y: 0 },
                                                                                          end: { x: 0.5, y: 0.5 },
                                                                                          padding: 8,
                                                                                          });

                                                                                          Parameter cfg

                                                                                          Returns

                                                                                          View

                                                                                        method data

                                                                                        data: (data: Data) => View;
                                                                                        • 装载数据源。

                                                                                          view.data([{ city: '杭州', sale: 100 }, { city: '上海', sale: 110 } ]);

                                                                                          Parameter data

                                                                                          数据源,json 数组。

                                                                                          Returns

                                                                                          View

                                                                                        method destroy

                                                                                        destroy: () => void;
                                                                                        • 生命周期:销毁,完全无法使用。

                                                                                          Returns

                                                                                          void

                                                                                        method facet

                                                                                        facet: <T extends keyof FacetCfgMap>(type: T, cfg: FacetCfgMap[T]) => View;
                                                                                        • view 分面绘制。

                                                                                          view.facet('rect', {
                                                                                          rowField: 'province',
                                                                                          columnField: 'category',
                                                                                          eachView: (innerView: View, facet?: FacetData) => {
                                                                                          innerView.line().position('city*sale');
                                                                                          },
                                                                                          });

                                                                                          Parameter type

                                                                                          分面类型

                                                                                          Parameter cfg

                                                                                          分面配置, [[FacetCfgMap]]

                                                                                          Returns

                                                                                          View

                                                                                        method filter

                                                                                        filter: (field: string, condition: FilterCondition | null) => View;
                                                                                        • 设置数据筛选规则。

                                                                                          view.filter('city', (value: any, datum: Datum) => value !== '杭州');
                                                                                          // 删除 'city' 字段对应的筛选规则。
                                                                                          view.filter('city', null);

                                                                                          Parameter field

                                                                                          数据字段

                                                                                          Parameter condition

                                                                                          筛选规则

                                                                                          Returns

                                                                                          View

                                                                                        method filterData

                                                                                        filterData: (data: Data) => Data;
                                                                                        • 将 data 数据进行过滤。

                                                                                          Parameter data

                                                                                          Returns

                                                                                          过滤之后的数据

                                                                                        method filterFieldData

                                                                                        filterFieldData: (field: string, data: Data) => Data;
                                                                                        • 对某一个字段进行过滤

                                                                                          Parameter field

                                                                                          Parameter data

                                                                                        method getCanvas

                                                                                        getCanvas: () => ICanvas;
                                                                                        • 获取 G.Canvas 实例。

                                                                                          Returns

                                                                                          G.Canvas 画布实例。

                                                                                        method getComponents

                                                                                        getComponents: () => ComponentOption[];
                                                                                        • 获取所有的 pure component 组件,用于布局。

                                                                                        method getController

                                                                                        getController: {
                                                                                        (name: 'tooltip'): Tooltip;
                                                                                        (name: 'axis'): Axis;
                                                                                        (name: 'legend'): Legend;
                                                                                        (name: 'scrollbar'): Scrollbar;
                                                                                        (name: 'slider'): Slider;
                                                                                        (name: 'annotation'): Annotation;
                                                                                        (name: 'gestucre'): Gesture;
                                                                                        (name: string): Controller<unknown>;
                                                                                        };

                                                                                          method getCoordinate

                                                                                          getCoordinate: () => Coordinate;
                                                                                          • 获取当前坐标系实例。

                                                                                            Returns

                                                                                            [[Coordinate]]

                                                                                          method getData

                                                                                          getData: () => Data;
                                                                                          • 获取 view 的数据(过滤后的数据)。

                                                                                            Returns

                                                                                            处理过滤器之后的数据。

                                                                                          method getElements

                                                                                          getElements: () => Element[];
                                                                                          • 获取 view 中的所有 geome

                                                                                          method getElementsBy

                                                                                          getElementsBy: (condition: (element: Element) => boolean) => Element[];
                                                                                          • 根据一定的规则查找 Geometry 的 Elements。

                                                                                            getElementsBy((element) => {
                                                                                            const data = element.getData();
                                                                                            return data.a === 'a';
                                                                                            });

                                                                                            Parameter condition

                                                                                            定义查找规则的回调函数。

                                                                                            Returns

                                                                                          method getGeometries

                                                                                          getGeometries: () => Geometry<import('../interface').ShapePoint>[];
                                                                                          • 获取当前 view 有的 geometries

                                                                                            Returns

                                                                                          method getGroupScales

                                                                                          getGroupScales: () => Scale[];
                                                                                          • 获取所有的分组字段的 scale 实例。

                                                                                            Returns

                                                                                            获得分组字段的 scale 实例数组。

                                                                                          method getLayer

                                                                                          getLayer: (layer: LAYER) => IGroup;
                                                                                          • 获得绘制的层级 group。

                                                                                            Parameter layer

                                                                                            层级名称。

                                                                                            Returns

                                                                                            对应层级的 Group。

                                                                                          method getLegendAttributes

                                                                                          getLegendAttributes: () => Attribute[];
                                                                                          • 获得所有的 legend 对应的 attribute 实例。

                                                                                            Returns

                                                                                            维度字段的 Attribute 数组

                                                                                          method getOptions

                                                                                          getOptions: () => Options;
                                                                                          • 返回所有配置信息。

                                                                                            Returns

                                                                                            所有的 view API 配置。

                                                                                          method getOriginalData

                                                                                          getOriginalData: () => Data;
                                                                                          • 获取原始数据

                                                                                            Returns

                                                                                            传入 G2 的原始数据

                                                                                          method getPadding

                                                                                          getPadding: () => Padding;
                                                                                          • 获取布局后的边距 padding

                                                                                            Returns

                                                                                          method getRootView

                                                                                          getRootView: () => View;
                                                                                          • 获得根节点 view。

                                                                                          method getScale

                                                                                          getScale: (field: string, key?: string) => Scale;
                                                                                          • 根据字段名去获取 scale 实例。

                                                                                            Parameter field

                                                                                            数据字段名称

                                                                                            Parameter key

                                                                                            id

                                                                                          method getScaleByField

                                                                                          getScaleByField: (field: string, key?: string) => Scale;
                                                                                          • Deprecated

                                                                                            This method will be removed at G2 V4.1. Please use getScale.

                                                                                          method getScalesByDim

                                                                                          getScalesByDim: (dimType: 'x' | 'y') => Record<string, Scale>;
                                                                                          • 获取 x 轴或者 y 轴对应的所有 scale 实例。

                                                                                            Parameter dimType

                                                                                            x | y

                                                                                            Returns

                                                                                            x 轴或者 y 轴对应的所有 scale 实例。

                                                                                          method getSnapRecords

                                                                                          getSnapRecords: (point: Point) => any[];
                                                                                          • 获取逼近的点的数据集合

                                                                                            Parameter point

                                                                                            当前坐标点

                                                                                            Returns

                                                                                            数据

                                                                                          method getTheme

                                                                                          getTheme: () => LooseObject;
                                                                                          • 获取当前 view 的主题配置。

                                                                                            Returns

                                                                                            themeObject

                                                                                          method getTooltipItems

                                                                                          getTooltipItems: (point: Point) => any[];
                                                                                          • 获取当前 point 对应的 tooltip 数据项。

                                                                                            Parameter point

                                                                                            坐标点

                                                                                            Returns

                                                                                            tooltip 数据项

                                                                                          method getXScale

                                                                                          getXScale: () => Scale;
                                                                                          • 获得 x 轴字段的 scale 实例。

                                                                                            Returns

                                                                                            view 中 Geometry 对于的 x scale

                                                                                          method getXY

                                                                                          getXY: (data: Datum) => Point;
                                                                                          • 获取该数据在可视化后,对应的画布坐标点。

                                                                                            Parameter data

                                                                                            原始数据记录

                                                                                            Returns

                                                                                            对应的画布坐标点

                                                                                          method getYScales

                                                                                          getYScales: () => Scale[];
                                                                                          • 获取 y 轴字段的 scales 实例。

                                                                                            Returns

                                                                                            view 中 Geometry 对于的 y scale 数组

                                                                                          method guide

                                                                                          guide: () => Annotation;
                                                                                          • Deprecated

                                                                                            This method will be removed at G2 V4.1. Replaced by

                                                                                          method hideTooltip

                                                                                          hideTooltip: () => View;
                                                                                          • 隐藏 tooltip。

                                                                                            Returns

                                                                                            View

                                                                                          method init

                                                                                          init: () => void;
                                                                                          • 生命周期:初始化

                                                                                            Returns

                                                                                            voids

                                                                                          method interaction

                                                                                          interaction: (name: string, cfg?: LooseObject) => View;
                                                                                          • Call the interaction based on the interaction name

                                                                                            view.interaction('my-interaction', { extra: 'hello world' });

                                                                                            详细文档可以参考:https://g2.antv.vision/zh/docs/api/general/interaction

                                                                                            Parameter name

                                                                                            interaction name

                                                                                            Parameter cfg

                                                                                            interaction config

                                                                                            Returns

                                                                                          method isPointInPlot

                                                                                          isPointInPlot: (point: Point) => boolean;
                                                                                          • 对外暴露方法,判断一个点是否在绘图区域(即坐标系范围)内部。

                                                                                            Parameter point

                                                                                            坐标点

                                                                                          method isTooltipLocked

                                                                                          isTooltipLocked: () => boolean;
                                                                                          • 是否锁定 tooltip。

                                                                                            Returns

                                                                                            是否锁定

                                                                                          method legend

                                                                                          legend: {
                                                                                          (field: LegendOption): View;
                                                                                          (field: string, legendOption: LegendOption): View;
                                                                                          };
                                                                                          • 对图例进行整体配置。

                                                                                            view.legend(false); // 关闭图例
                                                                                            view.legend({
                                                                                            position: 'right',
                                                                                            }); // 图例进行整体配置

                                                                                            Parameter field

                                                                                            Returns

                                                                                            View

                                                                                          • 对特定的图例进行配置。

                                                                                            Parameter field

                                                                                            图例对应的数据字段名称

                                                                                            Parameter legendOption

                                                                                            图例配置,更详细的配置项可以参考:https://github.com/antvis/component#axis

                                                                                            Returns

                                                                                            View

                                                                                            Example 1

                                                                                            view.legend('city', false); // 关闭某个图例,通过数据字段名进行关联
                                                                                            // 对特定的图例进行配置
                                                                                            view.legend('city', {
                                                                                            position: 'right',
                                                                                            });

                                                                                          method lockTooltip

                                                                                          lockTooltip: () => View;
                                                                                          • 将 tooltip 锁定到当前位置不能移动。

                                                                                            Returns

                                                                                            View

                                                                                          method option

                                                                                          option: (name: string, opt: any) => View;
                                                                                          • view.options 属性中存储配置项。

                                                                                            Parameter name

                                                                                            属性名称

                                                                                            Parameter opt

                                                                                            属性值

                                                                                            Returns

                                                                                            view

                                                                                          method paint

                                                                                          protected paint: (isUpdate: boolean) => void;

                                                                                            method removeInteraction

                                                                                            removeInteraction: (name: string) => void;
                                                                                            • 移除当前 View 的 interaction

                                                                                              view.removeInteraction('my-interaction');

                                                                                              Parameter name

                                                                                              interaction name

                                                                                            method removeView

                                                                                            removeView: (view: View) => View;
                                                                                            • 删除一个子 view

                                                                                              Parameter view

                                                                                              removedView

                                                                                            method render

                                                                                            render: (isUpdate?: boolean, payload?: EventPayload) => void;
                                                                                            • 生命周期:渲染流程,渲染过程需要处理数据更新的情况。 render 函数仅仅会处理 view 和子 view。

                                                                                              Parameter isUpdate

                                                                                              是否触发更新流程。

                                                                                              Parameter params

                                                                                              render 事件参数

                                                                                            method renderLayoutRecursive

                                                                                            protected renderLayoutRecursive: (isUpdate: boolean) => void;
                                                                                            • 递归处理 view 的布局,最终是计算各个 view 的 coordinateBBox 和 coordinateInstance

                                                                                              Parameter isUpdate

                                                                                            method renderPaddingRecursive

                                                                                            protected renderPaddingRecursive: (isUpdate: boolean) => void;
                                                                                            • 递归计算每个 view 的 padding 值,coordinateBBox 和 coordinateInstance

                                                                                              Parameter isUpdate

                                                                                            method renderPaintRecursive

                                                                                            protected renderPaintRecursive: (isUpdate: boolean) => void;
                                                                                            • 最终递归绘制组件和图形

                                                                                              Parameter isUpdate

                                                                                            method scale

                                                                                            scale: {
                                                                                            (field: Record<string, ScaleOption>): View;
                                                                                            (field: string, scaleOption: ScaleOption): View;
                                                                                            };
                                                                                            • 批量设置 scale 配置。

                                                                                              view.scale({
                                                                                              sale: {
                                                                                              min: 0,
                                                                                              max: 100,
                                                                                              }
                                                                                              });

                                                                                              Scale 的详细配置项可以参考:https://github.com/antvis/scale#api

                                                                                              Returns

                                                                                              View

                                                                                            • 为特性的数据字段进行 scale 配置。

                                                                                              view.scale('sale', {
                                                                                              min: 0,
                                                                                              max: 100,
                                                                                              });

                                                                                              Returns

                                                                                              View

                                                                                            method setLayout

                                                                                            setLayout: (layout: Layout) => void;
                                                                                            • 设置 layout 布局函数

                                                                                              Parameter layout

                                                                                              布局函数

                                                                                              Returns

                                                                                              void

                                                                                            method showTooltip

                                                                                            showTooltip: (point: Point) => View;
                                                                                            • 显示 point 坐标点对应的 tooltip。

                                                                                              Parameter point

                                                                                              画布坐标点

                                                                                              Returns

                                                                                              View

                                                                                            method source

                                                                                            source: (data: Data) => View;
                                                                                            • Deprecated

                                                                                              This method will be removed at G2 V4.1. Replaced by

                                                                                            method theme

                                                                                            theme: (theme: string | LooseObject) => View;
                                                                                            • 设置主题。

                                                                                              view.theme('dark'); // 'dark' 需要事先通过 `registerTheme()` 接口注册完成
                                                                                              view.theme({ defaultColor: 'red' });

                                                                                              Parameter theme

                                                                                              主题名或者主题配置

                                                                                              Returns

                                                                                              View

                                                                                            method tooltip

                                                                                            tooltip: (cfg: boolean | TooltipOption) => View;
                                                                                            • tooltip 提示信息配置。

                                                                                              view.tooltip(false); // 关闭 tooltip
                                                                                              view.tooltip({
                                                                                              shared: true
                                                                                              });

                                                                                              Parameter cfg

                                                                                              Tooltip 配置,更详细的配置项参考:https://github.com/antvis/component#tooltip

                                                                                              Returns

                                                                                              View

                                                                                            method unlockTooltip

                                                                                            unlockTooltip: () => View;
                                                                                            • 将 tooltip 锁定解除。

                                                                                              Returns

                                                                                              View

                                                                                            method updateOptions

                                                                                            updateOptions: (options: Options) => this;
                                                                                            • 更新配置项,用于配置项式声明。

                                                                                              Parameter options

                                                                                              配置项

                                                                                            method view

                                                                                            view: (cfg?: Partial<ViewCfg>) => View;
                                                                                            • Deprecated

                                                                                              This method will be removed at G2 V4.1. Replaced by

                                                                                            Interfaces

                                                                                            interface View

                                                                                            interface View {}

                                                                                              method area

                                                                                              area: (cfg?: Partial<AreaCfg>) => Area;
                                                                                              • 创建 Area 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Area 构造函数的配置。

                                                                                                Returns

                                                                                                area 返回 Area 实例。

                                                                                              method edge

                                                                                              edge: (cfg?: Partial<GeometryCfg>) => Edge;
                                                                                              • 创建 Edge 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Edge 构造函数的配置。

                                                                                                Returns

                                                                                                schema 返回 Edge 实例。

                                                                                              method heatmap

                                                                                              heatmap: (cfg?: Partial<GeometryCfg>) => Heatmap;
                                                                                              • 创建 Heatmap 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Heatmap 构造函数的配置。

                                                                                                Returns

                                                                                                heatmap 返回 Heatmap 实例。

                                                                                              method interval

                                                                                              interval: (cfg?: Partial<IntervalCfg>) => Interval;
                                                                                              • 创建 Interval 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Interval 构造函数的配置。

                                                                                                Returns

                                                                                                interval 返回 Interval 实例。

                                                                                              method line

                                                                                              line: (cfg?: Partial<PathCfg>) => Line;
                                                                                              • 创建 Line 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Line 构造函数的配置。

                                                                                                Returns

                                                                                                line 返回 Line 实例。

                                                                                              method path

                                                                                              path: (cfg?: Partial<PathCfg>) => Path;
                                                                                              • 创建 Path 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Path 构造函数的配置。

                                                                                                Returns

                                                                                                path 返回 Path 实例。

                                                                                              method point

                                                                                              point: (cfg?: Partial<GeometryCfg>) => Point;
                                                                                              • 创建 Point 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Point 构造函数的配置。

                                                                                                Returns

                                                                                                point 返回 Point 实例。

                                                                                              method polygon

                                                                                              polygon: (cfg?: Partial<GeometryCfg>) => Polygon;
                                                                                              • 创建 Polygon 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Polygon 构造函数的配置。

                                                                                                Returns

                                                                                                polygon 返回 Polygon 实例。

                                                                                              method schema

                                                                                              schema: (cfg?: Partial<GeometryCfg>) => Schema;
                                                                                              • 创建 Schema 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Schema 构造函数的配置。

                                                                                                Returns

                                                                                                schema 返回 Schema 实例。

                                                                                              method violin

                                                                                              violin: (cfg?: Partial<GeometryCfg>) => Violin;
                                                                                              • 创建 Violin 几何标记。

                                                                                                Parameter cfg

                                                                                                传入 Violin 构造函数的配置。

                                                                                                Returns

                                                                                                violin 返回 Violin 实例。

                                                                                              Enums

                                                                                              enum BRUSH_FILTER_EVENTS

                                                                                              enum BRUSH_FILTER_EVENTS {
                                                                                              FILTER = 'brush-filter-processing',
                                                                                              RESET = 'brush-filter-reset',
                                                                                              BEFORE_FILTER = 'brush-filter:beforefilter',
                                                                                              AFTER_FILTER = 'brush-filter:afterfilter',
                                                                                              BEFORE_RESET = 'brush-filter:beforereset',
                                                                                              AFTER_RESET = 'brush-filter:afterreset',
                                                                                              }
                                                                                              • range-filter 只用于:brush-filter, brush-x-filter, brush-y-filter

                                                                                              member AFTER_FILTER

                                                                                              AFTER_FILTER = 'brush-filter:afterfilter'

                                                                                                member AFTER_RESET

                                                                                                AFTER_RESET = 'brush-filter:afterreset'

                                                                                                  member BEFORE_FILTER

                                                                                                  BEFORE_FILTER = 'brush-filter:beforefilter'

                                                                                                    member BEFORE_RESET

                                                                                                    BEFORE_RESET = 'brush-filter:beforereset'

                                                                                                      member FILTER

                                                                                                      FILTER = 'brush-filter-processing'

                                                                                                        member RESET

                                                                                                        RESET = 'brush-filter-reset'

                                                                                                          enum DIRECTION

                                                                                                          enum DIRECTION {
                                                                                                          TOP = 'top',
                                                                                                          TOP_LEFT = 'top-left',
                                                                                                          TOP_RIGHT = 'top-right',
                                                                                                          RIGHT = 'right',
                                                                                                          RIGHT_TOP = 'right-top',
                                                                                                          RIGHT_BOTTOM = 'right-bottom',
                                                                                                          LEFT = 'left',
                                                                                                          LEFT_TOP = 'left-top',
                                                                                                          LEFT_BOTTOM = 'left-bottom',
                                                                                                          BOTTOM = 'bottom',
                                                                                                          BOTTOM_LEFT = 'bottom-left',
                                                                                                          BOTTOM_RIGHT = 'bottom-right',
                                                                                                          RADIUS = 'radius',
                                                                                                          CIRCLE = 'circle',
                                                                                                          NONE = 'none',
                                                                                                          }
                                                                                                          • 组件在画布的布局方位 12 方位

                                                                                                          member BOTTOM

                                                                                                          BOTTOM = 'bottom'

                                                                                                            member BOTTOM_LEFT

                                                                                                            BOTTOM_LEFT = 'bottom-left'

                                                                                                              member BOTTOM_RIGHT

                                                                                                              BOTTOM_RIGHT = 'bottom-right'

                                                                                                                member CIRCLE

                                                                                                                CIRCLE = 'circle'

                                                                                                                  member LEFT

                                                                                                                  LEFT = 'left'

                                                                                                                    member LEFT_BOTTOM

                                                                                                                    LEFT_BOTTOM = 'left-bottom'

                                                                                                                      member LEFT_TOP

                                                                                                                      LEFT_TOP = 'left-top'

                                                                                                                        member NONE

                                                                                                                        NONE = 'none'

                                                                                                                          member RADIUS

                                                                                                                          RADIUS = 'radius'

                                                                                                                            member RIGHT

                                                                                                                            RIGHT = 'right'

                                                                                                                              member RIGHT_BOTTOM

                                                                                                                              RIGHT_BOTTOM = 'right-bottom'

                                                                                                                                member RIGHT_TOP

                                                                                                                                RIGHT_TOP = 'right-top'

                                                                                                                                  member TOP

                                                                                                                                  TOP = 'top'

                                                                                                                                    member TOP_LEFT

                                                                                                                                    TOP_LEFT = 'top-left'

                                                                                                                                      member TOP_RIGHT

                                                                                                                                      TOP_RIGHT = 'top-right'

                                                                                                                                        enum ELEMENT_RANGE_HIGHLIGHT_EVENTS

                                                                                                                                        enum ELEMENT_RANGE_HIGHLIGHT_EVENTS {
                                                                                                                                        BEFORE_HIGHLIGHT = 'element-range-highlight:beforehighlight',
                                                                                                                                        AFTER_HIGHLIGHT = 'element-range-highlight:afterhighlight',
                                                                                                                                        BEFORE_CLEAR = 'element-range-highlight:beforeclear',
                                                                                                                                        AFTER_CLEAR = 'element-range-highlight:afterclear',
                                                                                                                                        }

                                                                                                                                          member AFTER_CLEAR

                                                                                                                                          AFTER_CLEAR = 'element-range-highlight:afterclear'

                                                                                                                                            member AFTER_HIGHLIGHT

                                                                                                                                            AFTER_HIGHLIGHT = 'element-range-highlight:afterhighlight'

                                                                                                                                              member BEFORE_CLEAR

                                                                                                                                              BEFORE_CLEAR = 'element-range-highlight:beforeclear'

                                                                                                                                                member BEFORE_HIGHLIGHT

                                                                                                                                                BEFORE_HIGHLIGHT = 'element-range-highlight:beforehighlight'

                                                                                                                                                  enum LAYER

                                                                                                                                                  enum LAYER {
                                                                                                                                                  FORE = 'fore',
                                                                                                                                                  MID = 'mid',
                                                                                                                                                  BG = 'bg',
                                                                                                                                                  }
                                                                                                                                                  • view 中三层 group 分层 key

                                                                                                                                                  member BG

                                                                                                                                                  BG = 'bg'
                                                                                                                                                  • 背景层

                                                                                                                                                  member FORE

                                                                                                                                                  FORE = 'fore'
                                                                                                                                                  • 前景层

                                                                                                                                                  member MID

                                                                                                                                                  MID = 'mid'
                                                                                                                                                  • 中间层

                                                                                                                                                  enum VIEW_LIFE_CIRCLE

                                                                                                                                                  enum VIEW_LIFE_CIRCLE {
                                                                                                                                                  BEFORE_RENDER = 'beforerender',
                                                                                                                                                  AFTER_RENDER = 'afterrender',
                                                                                                                                                  BEFORE_PAINT = 'beforepaint',
                                                                                                                                                  AFTER_PAINT = 'afterpaint',
                                                                                                                                                  BEFORE_CHANGE_DATA = 'beforechangedata',
                                                                                                                                                  AFTER_CHANGE_DATA = 'afterchangedata',
                                                                                                                                                  BEFORE_CLEAR = 'beforeclear',
                                                                                                                                                  AFTER_CLEAR = 'afterclear',
                                                                                                                                                  BEFORE_DESTROY = 'beforedestroy',
                                                                                                                                                  BEFORE_CHANGE_SIZE = 'beforechangesize',
                                                                                                                                                  AFTER_CHANGE_SIZE = 'afterchangesize',
                                                                                                                                                  }
                                                                                                                                                  • View 的生命周期阶段(和 3.x 的生命周期略有不同) 我们需要先确定在那写场景需要用到生命周期,如果只是为了在生命周期插入一下什么组件之类的,那么在现有架构就是不需要的

                                                                                                                                                  member AFTER_CHANGE_DATA

                                                                                                                                                  AFTER_CHANGE_DATA = 'afterchangedata'

                                                                                                                                                    member AFTER_CHANGE_SIZE

                                                                                                                                                    AFTER_CHANGE_SIZE = 'afterchangesize'

                                                                                                                                                      member AFTER_CLEAR

                                                                                                                                                      AFTER_CLEAR = 'afterclear'

                                                                                                                                                        member AFTER_PAINT

                                                                                                                                                        AFTER_PAINT = 'afterpaint'

                                                                                                                                                          member AFTER_RENDER

                                                                                                                                                          AFTER_RENDER = 'afterrender'

                                                                                                                                                            member BEFORE_CHANGE_DATA

                                                                                                                                                            BEFORE_CHANGE_DATA = 'beforechangedata'

                                                                                                                                                              member BEFORE_CHANGE_SIZE

                                                                                                                                                              BEFORE_CHANGE_SIZE = 'beforechangesize'

                                                                                                                                                                member BEFORE_CLEAR

                                                                                                                                                                BEFORE_CLEAR = 'beforeclear'

                                                                                                                                                                  member BEFORE_DESTROY

                                                                                                                                                                  BEFORE_DESTROY = 'beforedestroy'

                                                                                                                                                                    member BEFORE_PAINT

                                                                                                                                                                    BEFORE_PAINT = 'beforepaint'

                                                                                                                                                                      member BEFORE_RENDER

                                                                                                                                                                      BEFORE_RENDER = 'beforerender'

                                                                                                                                                                        Namespaces

                                                                                                                                                                        namespace Types

                                                                                                                                                                        module 'lib/interface.d.ts' {}
                                                                                                                                                                        • 通用对象

                                                                                                                                                                        interface AdjustOption

                                                                                                                                                                        interface AdjustOption {}
                                                                                                                                                                        • 数据调整配置项定义,geometry.adjust({})

                                                                                                                                                                        property dodgeBy

                                                                                                                                                                        readonly dodgeBy?: string;
                                                                                                                                                                        • 分组字段 该属性只对 'dodge' 类型生效,声明以哪个数据字段为分组依据。

                                                                                                                                                                        property marginRatio

                                                                                                                                                                        readonly marginRatio?: number;
                                                                                                                                                                        • 间距 该属性只对 'dodge' 类型生效,取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距。

                                                                                                                                                                          See Also

                                                                                                                                                                          • ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ps3pToOg2nwAAAAAAAAAAABkARQnAQ)

                                                                                                                                                                        property reverseOrder

                                                                                                                                                                        readonly reverseOrder?: boolean;
                                                                                                                                                                        • 是否反序 该属性只对 'stack' 类型生效,用于控制是否对数据进行反序操作。

                                                                                                                                                                        property type

                                                                                                                                                                        readonly type: AdjustType;
                                                                                                                                                                        • 数据调整类型。

                                                                                                                                                                        interface AnimateCfg

                                                                                                                                                                        interface AnimateCfg {}
                                                                                                                                                                        • 用户配置的动画,属性均可选

                                                                                                                                                                        property animation

                                                                                                                                                                        readonly animation?: string;
                                                                                                                                                                        • 动画执行函数

                                                                                                                                                                        property callback

                                                                                                                                                                        readonly callback?: () => any;
                                                                                                                                                                        • 动画执行结束后的回调函数

                                                                                                                                                                        property delay

                                                                                                                                                                        readonly delay?: number | AnimateDelayCallback;
                                                                                                                                                                        • 动画延迟时间

                                                                                                                                                                        property duration

                                                                                                                                                                        readonly duration?: number | AnimateDurationCallback;
                                                                                                                                                                        • 动画执行时间

                                                                                                                                                                        property easing

                                                                                                                                                                        readonly easing?: string | AnimateEasingCallback;
                                                                                                                                                                        • 动画缓动函数

                                                                                                                                                                        property repeat

                                                                                                                                                                        readonly repeat?: boolean;
                                                                                                                                                                        • 动画是否重复

                                                                                                                                                                        interface AnimateOption

                                                                                                                                                                        interface AnimateOption {}
                                                                                                                                                                        • Geometry 动画参数配置。geometry.animate()

                                                                                                                                                                        property appear

                                                                                                                                                                        appear?: AnimateCfg | false | null;
                                                                                                                                                                        • chart 初始化渲染时的入场动画,false/null 表示关闭入场动画。

                                                                                                                                                                        property enter

                                                                                                                                                                        enter?: AnimateCfg | false | null;
                                                                                                                                                                        • chart 发生更新时,新增元素的入场动画,false/null 表示关闭入场动画。

                                                                                                                                                                        property leave

                                                                                                                                                                        leave?: AnimateCfg | false | null;
                                                                                                                                                                        • 销毁动画配置,false/null 表示关闭销毁动画。

                                                                                                                                                                        property update

                                                                                                                                                                        update?: AnimateCfg | false | null;
                                                                                                                                                                        • 更新动画配置,false/null 表示关闭更新动画。

                                                                                                                                                                        interface AnnotationBaseOption

                                                                                                                                                                        interface AnnotationBaseOption {}
                                                                                                                                                                        • Annotation 定义的通用属性,chart.annotation().line({})

                                                                                                                                                                        property animate

                                                                                                                                                                        readonly animate?: boolean;
                                                                                                                                                                        • 是否进行动画

                                                                                                                                                                        property animateOption

                                                                                                                                                                        readonly animateOption?: ComponentAnimateOption;
                                                                                                                                                                        • 动画参数配置 当且仅当 animate 属性为 true,即动画开启时生效。

                                                                                                                                                                        property offsetX

                                                                                                                                                                        readonly offsetX?: number;
                                                                                                                                                                        • x 方向的偏移量

                                                                                                                                                                        property offsetY

                                                                                                                                                                        readonly offsetY?: number;
                                                                                                                                                                        • y 方向的偏移量

                                                                                                                                                                        property top

                                                                                                                                                                        readonly top?: boolean;
                                                                                                                                                                        • 是否顶层 指定 annotation 是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层

                                                                                                                                                                        property type

                                                                                                                                                                        readonly type?: string;
                                                                                                                                                                        • 类型

                                                                                                                                                                        interface AttributeOption

                                                                                                                                                                        interface AttributeOption {}
                                                                                                                                                                        • 图形属性配置项定义,如 geometry.position({})

                                                                                                                                                                        property callback

                                                                                                                                                                        callback?: (...args: any[]) => any;
                                                                                                                                                                        • 回调函数。

                                                                                                                                                                        property fields

                                                                                                                                                                        fields?: string[];
                                                                                                                                                                        • 映射的属性字段。

                                                                                                                                                                        property values

                                                                                                                                                                        values?: any[];
                                                                                                                                                                        • 指定常量映射规则。

                                                                                                                                                                        interface AxisCfg

                                                                                                                                                                        interface AxisCfg {}
                                                                                                                                                                        • 坐标轴配置属性,chart.axis()

                                                                                                                                                                        property animate

                                                                                                                                                                        animate?: boolean;
                                                                                                                                                                        • 动画 true

                                                                                                                                                                        property animateOption

                                                                                                                                                                        animateOption?: ComponentAnimateOption;
                                                                                                                                                                        • 动画参数

                                                                                                                                                                        property grid

                                                                                                                                                                        grid?: AxisGridCfg | null;
                                                                                                                                                                        • 网格线 坐标轴网格线的配置项,null 表示不展示。

                                                                                                                                                                        property label

                                                                                                                                                                        label?: AxisLabelCfg | null;
                                                                                                                                                                        • 文本标签 文本标签的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                                          {
                                                                                                                                                                          // 坐标轴文本的样式
                                                                                                                                                                          style?: ShapeAttrs;
                                                                                                                                                                          // label 的偏移量
                                                                                                                                                                          offset?: number;
                                                                                                                                                                          // 文本旋转角度
                                                                                                                                                                          rotate?: number;
                                                                                                                                                                          // 格式化函数
                                                                                                                                                                          formatter?: (text: string, item: ListItem, index: number) => any;
                                                                                                                                                                          // 是否自动旋转,默认 false
                                                                                                                                                                          autoRotate?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
                                                                                                                                                                          // 是否自动隐藏,默认 true
                                                                                                                                                                          autoHide?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
                                                                                                                                                                          // 是否自动省略,默认 false
                                                                                                                                                                          autoEllipsis?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
                                                                                                                                                                          }

                                                                                                                                                                          https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L127|AxisLabelCfg

                                                                                                                                                                        property line

                                                                                                                                                                        line?: AxisLineCfg | null;
                                                                                                                                                                        • 轴线 坐标轴线的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                                          {
                                                                                                                                                                          style?: ShapeAttrs; // 坐标轴线的样式配置项
                                                                                                                                                                          }

                                                                                                                                                                          https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L91|AxisLineCfg

                                                                                                                                                                        property position

                                                                                                                                                                        position?: 'top' | 'bottom' | 'right' | 'left';
                                                                                                                                                                        • 坐标轴的位置 适用于直角坐标系,设置坐标轴的位置。

                                                                                                                                                                        property subTickLine

                                                                                                                                                                        subTickLine?: AxisSubTickLineCfg | null;
                                                                                                                                                                        • 子刻度线 坐标轴子刻度线的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                                          {
                                                                                                                                                                          style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
                                                                                                                                                                          count?: number; // 子刻度个数
                                                                                                                                                                          length?: number; // 子刻度线长度
                                                                                                                                                                          }

                                                                                                                                                                          https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L169|AxisSubTickLineCfg

                                                                                                                                                                        property tickLine

                                                                                                                                                                        tickLine?: AxisTickLineCfg | null;
                                                                                                                                                                        • 刻度线线 坐标轴刻度线线的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                                          {
                                                                                                                                                                          style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
                                                                                                                                                                          alignTick?: boolean; // 是否同 tick 对齐
                                                                                                                                                                          length?: number; // 长度
                                                                                                                                                                          }

                                                                                                                                                                          https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L103|AxisTickLineCfg

                                                                                                                                                                        property title

                                                                                                                                                                        title?: AxisTitleCfg | null;
                                                                                                                                                                        • 标题 标题的配置项,null 表示不展示。 属性结构如下:

                                                                                                                                                                          {
                                                                                                                                                                          offset?: number; // 标题距离坐标轴的距离
                                                                                                                                                                          style?: ShapeAttrs; // 标题文本配置项
                                                                                                                                                                          autoRotate?: boolean; // 是否自动旋转
                                                                                                                                                                          }

                                                                                                                                                                          https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L191|AxisTitleCfg

                                                                                                                                                                        property top

                                                                                                                                                                        top?: boolean;
                                                                                                                                                                        • 是否渲染在画布顶层 防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡

                                                                                                                                                                        property verticalFactor

                                                                                                                                                                        verticalFactor?: number;
                                                                                                                                                                        • 坐标轴 label 的方向 标记坐标轴 label 的方向,左侧为 1,右侧为 -1。

                                                                                                                                                                        property verticalLimitLength

                                                                                                                                                                        verticalLimitLength?: number;
                                                                                                                                                                        • 坐标轴垂直方向的最大限制长度 配置坐标轴垂直方向的最大限制长度,对文本自适应有很大影响。 1. 可以直接设置像素值,如 100; 2. 也可设置绝对值,如 0.2,如果是 x 轴,则相对于图表的高度,如果是 y 轴,则相对于图表的宽度

                                                                                                                                                                          在 G2 中,x 轴的文本默认最大高度为图表高度的 1/2,y 轴的文本默认最大长度为图表宽度的 1/3

                                                                                                                                                                        interface AxisGridCfg

                                                                                                                                                                        interface AxisGridCfg {}
                                                                                                                                                                        • 坐标轴网格线的配置属性

                                                                                                                                                                        property alignTick

                                                                                                                                                                        alignTick?: boolean;
                                                                                                                                                                        • 是否同刻度线对齐 如果值为 false,则会显示在两个刻度中间。

                                                                                                                                                                          See Also

                                                                                                                                                                          • ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*YX6fS4GTTvMAAAAAAAAAAABkARQnAQ)

                                                                                                                                                                        property alternateColor

                                                                                                                                                                        alternateColor?: string | string[];
                                                                                                                                                                        • 两个栅格线间的填充色。

                                                                                                                                                                        property closed

                                                                                                                                                                        closed?: boolean;
                                                                                                                                                                        • 是否关闭 对于 circle 是否关闭 grid。

                                                                                                                                                                        property line

                                                                                                                                                                        line?: GridLineCfg;
                                                                                                                                                                        • 线的样式 属性结构如下:

                                                                                                                                                                          {
                                                                                                                                                                          type?: string; // 栅格线的类型,'line' 或者 'circle'
                                                                                                                                                                          style?: ShapeAttrs; // 栅格线的样式配置项
                                                                                                                                                                          }

                                                                                                                                                                          https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L407|GridLineCfg

                                                                                                                                                                        interface ChartCfg

                                                                                                                                                                        interface ChartCfg
                                                                                                                                                                        extends Omit<
                                                                                                                                                                        ViewCfg,
                                                                                                                                                                        | 'parent'
                                                                                                                                                                        | 'canvas'
                                                                                                                                                                        | 'foregroundGroup'
                                                                                                                                                                        | 'middleGroup'
                                                                                                                                                                        | 'backgroundGroup'
                                                                                                                                                                        | 'region'
                                                                                                                                                                        > {}
                                                                                                                                                                        • Chart 构造方法的入参

                                                                                                                                                                        property autoFit

                                                                                                                                                                        readonly autoFit?: boolean;
                                                                                                                                                                        • 否自适应容器宽高 图表是否自适应容器宽高,默认为 false,用户需要手动设置 width 和 height。当 autoFit: true 时, 会自动取图表容器的宽高,如果用户设置了 height,那么会以用户设置的 height 为准。 false

                                                                                                                                                                        property container

                                                                                                                                                                        readonly container: string | HTMLElement;
                                                                                                                                                                        • 指定 chart 绘制的 DOM,可以传入 DOM id,也可以直接传入 dom 实例。

                                                                                                                                                                        property defaultInteractions

                                                                                                                                                                        readonly defaultInteractions?: string[];
                                                                                                                                                                        • 配置图表默认交互,仅支持字符串形式。

                                                                                                                                                                        property height

                                                                                                                                                                        readonly height?: number;
                                                                                                                                                                        • 图表高度。

                                                                                                                                                                        property localRefresh

                                                                                                                                                                        readonly localRefresh?: boolean;
                                                                                                                                                                        • 是否开启局部刷新 true

                                                                                                                                                                        property pixelRatio

                                                                                                                                                                        readonly pixelRatio?: number;
                                                                                                                                                                        • 像素比 设置设备像素比,默认取浏览器的值 window.devicePixelRatio

                                                                                                                                                                        property renderer

                                                                                                                                                                        readonly renderer?: Renderer;
                                                                                                                                                                        • 渲染引擎 "canvas"

                                                                                                                                                                        property supportCSSTransform

                                                                                                                                                                        readonly supportCSSTransform?: boolean;
                                                                                                                                                                        • 是否支持 CSS transform 开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。 false

                                                                                                                                                                        property width

                                                                                                                                                                        readonly width?: number;
                                                                                                                                                                        • 图表宽度。

                                                                                                                                                                        interface CircleCfg

                                                                                                                                                                        interface CircleCfg extends FacetCfg<CircleData> {}
                                                                                                                                                                        • circle 分面类型配置

                                                                                                                                                                        property title

                                                                                                                                                                        readonly title?: FacetTitle;
                                                                                                                                                                        • 分面标题配置。

                                                                                                                                                                        interface ComponentAnimateCfg

                                                                                                                                                                        interface ComponentAnimateCfg {}
                                                                                                                                                                        • 目前组件动画允许的参数配置

                                                                                                                                                                        property delay

                                                                                                                                                                        readonly delay?: number;
                                                                                                                                                                        • 动画延迟时间

                                                                                                                                                                        property duration

                                                                                                                                                                        readonly duration?: number;
                                                                                                                                                                        • 动画执行时间

                                                                                                                                                                        property easing

                                                                                                                                                                        readonly easing?: string;
                                                                                                                                                                        • 动画缓动函数

                                                                                                                                                                        interface ComponentAnimateOption

                                                                                                                                                                        interface ComponentAnimateOption {}
                                                                                                                                                                        • 组件各个动画类型配置

                                                                                                                                                                        property appear

                                                                                                                                                                        appear?: ComponentAnimateCfg;
                                                                                                                                                                        • 初入场动画配置

                                                                                                                                                                        property enter

                                                                                                                                                                        enter?: ComponentAnimateCfg;
                                                                                                                                                                        • 更新后新入场的动画配置

                                                                                                                                                                        property leave

                                                                                                                                                                        leave?: ComponentAnimateCfg;
                                                                                                                                                                        • 离场动画配置

                                                                                                                                                                        property update

                                                                                                                                                                        update?: ComponentAnimateCfg;
                                                                                                                                                                        • 更新动画配置

                                                                                                                                                                        interface ComponentOption

                                                                                                                                                                        interface ComponentOption {}
                                                                                                                                                                        • 组件及布局的信息

                                                                                                                                                                        property component

                                                                                                                                                                        readonly component: GroupComponent | HtmlComponent;

                                                                                                                                                                          property direction

                                                                                                                                                                          direction: DIRECTION;

                                                                                                                                                                            property extra

                                                                                                                                                                            readonly extra?: any;

                                                                                                                                                                              property id

                                                                                                                                                                              readonly id?: string;

                                                                                                                                                                                property layer

                                                                                                                                                                                readonly layer: LAYER;

                                                                                                                                                                                  property type

                                                                                                                                                                                  readonly type: COMPONENT_TYPE;

                                                                                                                                                                                    interface Condition

                                                                                                                                                                                    interface Condition {}

                                                                                                                                                                                      property field