@antv/g2

  • Version 4.1.25
  • Published
  • 11.2 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;
};

    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 changeSize

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

            Parameter width

            图表宽度

            Parameter height

            图表高度

            Returns

          method changeVisible

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

            Parameter visible

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

            Returns

          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: any;
                  • shape 容器

                  property geometry

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

                  property labelShape

                  labelShape: any[];
                  • 保存 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: () => any;
                  • 返回 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: any, 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: any;
                    • 被包装的原生 G 事件

                    property target

                    readonly target: any;
                    • 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: any;
                      • 分面容器

                      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;
                      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, any>;
                        • Attribute map

                        property beforeMappingData

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

                        property canvasRegion

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

                        property columnWidthRatio

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

                        property container

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

                        property coordinate

                        coordinate: any;
                        • 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: any;
                          • 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, any>;
                          • 存储 geometry 需要的 scales,需要外部传入。

                          property shapeFactory

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

                          property shapeType

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

                          property sortable

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

                          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 zIndexReversed

                          protected 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,
                            isUpdate?: boolean
                            ) => Element;
                            • 创建 Element 实例。

                              Parameter mappingDatum

                              Element 对应的绘制数据

                              Parameter isUpdate

                              是否处于更新阶段

                              Returns

                              element 返回创建的 Element 实例

                            method createElements

                            protected createElements: (
                            mappingData: MappingDatum[],
                            index: number,
                            isUpdate?: boolean
                            ) => Element[];
                            • 创建所有的 Elements。

                              Parameter mappingData

                              Parameter isUpdate

                              Returns

                              elements

                            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) => any;

                              method getAttribute

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

                              method getAttributeValues

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

                                Parameter attr

                                Attribute 图形属性实例。

                                Parameter obj

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

                                Returns

                              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 getElementsBy

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

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

                                Parameter condition

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

                                Returns

                              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: () => any;
                              • 获取虚拟 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 getXScale

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

                              method getXYFields

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

                              method getYMinValue

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

                              method getYScale

                              getYScale: () => any;
                              • 获取 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

                                    更新的配置

                                  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: (mapppingArray: MappingDatum[], isUpdate?: boolean) => 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: any;
                                                                                • 三层 Group 图形中的背景层。

                                                                                property canvas

                                                                                canvas: any;
                                                                                • 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: any;

                                                                                property facetInstance

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

                                                                                property filteredData

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

                                                                                property foregroundGroup

                                                                                foregroundGroup: any;
                                                                                • 三层 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: any;
                                                                                • 三层 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
                                                                                    ) => any;
                                                                                    • 创建 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: () => any;
                                                                                    • 获取 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: () => any;
                                                                                      • 获取当前坐标系实例。

                                                                                        Returns

                                                                                        [[Coordinate]]

                                                                                      method getData

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

                                                                                        Returns

                                                                                        处理过滤器之后的数据。

                                                                                      method getGroupScales

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

                                                                                        Returns

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

                                                                                      method getLayer

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

                                                                                        Parameter layer

                                                                                        层级名称。

                                                                                        Returns

                                                                                        对应层级的 Group。

                                                                                      method getLegendAttributes

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

                                                                                        Returns

                                                                                        维度字段的 Attribute 数组

                                                                                      method getOptions

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

                                                                                        Returns

                                                                                        所有的 view API 配置。

                                                                                      method getRootView

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

                                                                                      method getScaleByField

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

                                                                                        Parameter field

                                                                                        数据字段名称

                                                                                        Parameter key

                                                                                        id

                                                                                      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: () => any;
                                                                                      • 获得 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 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距。

                                                                                                                                                                      ![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;
                                                                                                                                                                      • 动画开关,默认开启。

                                                                                                                                                                      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;
                                                                                                                                                                        }

                                                                                                                                                                        详见 AxisLabelCfg

                                                                                                                                                                      property line

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

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

                                                                                                                                                                        详见 AxisLineCfg

                                                                                                                                                                      property position

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

                                                                                                                                                                      property subTickLine

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

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

                                                                                                                                                                        详见 AxisSubTickLineCfg

                                                                                                                                                                      property tickLine

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

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

                                                                                                                                                                        详见 AxisTickLineCfg

                                                                                                                                                                      property title

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

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

                                                                                                                                                                        详见 AxisTitleCfg

                                                                                                                                                                      property top

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

                                                                                                                                                                      property verticalFactor

                                                                                                                                                                      verticalFactor?: number;
                                                                                                                                                                      • 标记坐标轴 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,则会显示在两个刻度中间。 ![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; // 栅格线的样式配置项
                                                                                                                                                                        }

                                                                                                                                                                        详见 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 为准。

                                                                                                                                                                      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;
                                                                                                                                                                      • 是否开启局部刷新,默认开启。

                                                                                                                                                                      property pixelRatio

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

                                                                                                                                                                      property renderer

                                                                                                                                                                      readonly renderer?: Renderer;
                                                                                                                                                                      • 指定渲染引擎,默认使用 canvas。

                                                                                                                                                                      property supportCSSTransform

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

                                                                                                                                                                      property width

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

                                                                                                                                                                      interface CircleCfg

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

                                                                                                                                                                      property title

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

                                                                                                                                                                      interface CircleData

                                                                                                                                                                      interface CircleData extends FacetData {}

                                                                                                                                                                        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

                                                                                                                                                                                      readonly field: string;

                                                                                                                                                                                        property value

                                                                                                                                                                                        readonly value: any;

                                                                                                                                                                                          property values

                                                                                                                                                                                          readonly values: any[];

                                                                                                                                                                                            interface CoordinateCfg

                                                                                                                                                                                            interface CoordinateCfg {}
                                                                                                                                                                                            • 极坐标系支持的配置属性

                                                                                                                                                                                            property endAngle

                                                                                                                                                                                            endAngle?: number;
                                                                                                                                                                                            • 用于极坐标,配置结束弧度。

                                                                                                                                                                                            property innerRadius

                                                                                                                                                                                            innerRadius?: number;
                                                                                                                                                                                            • 用于极坐标,极坐标内半径,0 -1 范围的数值。

                                                                                                                                                                                            property radius

                                                                                                                                                                                            radius?: number;
                                                                                                                                                                                            • 用于极坐标,配置极坐标半径,0 - 1 范围的数值。

                                                                                                                                                                                            property startAngle

                                                                                                                                                                                            startAngle?: number;
                                                                                                                                                                                            • 用于极坐标,配置起始弧度。