@visactor/vchart 1.7.2 → 1.7.3

package/cjs/component/crosshair/cartesian.d.ts

@@ -1,7 +1,6 @@
 import type { IComponentOption } from '../interface';
 import { ComponentTypeEnum } from '../interface/type';
 import type { ICartesianCrosshairSpec } from './interface';
-import type { IHair } from './base';
 import { BaseCrossHair } from './base';
 import type { IGraphic } from '@visactor/vrender-core';
 import type { IAxis } from '../axis/interface';
@@ -12,16 +11,8 @@ export declare class CartesianCrossHair<T extends ICartesianCrosshairSpec = ICar
     static type: ComponentTypeEnum;
     type: ComponentTypeEnum;
     name: string;
-    currValueX: Map<number, {
-        v: StringOrNumber;
-        axis: IAxis;
-    }>;
-    currValueY: Map<number, {
-        v: StringOrNumber;
-        axis: IAxis;
-    }>;
-    xHair: IHair | undefined;
-    yHair: IHair | undefined;
+    private _xHair;
+    private _yHair;
     private _cacheXCrossHairInfo;
     private _cacheYCrossHairInfo;
     private _xCrosshair;
@@ -30,37 +21,23 @@ export declare class CartesianCrossHair<T extends ICartesianCrosshairSpec = ICar
     private _yCrosshair;
     private _yLeftLabel;
     private _yRightLabel;
+    private _currValueX;
+    private _currValueY;
     static createComponent(spec: any, options: IComponentOption): CartesianCrossHair<any> | CartesianCrossHair<ICartesianCrosshairSpec>[];
     constructor(spec: T, options: IComponentOption);
-    protected _showDefaultCrosshair(): void;
-    private defaultCrosshair;
-    findAllAxisContains(relativeX: number, relativeY: number): {
-        xAxisMap: Map<number, {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        } & {
-            axis: IAxis;
-        }>;
-        yAxisMap: Map<number, {
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-        } & {
-            axis: IAxis;
-        }>;
-    };
-    private getValueAt;
+    protected _showDefaultCrosshairBySpec(): void;
+    private _defaultCrosshair;
+    private _findAllAxisContains;
+    private _getValueAt;
     clearAxisValue(): void;
     setAxisValue(v: StringOrNumber, axis: IAxis): void;
-    private getAllAxisValues;
+    private _getAllAxisValues;
     protected _layoutCrosshair(relativeX: number, relativeY: number): void;
     hide(): void;
-    private layoutByValue;
+    layoutByValue(tag?: number): void;
     private _layoutVertical;
     private _layoutHorizontal;
+    private _getRectSize;
     protected _parseFieldInfo(): void;
     private _updateCrosshair;
     private _updateCrosshairLabel;

package/cjs/component/crosshair/cartesian.js

@@ -4,14 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.registerCartesianCrossHair = exports.CartesianCrossHair = void 0;
 
