@visactor/vchart 1.7.1 → 1.7.3

package/esm/component/crosshair/config.d.ts

@@ -10,3 +10,9 @@ export declare function getDefaultCrosshairTriggerEventByMode(mode: RenderMode):
     hoverOut: string;
     clickOut: string;
 };
+export declare enum LayoutType {
+    ALL = 3,
+    HORIZONTAL = 2,
+    VERTICAL = 1,
+    NONE = 0
+}

package/esm/component/crosshair/config.js

@@ -15,4 +15,11 @@ export function getDefaultCrosshairTriggerEventByMode(mode) {
         clickOut: "pointerleave"
     } : null;
 }
+
+export var LayoutType;
+
+!function(LayoutType) {
+    LayoutType[LayoutType.ALL = 3] = "ALL", LayoutType[LayoutType.HORIZONTAL = 2] = "HORIZONTAL", 
+    LayoutType[LayoutType.VERTICAL = 1] = "VERTICAL", LayoutType[LayoutType.NONE = 0] = "NONE";
+}(LayoutType || (LayoutType = {}));
 //# sourceMappingURL=config.js.map

package/esm/component/crosshair/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/crosshair/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjE,MAAM,UAAU,qCAAqC,CAAC,IAAgB;IACpE,IAAI,IAAI,KAAK,cAAc,CAAC,iBAAiB,CAAC,IAAI,IAAI,KAAK,cAAc,CAAC,iBAAiB,CAAC,EAAE;QAC5F,OAAO;YACL,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,aAAa;YACpB,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,cAAc;SACzB,CAAC;KACH;IAED,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,EAAE;QACrD,OAAO;YACL,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC;YACrC,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,cAAc;SACzB,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC","file":"config.js","sourcesContent":["import type { RenderMode } from '../../typings/spec';\nimport { RenderModeEnum } from '../../typings/spec';\nimport { isMiniAppLikeMode, isMobileLikeMode } from '../../util';\n\nexport function getDefaultCrosshairTriggerEventByMode(mode: RenderMode) {\n  if (mode === RenderModeEnum['desktop-browser'] || mode === RenderModeEnum['desktop-miniApp']) {\n    return {\n      click: 'pointertap',\n      hover: 'pointermove',\n      hoverOut: 'pointerleave',\n      clickOut: 'pointerleave'\n    };\n  }\n\n  if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {\n    return {\n      click: 'tap',\n      hover: ['pointerdown', 'pointermove'],\n      hoverOut: 'pointerleave',\n      clickOut: 'pointerleave'\n    };\n  }\n\n  return null;\n}\n"]}
+{"version":3,"sources":["../src/component/crosshair/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjE,MAAM,UAAU,qCAAqC,CAAC,IAAgB;IACpE,IAAI,IAAI,KAAK,cAAc,CAAC,iBAAiB,CAAC,IAAI,IAAI,KAAK,cAAc,CAAC,iBAAiB,CAAC,EAAE;QAC5F,OAAO;YACL,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,aAAa;YACpB,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,cAAc;SACzB,CAAC;KACH;IAED,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,EAAE;QACrD,OAAO;YACL,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC;YACrC,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,cAAc;SACzB,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,yCAAY,CAAA;IACZ,uDAAmB,CAAA;IACnB,mDAAiB,CAAA;IACjB,2CAAa,CAAA;AACf,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","file":"config.js","sourcesContent":["import type { RenderMode } from '../../typings/spec';\nimport { RenderModeEnum } from '../../typings/spec';\nimport { isMiniAppLikeMode, isMobileLikeMode } from '../../util';\n\nexport function getDefaultCrosshairTriggerEventByMode(mode: RenderMode) {\n  if (mode === RenderModeEnum['desktop-browser'] || mode === RenderModeEnum['desktop-miniApp']) {\n    return {\n      click: 'pointertap',\n      hover: 'pointermove',\n      hoverOut: 'pointerleave',\n      clickOut: 'pointerleave'\n    };\n  }\n\n  if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {\n    return {\n      click: 'tap',\n      hover: ['pointerdown', 'pointermove'],\n      hoverOut: 'pointerleave',\n      clickOut: 'pointerleave'\n    };\n  }\n\n  return null;\n}\n\nexport enum LayoutType {\n  ALL = 0b0011,\n  HORIZONTAL = 0b0010,\n  VERTICAL = 0b0001,\n  NONE = 0b0000\n}\n"]}

package/esm/component/crosshair/interface/spec.d.ts

@@ -25,10 +25,10 @@ export interface IPolarCrosshairSpec extends ICommonCrosshairSpec {
 }
 export interface ICrosshairCategoryFieldSpec extends ICrosshairDataBindSpec {
     visible: boolean;
-    line?: ICrosshairLineSpec | ICrosshairRectSpec;
+    line?: ICrosshairLineSpec | Omit<ICrosshairRectSpec, 'width'>;
     label?: ICrosshairLabelSpec;
 }
-export interface ICrosshairValueFieldSpec {
+export interface ICrosshairValueFieldSpec extends ICrosshairDataBindSpec {
     visible: boolean;
     line?: ICrosshairLineSpec;
     label?: ICrosshairLabelSpec;
@@ -42,10 +42,14 @@ export interface ICrosshairLineSpec {
     smooth?: boolean;
     style?: ICrosshairLineStyle;
 }
+export type ICrosshairRectWidthCallback = (axisSize: {
+    width: number;
+    height: number;
+}, axis: IAxis) => number;
 export interface ICrosshairRectSpec {
     visible?: boolean;
     type?: 'rect';
-    width?: number | string;
+    width?: number | string | ICrosshairRectWidthCallback;
     style?: ICrosshairRectStyle;
 }
 export interface ICrosshairLabelSpec {

package/esm/component/crosshair/interface/spec.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/crosshair/interface/spec.ts"],"names":[],"mappings":"","file":"spec.js","sourcesContent":["import type { IPadding, StringOrNumber, ILineMarkSpec, IRectMarkSpec, ITextMarkSpec } from '../../../typings';\nimport type { IAxis } from '../../axis/interface';\nimport type { IComponentSpec } from '../../base/interface';\nimport type { IComponent } from '../../interface';\n\nexport interface ICrossHair extends IComponent {\n  clearAxisValue?: () => void;\n  setAxisValue?: (v: StringOrNumber, axis: IAxis) => void;\n  layoutByValue?: (v?: number) => void;\n  hide?: () => void;\n}\n\nexport type CrossHairTrigger = 'click' | 'hover' | ['click', 'hover'];\n\nexport interface ICommonCrosshairSpec extends IComponentSpec {\n  /**\n   * 是否可以通过 点击 固定住一组 crosshair，也可以同时触发。\n   * @default 'hover'\n   */\n  trigger?: CrossHairTrigger;\n  /**\n   * 隐藏crosshair的触发方式（目前仅支持和trigger一致的设置以及none）\n   */\n  triggerOff?: CrossHairTrigger | 'none';\n  /**\n   * crosshair 文本的显示层级\n   */\n  labelZIndex?: number;\n  /**\n   * crosshair 辅助图形的显示层级\n   */\n  gridZIndex?: number;\n}\n\nexport interface ICartesianCrosshairSpec extends ICommonCrosshairSpec {\n  /**\n   * 笛卡尔坐标系下 x 轴上 crosshair 配置\n   */\n  xField?: ICrosshairCategoryFieldSpec;\n  /**\n   * 笛卡尔坐标系下 y 轴上 crosshair 配置\n   */\n  yField?: ICrosshairCategoryFieldSpec;\n}\n\nexport interface IPolarCrosshairSpec extends ICommonCrosshairSpec {\n  /**\n   * 极坐标系下 categoryField 字段对应轴上的 crosshair 配置\n   */\n  categoryField?: ICrosshairCategoryFieldSpec;\n  /**\n   * 极坐标系下 valueField 字段对应轴上的 crosshair 配置\n   */\n  valueField?: ICrosshairValueFieldSpec;\n}\nexport interface ICrosshairCategoryFieldSpec extends ICrosshairDataBindSpec {\n  /**\n   * 是否可见\n   */\n  visible: boolean;\n  /**\n   * crosshair 辅助图形配置\n   */\n  line?: ICrosshairLineSpec | ICrosshairRectSpec;\n  /**\n   * crosshair 文本配置\n   */\n  label?: ICrosshairLabelSpec;\n}\n\nexport interface ICrosshairValueFieldSpec {\n  /**\n   * 是否可见\n   */\n  visible: boolean;\n  /**\n   * crosshair 辅助图形配置\n   */\n  line?: ICrosshairLineSpec;\n  /**\n   * crosshair 文本配置\n   */\n  label?: ICrosshairLabelSpec;\n}\n\nexport type ICrosshairLineStyle = Pick<\n  ILineMarkSpec,\n  'stroke' | 'strokeOpacity' | 'opacity' | 'lineDash' | 'lineWidth'\n>;\nexport type ICrosshairRectStyle = ICrosshairLineStyle & Pick<IRectMarkSpec, 'fill' | 'fillOpacity' | 'cornerRadius'>;\n\nexport interface ICrosshairLineSpec {\n  visible?: boolean;\n  type?: 'line';\n  /**\n   * 线宽\n   * @default 2\n   */\n  width?: number;\n  /** 极坐标系下是否平滑 */\n  smooth?: boolean;\n  style?: ICrosshairLineStyle;\n}\n\nexport interface ICrosshairRectSpec {\n  visible?: boolean;\n  type?: 'rect';\n  /**\n   * 字符串xx%表示此处是内容区间的百分比，数字表示宽度像素\n   * @default '100%''\n   */\n  width?: number | string;\n  style?: ICrosshairRectStyle;\n}\n\nexport interface ICrosshairLabelSpec {\n  visible?: boolean;\n  /**\n   * label 文本格式化方法\n   * @param text\n   * @returns\n   */\n  formatMethod?: (text: StringOrNumber | string[]) => string | string[];\n  /**\n   * 文本样式配置\n   */\n  style?: Partial<ITextMarkSpec>;\n  /**\n   * 文本背景相关配置\n   */\n  labelBackground?: ICrosshairLabelBackgroundSpec;\n}\n\nexport interface ICrosshairLabelBackgroundSpec {\n  /**\n   * 是否显示背景，默认为 true\n   */\n  visible?: boolean;\n  /**\n   * 最小宽度，像素值\n   * @default 30\n   */\n  minWidth?: number;\n  /**\n   * 最大宽度，像素值。当文字超过最大宽度时，会自动省略。\n   */\n  maxWidth?: number;\n  /**\n   * 内部边距\n   */\n  padding?: IPadding | number | number[];\n  style?: Partial<IRectMarkSpec>;\n}\n\nexport interface ICrosshairDataBindSpec {\n  /**\n   * 声明 crosshair 绑定的轴索引，如果没有声明，则会默认绑定所有同 crosshair 位置相对应的轴。\n   */\n  bindingAxesIndex?: number[];\n  /**\n   * crosshair 初始化显示信息，通过该配置可在图表绘制时默认展示 crosshair 组件。\n   */\n  defaultSelect?: {\n    /**\n     * 声明要显示数据的轴索引\n     */\n    axisIndex: number;\n    /**\n     * 声明显示的数据\n     */\n    datum: StringOrNumber;\n  };\n}\n\nexport type ICrosshairSpec = ICartesianCrosshairSpec | IPolarCrosshairSpec;\n"]}
+{"version":3,"sources":["../src/component/crosshair/interface/spec.ts"],"names":[],"mappings":"","file":"spec.js","sourcesContent":["import type { IPadding, StringOrNumber, ILineMarkSpec, IRectMarkSpec, ITextMarkSpec } from '../../../typings';\nimport type { IAxis } from '../../axis/interface';\nimport type { IComponentSpec } from '../../base/interface';\nimport type { IComponent } from '../../interface';\n\nexport interface ICrossHair extends IComponent {\n  clearAxisValue?: () => void;\n  setAxisValue?: (v: StringOrNumber, axis: IAxis) => void;\n  layoutByValue?: (v?: number) => void;\n  hide?: () => void;\n}\n\nexport type CrossHairTrigger = 'click' | 'hover' | ['click', 'hover'];\n\nexport interface ICommonCrosshairSpec extends IComponentSpec {\n  /**\n   * 是否可以通过 点击 固定住一组 crosshair，也可以同时触发。\n   * @default 'hover'\n   */\n  trigger?: CrossHairTrigger;\n  /**\n   * 隐藏crosshair的触发方式（目前仅支持和trigger一致的设置以及none）\n   */\n  triggerOff?: CrossHairTrigger | 'none';\n  /**\n   * crosshair 文本的显示层级\n   */\n  labelZIndex?: number;\n  /**\n   * crosshair 辅助图形的显示层级\n   */\n  gridZIndex?: number;\n}\n\nexport interface ICartesianCrosshairSpec extends ICommonCrosshairSpec {\n  /**\n   * 笛卡尔坐标系下 x 轴上 crosshair 配置\n   */\n  xField?: ICrosshairCategoryFieldSpec;\n  /**\n   * 笛卡尔坐标系下 y 轴上 crosshair 配置\n   */\n  yField?: ICrosshairCategoryFieldSpec;\n}\n\nexport interface IPolarCrosshairSpec extends ICommonCrosshairSpec {\n  /**\n   * 极坐标系下 categoryField 字段对应轴上的 crosshair 配置\n   */\n  categoryField?: ICrosshairCategoryFieldSpec;\n  /**\n   * 极坐标系下 valueField 字段对应轴上的 crosshair 配置\n   */\n  valueField?: ICrosshairValueFieldSpec;\n}\nexport interface ICrosshairCategoryFieldSpec extends ICrosshairDataBindSpec {\n  /**\n   * 是否可见\n   */\n  visible: boolean;\n  /**\n   * crosshair 辅助图形配置\n   */\n  line?: ICrosshairLineSpec | Omit<ICrosshairRectSpec, 'width'>;\n  /**\n   * crosshair 文本配置\n   */\n  label?: ICrosshairLabelSpec;\n}\n\nexport interface ICrosshairValueFieldSpec extends ICrosshairDataBindSpec {\n  /**\n   * 是否可见\n   */\n  visible: boolean;\n  /**\n   * crosshair 辅助图形配置\n   */\n  line?: ICrosshairLineSpec;\n  /**\n   * crosshair 文本配置\n   */\n  label?: ICrosshairLabelSpec;\n}\n\nexport type ICrosshairLineStyle = Pick<\n  ILineMarkSpec,\n  'stroke' | 'strokeOpacity' | 'opacity' | 'lineDash' | 'lineWidth'\n>;\nexport type ICrosshairRectStyle = ICrosshairLineStyle & Pick<IRectMarkSpec, 'fill' | 'fillOpacity' | 'cornerRadius'>;\n\nexport interface ICrosshairLineSpec {\n  visible?: boolean;\n  type?: 'line';\n  /**\n   * 线宽\n   * @default 2\n   */\n  width?: number;\n  /** 极坐标系下是否平滑 */\n  smooth?: boolean;\n  style?: ICrosshairLineStyle;\n}\n\nexport type ICrosshairRectWidthCallback = (axisSize: { width: number; height: number }, axis: IAxis) => number;\n\nexport interface ICrosshairRectSpec {\n  visible?: boolean;\n  type?: 'rect';\n  /**\n   * 字符串xx%表示此处是内容区间的百分比，数字表示宽度像素，\n   * 仅支持笛卡尔坐标系下的 crosshair 配置\n   * @default '100%''\n   */\n  width?: number | string | ICrosshairRectWidthCallback;\n  style?: ICrosshairRectStyle;\n}\n\nexport interface ICrosshairLabelSpec {\n  visible?: boolean;\n  /**\n   * label 文本格式化方法\n   * @param text\n   * @returns\n   */\n  formatMethod?: (text: StringOrNumber | string[]) => string | string[];\n  /**\n   * 文本样式配置\n   */\n  style?: Partial<ITextMarkSpec>;\n  /**\n   * 文本背景相关配置\n   */\n  labelBackground?: ICrosshairLabelBackgroundSpec;\n}\n\nexport interface ICrosshairLabelBackgroundSpec {\n  /**\n   * 是否显示背景，默认为 true\n   */\n  visible?: boolean;\n  /**\n   * 最小宽度，像素值\n   * @default 30\n   */\n  minWidth?: number;\n  /**\n   * 最大宽度，像素值。当文字超过最大宽度时，会自动省略。\n   */\n  maxWidth?: number;\n  /**\n   * 内部边距\n   */\n  padding?: IPadding | number | number[];\n  style?: Partial<IRectMarkSpec>;\n}\n\nexport interface ICrosshairDataBindSpec {\n  /**\n   * 声明 crosshair 绑定的轴索引，如果没有声明，则会默认绑定所有同 crosshair 位置相对应的轴。\n   */\n  bindingAxesIndex?: number[];\n  /**\n   * crosshair 初始化显示信息，通过该配置可在图表绘制时默认展示 crosshair 组件。\n   */\n  defaultSelect?: {\n    /**\n     * 声明要显示数据的轴索引\n     */\n    axisIndex: number;\n    /**\n     * 声明显示的数据\n     */\n    datum: StringOrNumber;\n  };\n}\n\nexport type ICrosshairSpec = ICartesianCrosshairSpec | IPolarCrosshairSpec;\n"]}

package/esm/component/crosshair/polar.d.ts

@@ -1,80 +1,38 @@
 import type { IComponentOption } from '../interface';
 import { ComponentTypeEnum } from '../interface/type';
 import type { IPolarCrosshairSpec } from './interface';
-import type { IPolarAxis } from '../axis/polar/interface';
-import type { IPoint, StringOrNumber } from '../../typings';
-import type { IHair } from './base';
 import { BaseCrossHair } from './base';
 import type { IGraphic } from '@visactor/vrender-core';
-type IBound = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};
-type IAxisInfo = Map<number, IBound & {
-    axis: IPolarAxis;
-}>;
 export declare class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrosshairSpec> extends BaseCrossHair<T> {
     static specKey: string;
     specKey: string;
     static type: ComponentTypeEnum;
     type: ComponentTypeEnum;
     name: string;
-    currValueX: Map<number, {
-        v: StringOrNumber;
-        axis: IPolarAxis;
-        [key: string]: any;
-    }>;
-    currValueY: Map<number, {
-        v: StringOrNumber;
-        axis: IPolarAxis;
-        [key: string]: any;
-    }>;
-    xHair: IHair | undefined;
-    yHair: (IHair & {
-        smooth: boolean;
-    }) | undefined;
-    private _cacheXCrossHairInfo;
-    private _cacheYCrossHairInfo;
+    private _currValueAngle;
+    private _currValueRadius;
+    private _angleHair;
+    private _radiusHair;
+    private _cacheAngleCrossHairInfo;
+    private _cacheRadiusCrossHairInfo;
     private _radiusCrosshair;
     private _radiusLabelCrosshair;
     private _angleCrosshair;
     private _angleLabelCrosshair;
     static createComponent(spec: any, options: IComponentOption): PolarCrossHair<any> | PolarCrossHair<IPolarCrosshairSpec>[];
     constructor(spec: T, options: IComponentOption);
-    protected _showDefaultCrosshair(): void;
+    protected _showDefaultCrosshairBySpec(): void;
+    private _defaultCrosshair;
     hide(): void;
-    findAllAxisContains(relativeX: number, relativeY: number): {
-        xAxisMap: Map<number, {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        } & {
-            axis: IPolarAxis;
-        }>;
-        yAxisMap: Map<number, {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        } & {
-            axis: IPolarAxis;
-        }>;
-    };
-    getAllAxisValues(axisMap: IAxisInfo, point: IPoint, currValue: Map<number, {
-        v: StringOrNumber;
-        axis: IPolarAxis;
-        [key: string]: any;
-    }>): boolean;
+    private _findAllAxisContains;
+    private _getAllAxisValues;
+    private _getValueByAxis;
     protected _layoutCrosshair(relativeX: number, relativeY: number): void;
-    private layoutByValue;
+    layoutByValue(tag?: number): void;
     private _layoutVertical;
     private _layoutHorizontal;
     protected _parseFieldInfo(): void;
     private _updateCrosshairLabel;
-    getVRenderComponents(): IGraphic[];
+    protected _getNeedClearVRenderComponents(): IGraphic[];
 }
 export declare const registerPolarCrossHair: () => void;
-export {};

package/esm/component/crosshair/polar.js

@@ -1,4 +1,4 @@
-var LayoutType, __rest = this && this.__rest || function(s, e) {
+var __rest = this && this.__rest || function(s, e) {
     var t = {};
     for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
     if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -30,10 +30,7 @@ import { getAxisLabelOffset } from "../axis/util";
 
 import { Factory } from "../../core/factory";
 
-!function(LayoutType) {
-    LayoutType[LayoutType.ALL = 3] = "ALL", LayoutType[LayoutType.HORIZONTAL = 2] = "HORIZONTAL", 
-    LayoutType[LayoutType.VERTICAL = 1] = "VERTICAL", LayoutType[LayoutType.NONE = 0] = "NONE";
-}(LayoutType || (LayoutType = {}));
+import { LayoutType } from "./config";
 
 export class PolarCrossHair extends BaseCrossHair {
     static createComponent(spec, options) {
@@ -49,71 +46,104 @@ export class PolarCrossHair extends BaseCrossHair {
     }
     constructor(spec, options) {
         super(spec, options), this.specKey = "crosshair", this.type = ComponentTypeEnum.polarCrosshair, 
-        this.name = ComponentTypeEnum.polarCrosshair, this.currValueX = new Map, this.currValueY = new Map;
+        this.name = ComponentTypeEnum.polarCrosshair, this._currValueAngle = new Map, this._currValueRadius = new Map;
     }
-    _showDefaultCrosshair() {
-        this.showDefault;
+    _showDefaultCrosshairBySpec() {
+        const {categoryField: categoryField, valueField: valueField} = this._spec;
+        if ((null == categoryField ? void 0 : categoryField.visible) && categoryField.defaultSelect) {
+            const {axisIndex: axisIndex, datum: datum} = categoryField.defaultSelect;
+            this._defaultCrosshair(axisIndex, datum, LayoutType.VERTICAL);
+        }
+        if ((null == valueField ? void 0 : valueField.visible) && valueField.defaultSelect) {
+            const {axisIndex: axisIndex, datum: datum} = valueField.defaultSelect;
+            this._defaultCrosshair(axisIndex, datum, LayoutType.HORIZONTAL);
+        }
+    }
+    _defaultCrosshair(axisIndex, datum, tag) {
+        const axis = this._option.getComponentsByKey("axes").find((c => c.getSpecIndex() === axisIndex));
+        if (axis) {
+            if (tag === LayoutType.VERTICAL) {
+                this._currValueAngle.clear();
+                const polarCoord = {
+                    angle: axis.valueToPosition(datum),
+                    radius: axis.getOuterRadius()
+                }, canvasPosition = axis.coordToPoint(polarCoord);
+                this._currValueAngle.set(axisIndex, this._getValueByAxis(axis, canvasPosition));
+            } else {
+                this._currValueRadius.clear();
+                const polarCoord = {
+                    angle: axis.startAngle,
+                    radius: axis.valueToPosition(datum)
+                }, canvasPosition = axis.coordToPoint(polarCoord);
+                this._currValueRadius.set(axisIndex, this._getValueByAxis(axis, canvasPosition));
+            }
+            this.layoutByValue(LayoutType.ALL);
+        }
     }
     hide() {
         this._radiusCrosshair && this._radiusCrosshair.hideAll(), this._radiusLabelCrosshair && this._radiusLabelCrosshair.hideAll(), 
         this._angleCrosshair && this._angleCrosshair.hideAll(), this._angleLabelCrosshair && this._angleLabelCrosshair.hideAll();
     }
-    findAllAxisContains(relativeX, relativeY) {
-        const xAxisMap = this._getAxisInfoByField("category"), yAxisMap = this._getAxisInfoByField("value");
+    _findAllAxisContains(relativeX, relativeY) {
+        const angleAxisMap = this._getAxisInfoByField("category"), radiusAxisMap = this._getAxisInfoByField("value");
         return {
-            xAxisMap: this._filterAxisByPoint(xAxisMap, relativeX, relativeY),
-            yAxisMap: this._filterAxisByPoint(yAxisMap, relativeX, relativeY)
+            angleAxisMap: this._filterAxisByPoint(angleAxisMap, relativeX, relativeY),
+            radiusAxisMap: this._filterAxisByPoint(radiusAxisMap, relativeX, relativeY)
         };
     }
-    getAllAxisValues(axisMap, point, currValue) {
+    _getAllAxisValues(axisMap, point, currValue) {
         let discrete = !1;
         return axisMap.forEach((item => {
             isDiscrete(item.axis.getScale().type) && (discrete ? this.enable = !1 : discrete = !0);
         })), !!this.enable && (axisMap.forEach(((item, id) => {
-            const axis = item.axis, {x: axisStartX, y: axisStartY} = item.axis.getLayoutStartPoint(), {x: x, y: y} = this.getLayoutStartPoint();
-            let value = axis.positionToData({
-                x: point.x - (axisStartX - x),
-                y: point.y - (axisStartY - y)
-            });
-            isContinuous(axis.getScale().type) && isValidNumber(+value) && (value = (+value).toFixed(2));
-            const center = {
-                x: axis.getCenter().x + this.getLayoutStartPoint().x,
-                y: axis.getCenter().y + this.getLayoutStartPoint().y
-            };
-            currValue.set(id, {
-                v: value,
-                axis: item.axis,
-                center: center,
-                innerRadius: axis.getInnerRadius(),
-                radius: axis.getOuterRadius(),
-                startAngle: axis.startAngle,
-                endAngle: axis.endAngle,
-                distance: PointService.distancePP(point, axis.getCenter()),
-                coord: axis.pointToCoord(point),
-                point: point
-            });
+            const axis = item.axis;
+            currValue.set(id, this._getValueByAxis(axis, point));
         })), !0);
     }
+    _getValueByAxis(axis, point) {
+        const {x: axisStartX, y: axisStartY} = axis.getLayoutStartPoint(), {x: x, y: y} = this.getLayoutStartPoint();
+        let value = axis.positionToData({
+            x: point.x - (axisStartX - x),
+            y: point.y - (axisStartY - y)
+        });
+        isContinuous(axis.getScale().type) && isValidNumber(+value) && (value = (+value).toFixed(2));
+        const center = {
+            x: axis.getCenter().x + this.getLayoutStartPoint().x,
+            y: axis.getCenter().y + this.getLayoutStartPoint().y
+        };
+        return {
+            v: value,
+            axis: axis,
+            center: center,
+            innerRadius: axis.getInnerRadius(),
+            radius: axis.getOuterRadius(),
+            startAngle: axis.startAngle,
+            endAngle: axis.endAngle,
+            distance: PointService.distancePP(point, axis.getCenter()),
+            coord: axis.pointToCoord(point),
+            point: point
+        };
+    }
     _layoutCrosshair(relativeX, relativeY) {
-        const {xAxisMap: xAxisMap, yAxisMap: yAxisMap} = this.findAllAxisContains(relativeX, relativeY);
-        if (0 !== xAxisMap.size || 0 !== yAxisMap.size) this.currValueX.clear(), this.currValueY.clear(), 
-        xAxisMap && this.getAllAxisValues(xAxisMap, {
+        const {angleAxisMap: angleAxisMap, radiusAxisMap: radiusAxisMap} = this._findAllAxisContains(relativeX, relativeY);
+        if (0 !== angleAxisMap.size || 0 !== radiusAxisMap.size) this._currValueAngle.clear(), 
+        this._currValueRadius.clear(), angleAxisMap && this._getAllAxisValues(angleAxisMap, {
             x: relativeX,
             y: relativeY
-        }, this.currValueX), yAxisMap && this.getAllAxisValues(yAxisMap, {
+        }, this._currValueAngle), radiusAxisMap && this._getAllAxisValues(radiusAxisMap, {
             x: relativeX,
             y: relativeY
-        }, this.currValueY), this.layoutByValue(LayoutType.ALL); else {
+        }, this._currValueRadius), this.layoutByValue(LayoutType.ALL); else {
             if (this.enableRemain) return;
             this.hide();
         }
     }
-    layoutByValue(tag) {
+    layoutByValue(tag = LayoutType.ALL) {
         var _a, _b, _c, _d;
         if (!this.enable) return;
         const series = this._firstSeries();
         if (!series) return;
-        let xCrossHairInfo = {
+        let angleCrossHairInfo = {
             x: 0,
             y: 0,
             center: {
@@ -131,7 +161,7 @@ export class PolarCrossHair extends BaseCrossHair {
                 text: "",
                 offset: 0
             }
-        }, yCrossHairInfo = {
+        }, radiusCrossHairInfo = {
             x: 0,
             y: 0,
             center: {
@@ -151,35 +181,36 @@ export class PolarCrossHair extends BaseCrossHair {
                 offset: 0
             }
         };
-        if (this.xHair) {
-            xCrossHairInfo.visible = !!this.currValueX.size;
+        if (this._angleHair) {
+            angleCrossHairInfo.visible = !!this._currValueAngle.size;
             const bandWidth = series.angleAxisHelper.getBandwidth(0);
-            this.currValueX.forEach((_a => {
+            this._currValueAngle.forEach((_a => {
                 var _b, {axis: axis, v: v, coord: coord} = _a, rest = __rest(_a, [ "axis", "v", "coord" ]);
-                v = null != v ? v : "", mergeSpec(xCrossHairInfo, rest);
+                v = null != v ? v : "", mergeSpec(angleCrossHairInfo, rest);
                 const angle = series.angleAxisHelper.dataToPosition([ v ]);
-                xCrossHairInfo.angle = angle, (null === (_b = this.xHair.label) || void 0 === _b ? void 0 : _b.visible) && (xCrossHairInfo.label.visible = !0, 
-                xCrossHairInfo.label.text = v, xCrossHairInfo.label.offset = getAxisLabelOffset(axis.getSpec())), 
-                xCrossHairInfo.startAngle = angle - bandWidth / 2, xCrossHairInfo.endAngle = angle + bandWidth / 2;
+                angleCrossHairInfo.angle = angle, (null === (_b = this._angleHair.label) || void 0 === _b ? void 0 : _b.visible) && (angleCrossHairInfo.label.visible = !0, 
+                angleCrossHairInfo.label.text = v, angleCrossHairInfo.label.offset = getAxisLabelOffset(axis.getSpec())), 
+                angleCrossHairInfo.startAngle = angle - bandWidth / 2, angleCrossHairInfo.endAngle = angle + bandWidth / 2;
             }));
         }
-        if (this.yHair && (yCrossHairInfo.visible = !!this.currValueY.size, this.currValueY.forEach((_a => {
+        if (this._radiusHair && (radiusCrossHairInfo.visible = !!this._currValueRadius.size, 
+        this._currValueRadius.forEach((_a => {
             var _b, {axis: axis, v: v, coord: coord} = _a, rest = __rest(_a, [ "axis", "v", "coord" ]);
-            v = null != v ? v : "", (null === (_b = this.yHair.label) || void 0 === _b ? void 0 : _b.visible) && (yCrossHairInfo.label.visible = !0, 
-            yCrossHairInfo.label.text = v, yCrossHairInfo.label.offset = getAxisLabelOffset(axis.getSpec())), 
-            yCrossHairInfo.angle = coord.angle, yCrossHairInfo.axis = axis, mergeSpec(yCrossHairInfo, rest);
-        }))), this.enableRemain && !xCrossHairInfo.visible && isValid(this._cacheXCrossHairInfo)) xCrossHairInfo = this._cacheXCrossHairInfo; else if ((null === (_b = null === (_a = this.xHair) || void 0 === _a ? void 0 : _a.label) || void 0 === _b ? void 0 : _b.formatMethod) && xCrossHairInfo.label.visible) {
-            const {label: label} = xCrossHairInfo;
-            label.text = this.xHair.label.formatMethod(label.text, "angle");
+            v = null != v ? v : "", (null === (_b = this._radiusHair.label) || void 0 === _b ? void 0 : _b.visible) && (radiusCrossHairInfo.label.visible = !0, 
+            radiusCrossHairInfo.label.text = v, radiusCrossHairInfo.label.offset = getAxisLabelOffset(axis.getSpec())), 
+            radiusCrossHairInfo.angle = coord.angle, radiusCrossHairInfo.axis = axis, mergeSpec(radiusCrossHairInfo, rest);
+        }))), this.enableRemain && !angleCrossHairInfo.visible && isValid(this._cacheAngleCrossHairInfo)) angleCrossHairInfo = this._cacheAngleCrossHairInfo; else if ((null === (_b = null === (_a = this._angleHair) || void 0 === _a ? void 0 : _a.label) || void 0 === _b ? void 0 : _b.formatMethod) && angleCrossHairInfo.label.visible) {
+            const {label: label} = angleCrossHairInfo;
+            label.text = this._angleHair.label.formatMethod(label.text, "angle");
         }
-        if (this.enableRemain && !yCrossHairInfo.visible && isValid(this._cacheYCrossHairInfo)) yCrossHairInfo = this._cacheYCrossHairInfo; else if ((null === (_d = null === (_c = this.yHair) || void 0 === _c ? void 0 : _c.label) || void 0 === _d ? void 0 : _d.formatMethod) && yCrossHairInfo.label.visible) {
-            const {label: label} = yCrossHairInfo;
-            label.text = this.yHair.label.formatMethod(label.text, "radius");
+        if (this.enableRemain && !radiusCrossHairInfo.visible && isValid(this._cacheRadiusCrossHairInfo)) radiusCrossHairInfo = this._cacheRadiusCrossHairInfo; else if ((null === (_d = null === (_c = this._radiusHair) || void 0 === _c ? void 0 : _c.label) || void 0 === _d ? void 0 : _d.formatMethod) && radiusCrossHairInfo.label.visible) {
+            const {label: label} = radiusCrossHairInfo;
+            label.text = this._radiusHair.label.formatMethod(label.text, "radius");
         }
-        tag && (LayoutType.HORIZONTAL && this._layoutHorizontal(yCrossHairInfo), LayoutType.VERTICAL && this._layoutVertical(xCrossHairInfo)), 
-        this.enableRemain && (this._cacheXCrossHairInfo = Object.assign(Object.assign({}, xCrossHairInfo), {
+        tag && (LayoutType.HORIZONTAL && this._layoutHorizontal(radiusCrossHairInfo), LayoutType.VERTICAL && this._layoutVertical(angleCrossHairInfo)), 
+        this.enableRemain && (this._cacheAngleCrossHairInfo = Object.assign(Object.assign({}, angleCrossHairInfo), {
             _isCache: !0
-        }), this._cacheYCrossHairInfo = Object.assign(Object.assign({}, yCrossHairInfo), {
+        }), this._cacheRadiusCrossHairInfo = Object.assign(Object.assign({}, radiusCrossHairInfo), {
             _isCache: !0
         }));
     }
@@ -188,7 +219,7 @@ export class PolarCrossHair extends BaseCrossHair {
         if (crosshairInfo._isCache && this.enableRemain) return;
         const container = this.getContainer(), {angle: angle, innerRadius: innerRadius, radius: radius, label: label, startAngle: startAngle, endAngle: endAngle, center: center, visible: visible} = crosshairInfo;
         if (visible) {
-            const crosshairType = "rect" === this.xHair.type ? "sector" : "line";
+            const crosshairType = "rect" === this._angleHair.type ? "sector" : "line";
             let positionAttrs;
             if (positionAttrs = "sector" === crosshairType ? {
                 center: center,
@@ -202,16 +233,16 @@ export class PolarCrossHair extends BaseCrossHair {
             }, this._angleCrosshair) this._angleCrosshair.setAttributes(positionAttrs); else {
                 let crosshair;
                 "line" === crosshairType ? crosshair = new LineCrosshair(Object.assign(Object.assign({}, positionAttrs), {
-                    lineStyle: this.xHair.style,
+                    lineStyle: this._angleHair.style,
                     zIndex: this.gridZIndex
                 })) : "sector" === crosshairType && (crosshair = new SectorCrosshair(Object.assign(Object.assign({}, positionAttrs), {
-                    sectorStyle: this.xHair.style,
+                    sectorStyle: this._angleHair.style,
                     zIndex: this.gridZIndex
                 }))), this._angleCrosshair = crosshair, container.add(crosshair);
             }
             if (label.visible) {
-                const orient = angleLabelOrientAttribute(angle), labelAttrs = Object.assign(Object.assign(Object.assign(Object.assign({}, polarToCartesian(center, radius + label.offset, angle)), this.xHair.label), label), {
-                    textStyle: Object.assign(Object.assign({}, null === (_a = this.xHair.label) || void 0 === _a ? void 0 : _a.textStyle), {
+                const orient = angleLabelOrientAttribute(angle), labelAttrs = Object.assign(Object.assign(Object.assign(Object.assign({}, polarToCartesian(center, radius + label.offset, angle)), this._angleHair.label), label), {
+                    textStyle: Object.assign(Object.assign({}, null === (_a = this._angleHair.label) || void 0 === _a ? void 0 : _a.textStyle), {
                         textAlign: orient.align,
                         textBaseline: orient.baseline
                     }),
@@ -228,7 +259,7 @@ export class PolarCrossHair extends BaseCrossHair {
         if (crosshairInfo._isCache && this.enableRemain) return;
         const {center: center, startAngle: startAngle, endAngle: endAngle, distance: distance, sides: sides, axis: axis, label: label, point: point, radius: radius, innerRadius: innerRadius, visible: visible} = crosshairInfo, container = this.getContainer();
         if (visible) {
-            const crosshairType = this.yHair.smooth ? "circle" : "polygon";
+            const crosshairType = this._radiusHair.smooth ? "circle" : "polygon";
             let polygonRadius = distance;
             if ("polygon" === crosshairType) {
                 const axisCenter = axis.getCenter(), curAngle = getAngleByPoint(axisCenter, point), stepAngle = (endAngle - startAngle) / sides, index = Math.floor((curAngle - startAngle) / stepAngle), preAngle = index * stepAngle + startAngle, nextAngle = Math.min((index + 1) * stepAngle + startAngle, endAngle), prePoint = polarToCartesian(axisCenter, distance, preAngle), nextPoint = polarToCartesian(axisCenter, distance, nextAngle), insertPoint = getIntersectPoint([ nextPoint.x, nextPoint.y ], [ prePoint.x, prePoint.y ], [ axisCenter.x, axisCenter.y ], [ point.x, point.y ]);
@@ -244,16 +275,16 @@ export class PolarCrossHair extends BaseCrossHair {
             if (this._radiusCrosshair) this._radiusCrosshair.setAttributes(positionAttrs); else {
                 let crosshair;
                 crosshair = "polygon" === crosshairType ? new PolygonCrosshair(Object.assign(Object.assign({}, positionAttrs), {
-                    lineStyle: this.yHair.style,
+                    lineStyle: this._radiusHair.style,
                     zIndex: this.gridZIndex + 1
                 })) : new CircleCrosshair(Object.assign(Object.assign({}, positionAttrs), {
-                    lineStyle: this.yHair.style,
+                    lineStyle: this._radiusHair.style,
                     zIndex: this.gridZIndex
                 })), this._radiusCrosshair = crosshair, container.add(crosshair);
             }
             if (label.visible) {
-                const orient = radiusLabelOrientAttribute(startAngle), labelAttrs = Object.assign(Object.assign(Object.assign(Object.assign({}, polarToCartesian(center, polygonRadius, startAngle)), this.yHair.label), label), {
-                    textStyle: Object.assign(Object.assign({}, null === (_a = this.yHair.label) || void 0 === _a ? void 0 : _a.textStyle), {
+                const orient = radiusLabelOrientAttribute(startAngle), labelAttrs = Object.assign(Object.assign(Object.assign(Object.assign({}, polarToCartesian(center, polygonRadius, startAngle)), this._radiusHair.label), label), {
+                    textStyle: Object.assign(Object.assign({}, null === (_a = this._radiusHair.label) || void 0 === _a ? void 0 : _a.textStyle), {
                         textAlign: orient.align,
                         textBaseline: orient.baseline
                     }),
@@ -267,17 +298,17 @@ export class PolarCrossHair extends BaseCrossHair {
     }
     _parseFieldInfo() {
         var _a;
-        const {categoryField: categoryField, valueField: valueField} = this._crosshairConfig;
-        categoryField && categoryField.visible && (this.xHair = this._parseField(categoryField, "categoryField")), 
-        valueField && valueField.visible && (this.yHair = this._parseField(valueField, "valueField"), 
-        this.yHair.smooth = null === (_a = null == valueField ? void 0 : valueField.line) || void 0 === _a ? void 0 : _a.smooth);
+        const {categoryField: categoryField, valueField: valueField} = this._spec;
+        categoryField && categoryField.visible && (this._angleHair = this._parseField(categoryField, "categoryField")), 
+        valueField && valueField.visible && (this._radiusHair = this._parseField(valueField, "valueField"), 
+        this._radiusHair.smooth = null === (_a = null == valueField ? void 0 : valueField.line) || void 0 === _a ? void 0 : _a.smooth);
     }
     _updateCrosshairLabel(label, labelAttrs, callback) {
         const container = this.getContainer();
-        label ? label.setAttributes(labelAttrs) : (label = new Tag(labelAttrs), container.add(label), 
+        label ? label.setAttributes(labelAttrs) : (label = new Tag(labelAttrs), null == container || container.add(label), 
         callback(label)), limitTagInBounds(label, this._getLimitBounds());
     }
-    getVRenderComponents() {
+    _getNeedClearVRenderComponents() {
         return [ this._radiusCrosshair, this._radiusLabelCrosshair, this._angleCrosshair, this._angleLabelCrosshair ];
     }
 }