-const vutils_1 = require("@visactor/vutils"), type_1 = require("../interface/type"), vscale_1 = require("@visactor/vscale"), vrender_components_1 = require("@visactor/vrender-components"), base_1 = require("./base"), util_1 = require("./util"), util_2 = require("../axis/util"), common_1 = require("../axis/cartesian/util/common"), factory_1 = require("../../core/factory");
-
-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 = {}));
+const vutils_1 = require("@visactor/vutils"), type_1 = require("../interface/type"), vscale_1 = require("@visactor/vscale"), vrender_components_1 = require("@visactor/vrender-components"), base_1 = require("./base"), util_1 = require("./util"), util_2 = require("../axis/util"), common_1 = require("../axis/cartesian/util/common"), factory_1 = require("../../core/factory"), config_1 = require("./config");
 
 class CartesianCrossHair extends base_1.BaseCrossHair {
     static createComponent(spec, options) {
@@ -27,79 +20,81 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
     }
     constructor(spec, options) {
         super(spec, options), this.specKey = "crosshair", this.type = type_1.ComponentTypeEnum.cartesianCrosshair, 
-        this.name = type_1.ComponentTypeEnum.cartesianCrosshair, this.currValueX = new Map, 
-        this.currValueY = new Map;
+        this.name = type_1.ComponentTypeEnum.cartesianCrosshair, this._currValueX = new Map, 
+        this._currValueY = new Map;
     }
-    _showDefaultCrosshair() {
-        if (!this.showDefault) return;
-        const {xField: xField = {}, yField: yField = {}} = this._spec;
+    _showDefaultCrosshairBySpec() {
+        const {xField: xField, yField: yField} = this._spec;
         if ((null == xField ? void 0 : xField.visible) && xField.defaultSelect) {
             const {axisIndex: axisIndex, datum: datum} = xField.defaultSelect;
-            this.defaultCrosshair(axisIndex, datum, LayoutType.VERTICAL, !0), this.layoutByValue(LayoutType.VERTICAL);
+            this._defaultCrosshair(axisIndex, datum, config_1.LayoutType.VERTICAL);
         }
         if ((null == yField ? void 0 : yField.visible) && yField.defaultSelect) {
             const {axisIndex: axisIndex, datum: datum} = yField.defaultSelect;
-            this.defaultCrosshair(axisIndex, datum, LayoutType.HORIZONTAL, !1), this.layoutByValue(LayoutType.HORIZONTAL);
+            this._defaultCrosshair(axisIndex, datum, config_1.LayoutType.HORIZONTAL);
         }
     }
-    defaultCrosshair(axisIndex, datum, tag, vertical) {
+    _defaultCrosshair(axisIndex, datum, tag) {
         const axis = this._option.getComponentsByKey("axes").find((c => c.getSpecIndex() === axisIndex));
-        axis && (vertical ? (this.currValueX.clear(), this.currValueX.set(axisIndex, {
+        axis && (tag === config_1.LayoutType.VERTICAL ? (this._currValueX.clear(), this._currValueX.set(axisIndex, {
             axis: axis,
             v: datum
-        })) : (this.currValueY.clear(), this.currValueY.set(axisIndex, {
+        })) : (this._currValueY.clear(), this._currValueY.set(axisIndex, {
             axis: axis,
             v: datum
-        })));
+        })), this.layoutByValue(tag));
     }
-    findAllAxisContains(relativeX, relativeY) {
+    _findAllAxisContains(relativeX, relativeY) {
         const xAxisMap = this._getAxisInfoByField("x"), yAxisMap = this._getAxisInfoByField("y");
         return {
             xAxisMap: this._filterAxisByPoint(xAxisMap, relativeX, relativeY),
             yAxisMap: this._filterAxisByPoint(yAxisMap, relativeX, relativeY)
         };
     }
-    getValueAt(axis, p) {
+    _getValueAt(axis, p) {
         let value = axis.getScale().invert(p);
         return (0, vscale_1.isContinuous)(axis.getScale().type) && (0, vutils_1.isValidNumber)(+value) && (value = (+value).toFixed(2)), 
         value;
     }
     clearAxisValue() {
-        this.currValueX.clear(), this.currValueY.clear();
+        this._currValueX.clear(), this._currValueY.clear();
     }
     setAxisValue(v, axis) {
-        (0, common_1.isXAxis)(axis.getOrient()), this.currValueX.set(axis.getSpecIndex(), {
+        (0, common_1.isXAxis)(axis.getOrient()) ? this._currValueX.set(axis.getSpecIndex(), {
+            v: v,
+            axis: axis
+        }) : this._currValueY.set(axis.getSpecIndex(), {
             v: v,
             axis: axis
         });
     }
-    getAllAxisValues(axisMap, p, currValue, vertical) {
+    _getAllAxisValues(axisMap, p, currValue, vertical) {
         let discrete = !1;
         return axisMap.forEach((item => {
             (0, vscale_1.isDiscrete)(item.axis.getScale().type) && (discrete ? this.enable = !1 : discrete = !0);
         })), !!this.enable && (axisMap.forEach(((item, id) => {
             const axis = item.axis;
             currValue.set(id, {
-                v: this.getValueAt(axis, p - (vertical ? axis.getLayoutStartPoint().x - this.getLayoutStartPoint().x : axis.getLayoutStartPoint().y - this.getLayoutStartPoint().y)),
+                v: this._getValueAt(axis, p - (vertical ? axis.getLayoutStartPoint().x - this.getLayoutStartPoint().x : axis.getLayoutStartPoint().y - this.getLayoutStartPoint().y)),
                 axis: axis
             });
         })), !0);
     }
     _layoutCrosshair(relativeX, relativeY) {
-        const {xAxisMap: xAxisMap, yAxisMap: yAxisMap} = this.findAllAxisContains(relativeX, relativeY);
+        const {xAxisMap: xAxisMap, yAxisMap: yAxisMap} = this._findAllAxisContains(relativeX, relativeY);
         if (xAxisMap && 0 === xAxisMap.size && yAxisMap && 0 === yAxisMap.size) {
             if (this.enableRemain) return;
             this.hide();
-        } else this.currValueX.clear(), this.currValueY.clear(), xAxisMap && xAxisMap.size && this.getAllAxisValues(xAxisMap, relativeX, this.currValueX, !0), 
-        yAxisMap && yAxisMap.size && this.getAllAxisValues(yAxisMap, relativeY, this.currValueY, !1), 
-        this.layoutByValue(LayoutType.ALL);
+        } else this._currValueX.clear(), this._currValueY.clear(), xAxisMap && xAxisMap.size && this._getAllAxisValues(xAxisMap, relativeX, this._currValueX, !0), 
+        yAxisMap && yAxisMap.size && this._getAllAxisValues(yAxisMap, relativeY, this._currValueY, !1), 
+        this.layoutByValue(config_1.LayoutType.ALL);
     }
     hide() {
         this._xCrosshair && this._xCrosshair.hideAll(), this._xTopLabel && this._xTopLabel.hideAll(), 
         this._xBottomLabel && this._xBottomLabel.hideAll(), this._yCrosshair && this._yCrosshair.hideAll(), 
         this._yLeftLabel && this._yLeftLabel.hideAll(), this._yRightLabel && this._yRightLabel.hideAll();
     }
-    layoutByValue(tag = LayoutType.ALL) {
+    layoutByValue(tag = config_1.LayoutType.ALL) {
         var _a, _b, _c, _d;
         if (!this.enable) return;
         const series = this._firstSeries();
@@ -121,7 +116,8 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                 dx: 0,
                 dy: 0
             },
-            visible: !1
+            visible: !1,
+            axis: null
         }, yCrossHairInfo = {
             width: 0,
             leftPos: 0,
@@ -139,7 +135,8 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                 dx: 0,
                 dy: 0
             },
-            visible: !1
+            visible: !1,
+            axis: null
         };
         const getRegionArea = (outRegion, currentValue) => {
             currentValue.forEach((({axis: axis}) => {
@@ -151,15 +148,17 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
             }));
         };
         let x = 0, y = 0;
-        if (this.currValueX.size) {
-            const item = Array.from(this.currValueX.values())[0];
-            x = item.axis.getScale().scale(item.v) + item.axis.getLayoutStartPoint().x - this.getLayoutStartPoint().x;
+        if (this._currValueX.size) {
+            const item = Array.from(this._currValueX.values())[0];
+            x = item.axis.getScale().scale(item.v) + item.axis.getLayoutStartPoint().x - this.getLayoutStartPoint().x, 
+            xCrossHairInfo.axis = item.axis;
         }
-        if (this.currValueY.size) {
-            const item = Array.from(this.currValueY.values())[0];
-            y = item.axis.getScale().scale(item.v) + item.axis.getLayoutStartPoint().y - this.getLayoutStartPoint().y;
+        if (this._currValueY.size) {
+            const item = Array.from(this._currValueY.values())[0];
+            y = item.axis.getScale().scale(item.v) + item.axis.getLayoutStartPoint().y - this.getLayoutStartPoint().y, 
+            yCrossHairInfo.axis = item.axis;
         }
-        xCrossHairInfo.visible = !!this.currValueX.size && Number.isFinite(x), yCrossHairInfo.visible = !!this.currValueY.size && Number.isFinite(y);
+        xCrossHairInfo.visible = !!this._currValueX.size && Number.isFinite(x), yCrossHairInfo.visible = !!this._currValueY.size && Number.isFinite(y);
         const xRegion = {
             x1: 1 / 0,
             y1: 1 / 0,
@@ -172,15 +171,13 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
             y2: -1 / 0
         };
         let indexWidth, valueHeight;
-        if (getRegionArea(xRegion, this.currValueX), getRegionArea(yRegion, this.currValueY), 
-        this.xHair && this.currValueX.forEach((({axis: axis, v: v}) => {
-            var _a, _b, _c;
+        if (getRegionArea(xRegion, this._currValueX), getRegionArea(yRegion, this._currValueY), 
+        this._xHair && this._currValueX.forEach((({axis: axis, v: v}) => {
+            var _a;
             v = null != v ? v : "";
             const xScale = axis.getScale();
-            if ((0, vscale_1.isDiscrete)(xScale.type)) {
-                const eachBand = xScale._step;
-                indexWidth = axis ? null === (_b = (_a = series.getXAxisHelper()).getBandwidth) || void 0 === _b ? void 0 : _b.call(_a, 0) : eachBand;
-            } else if ((0, vscale_1.isContinuous)(xScale.type)) {
+            if ((0, vscale_1.isDiscrete)(xScale.type)) indexWidth = xScale.bandwidth(); else if ((0, 
+            vscale_1.isContinuous)(xScale.type)) {
                 const fieldX = series.fieldX[0], fieldX2 = series.fieldX2, datum = (0, util_1.getDatumByValue)(series.getViewData().latestData, +v, fieldX, fieldX2);
                 if (datum) {
                     const startX = series.dataToPositionX(datum);
@@ -188,20 +185,18 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                     x = startX;
                 }
             }
-            if (null === (_c = this.xHair.label) || void 0 === _c ? void 0 : _c.visible) {
+            if (null === (_a = this._xHair.label) || void 0 === _a ? void 0 : _a.visible) {
                 const labelOffset = (0, util_2.getAxisLabelOffset)(axis.getSpec());
                 "bottom" === axis.getOrient() ? (xCrossHairInfo.bottom.visible = !0, xCrossHairInfo.bottom.text = v, 
                 xCrossHairInfo.bottom.dx = 0, xCrossHairInfo.bottom.dy = labelOffset) : "top" === axis.getOrient() && (xCrossHairInfo.top.visible = !0, 
                 xCrossHairInfo.top.text = v, xCrossHairInfo.top.dx = 0, xCrossHairInfo.top.dy = -labelOffset);
             }
-        })), this.yHair && this.currValueY.forEach((({axis: axis, v: v}) => {
-            var _a, _b, _c;
+        })), this._yHair && this._currValueY.forEach((({axis: axis, v: v}) => {
+            var _a;
             v = null != v ? v : "";
             const yScale = axis.getScale();
-            if ((0, vscale_1.isDiscrete)(yScale.type)) {
-                const eachBand = yScale._step;
-                valueHeight = yScale ? null === (_b = (_a = series.getYAxisHelper()).getBandwidth) || void 0 === _b ? void 0 : _b.call(_a, 0) : eachBand;
-            } else if ((0, vscale_1.isContinuous)(yScale.type)) {
+            if ((0, vscale_1.isDiscrete)(yScale.type)) valueHeight = yScale.bandwidth(); else if ((0, 
+            vscale_1.isContinuous)(yScale.type)) {
                 const fieldY = series.fieldY[0], fieldY2 = series.fieldY2, datum = (0, util_1.getDatumByValue)(series.getViewData().latestData, +v, fieldY, fieldY2);
                 if (datum) {
                     const startY = series.dataToPositionY(datum);
@@ -209,7 +204,7 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                     y = startY;
                 }
             }
-            if (null === (_c = this.yHair.label) || void 0 === _c ? void 0 : _c.visible) {
+            if (null === (_a = this._yHair.label) || void 0 === _a ? void 0 : _a.visible) {
                 const labelOffset = (0, util_2.getAxisLabelOffset)(axis.getSpec());
                 "left" === axis.getOrient() ? (yCrossHairInfo.left.visible = !0, yCrossHairInfo.left.text = v, 
                 yCrossHairInfo.left.dx = -labelOffset, yCrossHairInfo.left.dy = 0) : "right" === axis.getOrient() && (yCrossHairInfo.right.visible = !0, 
@@ -217,20 +212,20 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
             }
         })), this.enableRemain && !xCrossHairInfo.visible && (0, vutils_1.isValid)(this._cacheXCrossHairInfo)) xCrossHairInfo = this._cacheXCrossHairInfo; else if (xCrossHairInfo.leftPos = xRegion.x1, 
         xCrossHairInfo.topPos = xRegion.y1, xCrossHairInfo.height = xRegion.y2 - xRegion.y1, 
-        xCrossHairInfo.x = x + this.getLayoutStartPoint().x, null === (_b = null === (_a = this.xHair) || void 0 === _a ? void 0 : _a.label) || void 0 === _b ? void 0 : _b.formatMethod) {
+        xCrossHairInfo.x = x + this.getLayoutStartPoint().x, null === (_b = null === (_a = this._xHair) || void 0 === _a ? void 0 : _a.label) || void 0 === _b ? void 0 : _b.formatMethod) {
             const {top: top, bottom: bottom} = xCrossHairInfo;
-            bottom.visible && (bottom.text = this.xHair.label.formatMethod(bottom.text, "bottom")), 
-            top.visible && (top.text = this.xHair.label.formatMethod(top.text, "top"));
+            bottom.visible && (bottom.text = this._xHair.label.formatMethod(bottom.text, "bottom")), 
+            top.visible && (top.text = this._xHair.label.formatMethod(top.text, "top"));
         }
         if (this.enableRemain && !yCrossHairInfo.visible && (0, vutils_1.isValid)(this._cacheYCrossHairInfo)) yCrossHairInfo = this._cacheYCrossHairInfo; else if (yCrossHairInfo.leftPos = yRegion.x1, 
         yCrossHairInfo.topPos = yRegion.y1, yCrossHairInfo.width = yRegion.x2 - yRegion.x1, 
-        yCrossHairInfo.y = y + this.getLayoutStartPoint().y, null === (_d = null === (_c = this.yHair) || void 0 === _c ? void 0 : _c.label) || void 0 === _d ? void 0 : _d.formatMethod) {
+        yCrossHairInfo.y = y + this.getLayoutStartPoint().y, null === (_d = null === (_c = this._yHair) || void 0 === _c ? void 0 : _c.label) || void 0 === _d ? void 0 : _d.formatMethod) {
             const {left: left, right: right} = yCrossHairInfo;
-            left.visible && (left.text = this.yHair.label.formatMethod(left.text, "left")), 
-            right.visible && (right.text = this.yHair.label.formatMethod(right.text, "right"));
+            left.visible && (left.text = this._yHair.label.formatMethod(left.text, "left")), 
+            right.visible && (right.text = this._yHair.label.formatMethod(right.text, "right"));
         }
-        tag && (LayoutType.HORIZONTAL && this._layoutHorizontal(yCrossHairInfo, null != valueHeight ? valueHeight : 0), 
-        LayoutType.VERTICAL && this._layoutVertical(xCrossHairInfo, null != indexWidth ? indexWidth : 0)), 
+        tag && (config_1.LayoutType.HORIZONTAL && this._layoutHorizontal(yCrossHairInfo, null != valueHeight ? valueHeight : 0), 
+        config_1.LayoutType.VERTICAL && this._layoutVertical(xCrossHairInfo, null != indexWidth ? indexWidth : 0)), 
         this.enableRemain && (this._cacheXCrossHairInfo = Object.assign(Object.assign({}, xCrossHairInfo), {
             _isCache: !0
         }), this._cacheYCrossHairInfo = Object.assign(Object.assign({}, yCrossHairInfo), {
@@ -238,38 +233,40 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
         }));
     }
     _layoutVertical(crosshairInfo, bandWidth) {
-        var _a, _b, _c, _d, _e, _f;
-        if (crosshairInfo._isCache && this.enableRemain || !this.xHair) return;
+        var _a, _b;
+        if (crosshairInfo._isCache && this.enableRemain || !this._xHair) return;
         const {x: x, topPos: topPos, height: height, top: top, bottom: bottom, visible: visible} = crosshairInfo;
         if (visible) {
-            let extend = 0;
-            (null === (_b = null === (_a = this.xHair) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.sizePercent) ? extend = (this.xHair.style.sizePercent - 1) * bandWidth : "number" == typeof (null === (_d = null === (_c = this.xHair) || void 0 === _c ? void 0 : _c.style) || void 0 === _d ? void 0 : _d.size) && (extend = this.xHair.style.size - bandWidth);
-            const type = this.xHair.type;
+            const type = this._xHair.type;
             let positionAttribute;
-            if ("line" === type ? positionAttribute = {
+            if ("line" === type) positionAttribute = {
                 start: {
-                    x: x + bandWidth / 2 - extend / 2,
-                    y: topPos
-                },
-                end: {
-                    x: x + bandWidth / 2 + extend / 2,
-                    y: topPos + height
-                }
-            } : "rect" === type && (positionAttribute = {
-                start: {
-                    x: x - extend / 2,
+                    x: x + bandWidth / 2,
                     y: topPos
                 },
                 end: {
-                    x: x + bandWidth + extend / 2,
+                    x: x + bandWidth / 2,
                     y: topPos + height
                 }
-            }), this._updateCrosshair("x", type, positionAttribute), top.visible) {
+            }; else if ("rect" === type) {
+                const extend = this._getRectSize(this._xHair, bandWidth, crosshairInfo.axis);
+                positionAttribute = {
+                    start: {
+                        x: x - extend / 2,
+                        y: topPos
+                    },
+                    end: {
+                        x: x + bandWidth + extend / 2,
+                        y: topPos + height
+                    }
+                };
+            }
+            if (this._updateCrosshair("x", type, positionAttribute), top.visible) {
                 const updateAttrs = Object.assign(Object.assign(Object.assign({
                     x: x + bandWidth / 2,
                     y: topPos
-                }, top), this.xHair.label), {
-                    textStyle: Object.assign(Object.assign({}, null === (_e = this.xHair.label) || void 0 === _e ? void 0 : _e.textStyle), {
+                }, top), this._xHair.label), {
+                    textStyle: Object.assign(Object.assign({}, null === (_a = this._xHair.label) || void 0 === _a ? void 0 : _a.textStyle), {
                         textAlign: "center",
                         textBaseline: "bottom"
                     }),
@@ -283,8 +280,8 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                 const updateAttrs = Object.assign(Object.assign(Object.assign({
                     x: x + bandWidth / 2,
                     y: topPos + height
-                }, bottom), this.xHair.label), {
-                    textStyle: Object.assign(Object.assign({}, null === (_f = this.xHair.label) || void 0 === _f ? void 0 : _f.textStyle), {
+                }, bottom), this._xHair.label), {
+                    textStyle: Object.assign(Object.assign({}, null === (_b = this._xHair.label) || void 0 === _b ? void 0 : _b.textStyle), {
                         textAlign: "center",
                         textBaseline: "top"
                     }),
@@ -297,15 +294,13 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
         }
     }
     _layoutHorizontal(crosshairInfo, bandHeight) {
-        var _a, _b, _c, _d, _e, _f;
-        if (crosshairInfo._isCache && this.enableRemain || !this.yHair) return;
+        var _a, _b;
+        if (crosshairInfo._isCache && this.enableRemain || !this._yHair) return;
         const {leftPos: leftPos, width: width, y: y, left: left, right: right, visible: visible} = crosshairInfo;
         if (visible) {
-            let extend = 0;
-            (null === (_b = null === (_a = this.yHair) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.sizePercent) ? extend = (this.yHair.style.sizePercent - 1) * bandHeight : "number" == typeof (null === (_d = null === (_c = this.yHair) || void 0 === _c ? void 0 : _c.style) || void 0 === _d ? void 0 : _d.size) && (extend = this.yHair.style.size - bandHeight);
-            const type = this.yHair.type;
+            const type = this._yHair.type;
             let positionAttribute;
-            if ("line" === type ? positionAttribute = {
+            if ("line" === type) positionAttribute = {
                 start: {
                     x: leftPos,
                     y: y + bandHeight / 2
@@ -314,21 +309,25 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                     x: leftPos + width,
                     y: y + bandHeight / 2
                 }
-            } : "rect" === type && (positionAttribute = {
-                start: {
-                    x: leftPos,
-                    y: y - extend / 2
-                },
-                end: {
-                    x: leftPos + width,
-                    y: y + bandHeight + extend / 2
-                }
-            }), this._updateCrosshair("y", type, positionAttribute), left.visible) {
+            }; else if ("rect" === type) {
+                const extend = this._getRectSize(this._yHair, bandHeight, crosshairInfo.axis);
+                positionAttribute = {
+                    start: {
+                        x: leftPos,
+                        y: y - extend / 2
+                    },
+                    end: {
+                        x: leftPos + width,
+                        y: y + bandHeight + extend / 2
+                    }
+                };
+            }
+            if (this._updateCrosshair("y", type, positionAttribute), left.visible) {
                 const updateAttrs = Object.assign(Object.assign(Object.assign({
                     x: leftPos,
                     y: y + bandHeight / 2
-                }, left), this.yHair.label), {
-                    textStyle: Object.assign(Object.assign({}, null === (_e = this.yHair.label) || void 0 === _e ? void 0 : _e.textStyle), {
+                }, left), this._yHair.label), {
+                    textStyle: Object.assign(Object.assign({}, null === (_a = this._yHair.label) || void 0 === _a ? void 0 : _a.textStyle), {
                         textAlign: "right",
                         textBaseline: "middle"
                     }),
@@ -342,8 +341,8 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
                 const updateAttrs = Object.assign(Object.assign(Object.assign({
                     x: leftPos + width,
                     y: y + bandHeight
-                }, right), this.yHair.label), {
-                    textStyle: Object.assign(Object.assign({}, null === (_f = this.yHair.label) || void 0 === _f ? void 0 : _f.textStyle), {
+                }, right), this._yHair.label), {
+                    textStyle: Object.assign(Object.assign({}, null === (_b = this._yHair.label) || void 0 === _b ? void 0 : _b.textStyle), {
                         textAlign: "left",
                         textBaseline: "middle"
                     }),
@@ -355,15 +354,25 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
             } else this._yRightLabel && this._yRightLabel.hideAll();
         }
     }
+    _getRectSize(hair, bandSize, axis) {
+        var _a, _b, _c;
+        let extend = 0;
+        if (null === (_a = hair.style) || void 0 === _a ? void 0 : _a.sizePercent) extend = (hair.style.sizePercent - 1) * bandSize; else if ("number" == typeof (null === (_b = hair.style) || void 0 === _b ? void 0 : _b.size)) extend = hair.style.size - bandSize; else if ("function" == typeof (null === (_c = hair.style) || void 0 === _c ? void 0 : _c.size)) {
+            const axisRect = axis.getLayoutRect();
+            extend = hair.style.size(axisRect, axis) - bandSize;
+        }
+        return extend;
+    }
     _parseFieldInfo() {
-        const {xField: xField, yField: yField} = this._crosshairConfig;
-        xField && xField.visible && (this.xHair = this._parseField(xField, "xField")), yField && yField.visible && (this.yHair = this._parseField(yField, "yField"));
+        const {xField: xField, yField: yField} = this._spec;
+        xField && xField.visible && (this._xHair = this._parseField(xField, "xField")), 
+        yField && yField.visible && (this._yHair = this._parseField(yField, "yField"));
     }
     _updateCrosshair(dim, type, attributes) {
         const container = this.getContainer();
         let crosshair, style;
-        "x" === dim ? (crosshair = this._xCrosshair, style = this.xHair.style) : (crosshair = this._yCrosshair, 
-        style = this.yHair.style), crosshair ? crosshair.setAttributes(attributes) : ("line" === type ? crosshair = new vrender_components_1.LineCrosshair(Object.assign(Object.assign({}, attributes), {
+        "x" === dim ? (crosshair = this._xCrosshair, style = this._xHair.style) : (crosshair = this._yCrosshair, 
+        style = this._yHair.style), crosshair ? crosshair.setAttributes(attributes) : ("line" === type ? crosshair = new vrender_components_1.LineCrosshair(Object.assign(Object.assign({}, attributes), {
             lineStyle: style,
             zIndex: this.gridZIndex + 1
         })) : "rect" === type && (crosshair = new vrender_components_1.RectCrosshair(Object.assign(Object.assign({}, attributes), {
@@ -374,7 +383,7 @@ class CartesianCrossHair extends base_1.BaseCrossHair {
     _updateCrosshairLabel(label, attributes, callback) {
         const container = this.getContainer();
         label ? label.setAttributes(attributes) : (callback(label = new vrender_components_1.Tag(attributes)), 
-        container.add(label)), (0, util_1.limitTagInBounds)(label, this._getLimitBounds());
+        null == container || container.add(label)), (0, util_1.limitTagInBounds)(label, this._getLimitBounds());
     }
     _getNeedClearVRenderComponents() {
         return [ this._xCrosshair, this._xTopLabel, this._xBottomLabel, this._yCrosshair, this._yLeftLabel, this._yRightLabel ];