@visactor/vchart 2.0.12-alpha.5 → 2.0.13-alpha.0

package/build/index.es.js

@@ -26232,6 +26232,9 @@ function isDataDomainSpec(domain) {
     }
     return isArray$1(domain[0].fields);
 }
+function isClass(obj) {
+    return typeof obj === 'function' && /^class\s/.test(obj.toString());
+}
 
 const GROUP_ATTRIBUTES = ["x", "y", "dx", "dy", "scaleX", "scaleY", "angle", "anchor", "postMatrix", "visible", "clip", "pickable", "childrenPickable", "zIndex", "cursor"];
 class AbstractComponent extends Group$1 {
@@ -40713,8 +40716,9 @@ class LineAxis extends AxisBase {
     let tickLength = 0;
     (null === (_b = this.attribute.tick) || void 0 === _b ? void 0 : _b.visible) && !1 === this.attribute.tick.inside && (tickLength = this.attribute.tick.length || 4), (null === (_c = this.attribute.subTick) || void 0 === _c ? void 0 : _c.visible) && !1 === this.attribute.subTick.inside && (tickLength = Math.max(tickLength, this.attribute.subTick.length || 2));
     const offset = tickLength + labelLength + space,
-      titlePoint = this.getVerticalCoord(point, offset, !1),
-      vector = this.getVerticalVector(offset, !1, {
+      actualOffset = this.getActualOffset(offset),
+      titlePoint = this.getVerticalCoord(point, actualOffset, !1),
+      vector = this.getVerticalVector(actualOffset, !1, {
         x: 0,
         y: 0
       });
@@ -40743,11 +40747,11 @@ class LineAxis extends AxisBase {
           if (angle !== Math.PI / 2) {
             const cosValue = Math.abs(Math.cos(null != angle ? angle : 0));
             maxTagWidth = cosValue < 1e-6 ? 1 / 0 : this.attribute.end.x / cosValue;
-          } else maxTagWidth = limitSize - offset;
+          } else maxTagWidth = limitSize - actualOffset;
         } else if (angle && 0 !== angle) {
           const sinValue = Math.abs(Math.sin(angle));
           maxTagWidth = sinValue < 1e-6 ? 1 / 0 : this.attribute.end.y / sinValue;
-        } else maxTagWidth = limitSize - offset;
+        } else maxTagWidth = limitSize - actualOffset;
       }
     }
     const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), {
@@ -41052,6 +41056,10 @@ class LineAxis extends AxisBase {
       visibleAll: !1
     });
   }
+  getActualOffset(offset) {
+    const orient = this.attribute.orient;
+    return "left" === orient || "right" === orient ? this.attribute.width ? this.attribute.width : (this.attribute.maxWidth && (offset = Math.min(offset, this.attribute.maxWidth)), this.attribute.minWidth && (offset = Math.max(offset, this.attribute.minWidth)), offset) : offset;
+  }
   release() {
     super.release(), this._breaks = null;
   }
@@ -54872,7 +54880,17 @@ function diffMarks(prevMarks, nextMarks, runningConfig) {
     return diffResult;
 }
 
+const BuiltIn_DISAPPEAR_ANIMATE_NAME = `${PREFIX}_BuiltIn_CallBack_Disappear`;
+var RenderStateEnum;
+(function (RenderStateEnum) {
+    RenderStateEnum["render"] = "render";
+    RenderStateEnum["disappear"] = "disappear";
+})(RenderStateEnum || (RenderStateEnum = {}));
+
 class Compiler {
+    get stateAnimationConfig() {
+        return this._stateAnimationConfig;
+    }
     getRootGroup() {
         return this._rootGroup;
     }
@@ -55057,7 +55075,6 @@ class Compiler {
         var _a, _b, _c, _d, _e, _f;
         (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeDoRender) === null || _b === void 0 ? void 0 : _b.call(_a, this._compileChart.getOption().globalInstance);
         if (this._stage) {
-            this.runStageAnimation();
             this._rootMarks.forEach(g => {
                 traverseGroupMark(g, m => {
                     if (m.needClear) {
@@ -55151,14 +55168,26 @@ class Compiler {
         Object.keys(config).forEach(key => {
             const value = config[key];
             if (isArray$1(value)) {
-                animationConfig[key] = value.map(item => {
-                    var _a;
-                    const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
-                    return Object.assign(Object.assign({}, item), { options: (...args) => {
-                            const _options = typeof options === 'function' ? options(...args) : options;
-                            return Object.assign({}, _options);
-                        } });
-                });
+                if (key === 'disappear') {
+                    animationConfig[key] = value.map(item => {
+                        if (isClass(item.callBack)) {
+                            return Object.assign(Object.assign({}, item), { custom: item.callBack });
+                        }
+                        return Object.assign(Object.assign({}, item), { type: BuiltIn_DISAPPEAR_ANIMATE_NAME, customParameters: {
+                                callBack: item.callBack
+                            } });
+                    });
+                }
+                else {
+                    animationConfig[key] = value.map(item => {
+                        var _a;
+                        const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
+                        return Object.assign(Object.assign({}, item), { options: (...args) => {
+                                const _options = typeof options === 'function' ? options(...args) : options;
+                                return Object.assign({}, _options);
+                            } });
+                    });
+                }
             }
             else {
                 animationConfig[key] = Object.assign({}, config[key]);
@@ -55184,29 +55213,6 @@ class Compiler {
         }
         this._stage.context.animationState = animationState;
     }
-    runStageAnimation() {
-        var _a;
-        const animationState = (_a = this._stage.context) === null || _a === void 0 ? void 0 : _a.animationState;
-        if (!this._stateAnimationConfig || animationState === AnimationStateEnum.none) {
-            return;
-        }
-        const animationConfigs = array(this._stateAnimationConfig[animationState]).filter(config => config.type);
-        if (!animationConfigs.length) {
-            return;
-        }
-        if (animationState === AnimationStateEnum.appear) {
-            this._stage.stopAnimationState(AnimationStateEnum.disappear);
-        }
-        else if (animationState === AnimationStateEnum.disappear) {
-            this._stage.stopAnimationState(AnimationStateEnum.appear);
-        }
-        this._stage.applyAnimationState([animationState], [
-            {
-                name: animationState,
-                animation: animationConfigs
-            }
-        ]);
-    }
     updateViewBox(viewBox, reRender = true) {
         if (!this._stage) {
             return;
@@ -59662,6 +59668,29 @@ function linePresetAnimation(params, preset) {
     }
 }
 
+class CallbackDisappearAnimate extends AStageAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.currentAnimationRatio = 0;
+        this.animationTime = 0;
+    }
+    onUpdate(end, ratio, out) {
+        super.onUpdate(end, ratio, out);
+        this.currentAnimationRatio = ratio;
+        this.animationTime = ratio * Math.PI * 2;
+    }
+    getAnimationTime() {
+        if (this.currentAnimationRatio > 0) {
+            return this.animationTime;
+        }
+        return Date.now() / 1000.0;
+    }
+    afterStageRender(stage, canvas) {
+        var _a, _b;
+        return (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.callBack) === null || _b === void 0 ? void 0 : _b.call(_a, stage, canvas, this.currentAnimationRatio, this.animationTime);
+    }
+}
+
 const DEFAULT_ANIMATION_CONFIG = {
     appear: {
         duration: 1000,
@@ -59692,14 +59721,12 @@ const DEFAULT_ANIMATION_CONFIG = {
 const ScaleInOutAnimation = {
     appear: { type: 'scaleIn' },
     enter: { type: 'scaleIn' },
-    exit: { type: 'scaleOut' },
-    disappear: { type: 'scaleOut' }
+    exit: { type: 'scaleOut' }
 };
 const FadeInOutAnimation = {
     appear: { type: 'fadeIn' },
     enter: { type: 'fadeIn' },
-    exit: { type: 'fadeOut' },
-    disappear: { type: 'fadeOut' }
+    exit: { type: 'fadeOut' }
 };
 const registerScaleInOutAnimation = () => {
     Factory.registerAnimation('scaleInOut', () => ScaleInOutAnimation);
@@ -59722,19 +59749,6 @@ const registerCartesianGroupClipAnimation = () => {
                         orient: params.orient()
                     };
                 }
-            },
-            disappear: {
-                custom: ClipDirectionAnimate,
-                customParameters: (datum, g) => {
-                    return {
-                        animationType: 'out',
-                        group: g,
-                        direction: params.direction(),
-                        width: params.width(),
-                        height: params.height(),
-                        orient: params.orient()
-                    };
-                }
             }
         };
     });
@@ -59758,8 +59772,7 @@ const lineOrAreaAnimation = (params, preset) => {
                     clipRangeByDimension: params.direction === "horizontal" ? 'y' : 'x'
                 }
             }
-        ],
-        disappear: { type: 'clipOut' }
+        ]
     };
 };
 const registerLineAnimation = () => {
@@ -59809,13 +59822,7 @@ const registerPolygonAnimation = () => {
     AnimateExecutor.registerBuiltInAnimate('growPointsOut', GrowPointsOut);
 };
 const registerStageAnimation = () => {
-    AnimateExecutor.registerBuiltInAnimate('distortion', Distortion);
-    AnimateExecutor.registerBuiltInAnimate('particle', Particle);
-    AnimateExecutor.registerBuiltInAnimate('pixelation', Pixelation);
-    AnimateExecutor.registerBuiltInAnimate('gaussianBlur', GaussianBlur);
-    AnimateExecutor.registerBuiltInAnimate('glitch', Glitch);
-    AnimateExecutor.registerBuiltInAnimate('grayscale', Grayscale);
-    AnimateExecutor.registerBuiltInAnimate('dissolve', Dissolve);
+    AnimateExecutor.registerBuiltInAnimate(BuiltIn_DISAPPEAR_ANIMATE_NAME, CallbackDisappearAnimate);
 };
 
 const registerAnimate = () => {
@@ -60362,6 +60369,7 @@ class VChart {
         };
         this._observer = null;
         this._context = {};
+        this._renderState = RenderStateEnum.render;
         this._doResize = () => {
             const { width, height } = this.getCurrentSize();
             if (this._currentSize.width !== width || this._currentSize.height !== height) {
@@ -60382,6 +60390,7 @@ class VChart {
         };
         this._updateSpec = (spec, forceMerge = false, userUpdateOptions) => {
             var _a;
+            this._reSetRenderState();
             const lastSpec = this._spec;
             const result = {
                 changeBackground: false,
@@ -60854,6 +60863,7 @@ class VChart {
         });
     }
     updateDataSync(id, data, parserOptions, userUpdateOptions) {
+        this._reSetRenderState();
         if (isNil$1(this._dataSet)) {
             return this;
         }
@@ -60871,6 +60881,7 @@ class VChart {
         return this;
     }
     updateFullDataSync(data, reRender = true, userUpdateOptions) {
+        this._reSetRenderState();
         if (this._chart) {
             this._chart.updateFullData(data);
             if (reRender) {
@@ -61595,6 +61606,20 @@ class VChart {
             componentShowContent: this._option.componentShowContent
         };
     }
+    runDisappearAnimation() {
+        this._renderState = RenderStateEnum.disappear;
+        this.getStage().eventSystem.pauseTriggerEvent();
+        this.getStage().applyAnimationState(['disappear'], [
+            {
+                name: 'disappear',
+                animation: this._compiler.stateAnimationConfig.disappear
+            }
+        ]);
+    }
+    _reSetRenderState() {
+        this._renderState = RenderStateEnum.render;
+        this.getStage().eventSystem.resumeTriggerEvent();
+    }
 }
 VChart.InstanceManager = InstanceManager;
 VChart.ThemeManager = ThemeManager;
@@ -61711,7 +61736,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.11";
+const version = "2.0.12";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -62761,7 +62786,6 @@ class BaseSeries extends BaseModel {
         this.initMarkState();
         if (hasAnimation) {
             this.initAnimation();
-            this.initStageAnimation();
         }
         this.afterInitMark();
         this.initEvent();
@@ -63218,13 +63242,6 @@ class BaseSeries extends BaseModel {
     }
     initAnimation() {
     }
-    initStageAnimation() {
-        const compiler = this._option.getCompiler();
-        if (!(compiler === null || compiler === void 0 ? void 0 : compiler.setStageAnimationConfig)) {
-            return;
-        }
-        compiler.setStageAnimationConfig(animationConfig({}, userAnimationConfig('stage', this._spec, this._markAttributeContext), null));
-    }
     initMarkState() {
         this.initSeriesStyleState();
     }
@@ -67084,7 +67101,10 @@ class CartesianAxis extends AxisComponent {
                 maxWidth: this._getTitleLimit(isX)
             },
             items,
-            scale: this._scale.clone()
+            scale: this._scale.clone(),
+            maxWidth: this._layout.maxWidth,
+            minWidth: this._layout.minWidth,
+            width: this._spec.width ? this.getLayoutRect().width : undefined
         };
         if (!ignoreGrid) {
             attrs.grid = {
@@ -69740,6 +69760,14 @@ class BaseChart extends CompilableBase {
         (_d = (_c = this)._initStack) === null || _d === void 0 ? void 0 : _d.call(_c);
         this.reDataFlow();
         this._initInteractions();
+        this.initStageAnimation();
+    }
+    initStageAnimation() {
+        const compiler = this._option.getCompiler();
+        if (!(compiler === null || compiler === void 0 ? void 0 : compiler.setStageAnimationConfig)) {
+            return;
+        }
+        compiler.setStageAnimationConfig(animationConfig({}, userAnimationConfig('stage', this._spec, {}), null));
     }
     reDataFlow() {
         this._series.forEach(s => { var _a; return (_a = s.getRawData()) === null || _a === void 0 ? void 0 : _a.markRunning(); });
@@ -72415,7 +72443,7 @@ const registerBarAnimation = () => {
             appear: barPresetAnimation(params, preset),
             enter: barGrowIn(params, false),
             exit: barGrowOut(params, false),
-            disappear: barGrowOut(params)
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -74267,7 +74295,9 @@ class GeoCoordinate extends BaseComponent {
         };
         this._handleChartZoom = (params, event) => {
             var _a, _b, _c, _d, _e, _f;
-            let scale = params.zoomDelta;
+            const rate = isValid$1(this._spec.zoomRate) ? Math.max(0, this._spec.zoomRate) : 1;
+            const delta = Math.max(params.zoomDelta, 1e-6);
+            let scale = Math.pow(delta, rate);
             const _lastActualScale = this._actualScale;
             this._actualScale *= scale;
             if (this._actualScale < ((_a = this._spec.zoomLimit) === null || _a === void 0 ? void 0 : _a.min)) {
@@ -74559,7 +74589,7 @@ class GeoCoordinate extends BaseComponent {
     _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
         if (!result.reMake) {
-            result.reMake = ['roam', 'longitudeField', 'latitudeField', 'projection', 'zoomLimit'].some(k => {
+            result.reMake = ['roam', 'longitudeField', 'latitudeField', 'projection', 'zoomLimit', 'zoomRate'].some(k => {
                 return !isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[k], spec[k]);
             });
         }
@@ -75145,7 +75175,7 @@ const registerWaterfallAnimation = () => {
             appear: waterfallPresetAnimation(params, preset),
             enter: barGrowIn(params, false),
             exit: barGrowOut(params, false),
-            disappear: barGrowOut(params, false)
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -77383,7 +77413,7 @@ const registerRangeColumnAnimation = () => {
         appear: rangeColumnPresetAnimation(params, preset),
         enter: rangeColumnGrowIn(params),
         exit: rangeColumnGrowOut(params),
-        disappear: rangeColumnGrowOut(params)
+        disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
     }));
 };
 
@@ -78045,7 +78075,7 @@ const registerPieAnimation = () => {
             appear: piePresetAnimation(params, preset),
             enter: pieEnter(params),
             exit: pieExit(params),
-            disappear: pieDisappear(params)
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -78638,7 +78668,6 @@ const roseExit = (params) => {
         type: growOutType(params.growField)
     };
 };
-const roseDisappear = roseExit;
 function rosePresetAnimation(params, preset) {
     if (preset === false) {
         return {};
@@ -78658,7 +78687,7 @@ const registerRoseAnimation = () => {
             appear: rosePresetAnimation(params, preset),
             enter: roseEnter(params),
             exit: roseExit(params),
-            disappear: roseDisappear(params)
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -79545,7 +79574,7 @@ const registerRadarAnimation = () => {
             appear: preset === 'clipIn' ? undefined : radarPresetAnimation(params, preset, 'in'),
             enter: radarPresetAnimation(params, preset, 'in'),
             exit: radarPresetAnimation(params, preset, 'out'),
-            disappear: preset === 'clipIn' ? undefined : radarPresetAnimation(params, preset, 'out'),
+            disappear: preset === 'clipIn' ? undefined : { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration },
             update: [
                 {
                     channel: ['points', 'center'],
@@ -79565,7 +79594,7 @@ const registerRadarAnimation = () => {
         appear: preset === 'clipIn' ? undefined : radarSymbolPresetAnimation(params, preset, 'in'),
         enter: { type: 'scaleIn' },
         exit: { type: 'scaleOut' },
-        disappear: preset === 'clipIn' ? undefined : radarSymbolPresetAnimation(params, preset, 'out'),
+        disappear: preset === 'clipIn' ? undefined : { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration },
         update: [
             {
                 options: { excludeChannels: ['x', 'y', 'center'] }
@@ -79582,7 +79611,7 @@ const registerRadarAnimation = () => {
     Factory.registerAnimation('radarGroup', (params, preset) => {
         return {
             appear: radarGroupClipAnimation(params, 'in'),
-            disappear: radarGroupClipAnimation(params, 'out')
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
     registerArc();
@@ -80784,7 +80813,7 @@ const registerProgressLikeAnimation = () => {
     Factory.registerAnimation('circularProgress', (params, preset) => ({
         appear: progressLikePresetAnimation(params, preset),
         enter: { type: 'growAngleIn' },
-        disappear: { type: 'growAngleOut' }
+        disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
     }));
 };
 
@@ -80989,12 +81018,6 @@ const Appear_Grow$2 = (params) => {
         options: LinearProgressGrowOption(params)
     };
 };
-const linearProgressDisappear = (params) => {
-    return {
-        type: params.direction === "horizontal" ? 'growWidthOut' : 'growHeightOut',
-        options: LinearProgressGrowOption(params)
-    };
-};
 const Appear_FadeIn$1 = {
     type: 'fadeIn'
 };
@@ -81014,7 +81037,7 @@ const registerLinearProgressAnimation = () => {
         return {
             appear: linearProgressPresetAnimation(params, preset),
             enter: linearProgressPresetAnimation(params),
-            disappear: linearProgressDisappear(params)
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -81658,7 +81681,7 @@ const registerWordCloudAnimation = () => {
         appear: wordcloudPresetAnimation(params, preset),
         enter: { type: 'fadeIn' },
         exit: { type: 'fadeOut' },
-        disappear: { type: 'fadeOut' }
+        disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
     }));
 };
 
@@ -87928,7 +87951,7 @@ const registerSunburstAnimation = () => {
         appear: sunburstPresetAnimation(params, preset),
         enter: sunburstEnter(params),
         exit: sunburstExit(params),
-        disappear: sunburstExit(params)
+        disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
     }));
 };
 
@@ -88431,7 +88454,7 @@ const registerCirclePackingAnimation = () => {
         appear: circlePackingPresetAnimation(preset),
         enter: { type: 'growRadiusIn' },
         exit: { type: 'growRadiusOut' },
-        disappear: { type: 'growRadiusOut' }
+        disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
     }));
 };
 
@@ -88901,7 +88924,7 @@ const registerSankeyAnimation = () => {
         appear: sankeyLinkPresetAnimation(preset),
         enter: { type: 'linkPathGrowIn' },
         exit: { type: 'linkPathGrowOut' },
-        disappear: { type: 'linkPathGrowOut' }
+        disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
     }));
     AnimateExecutor.registerBuiltInAnimate('linkPathGrowOut', LinkPathGrowOut);
     AnimateExecutor.registerBuiltInAnimate('linkPathGrowIn', LinkPathGrowIn);
@@ -90095,7 +90118,7 @@ const registerTreemapAnimation = () => {
             appear: treemapPresetAnimation(preset),
             enter: { type: 'growCenterIn' },
             exit: { type: 'growCenterOut' },
-            disappear: { type: 'growCenterOut' }
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -90585,7 +90608,7 @@ const registerGaugePointerAnimation = () => {
         return {
             appear: animation,
             enter: animation,
-            disappear: { type: 'fadeOut' }
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -91061,7 +91084,7 @@ class HeatmapSeriesSpecTransformer extends BaseSeriesSpecTransformer {
 const heatmap = {
     cell: {
         style: {
-            shape: 'square',
+            shape: 'rect',
             fillOpacity: 1
         }
     },
@@ -91153,7 +91176,7 @@ class HeatmapSeries extends CartesianSeries {
         var _a;
         return {
             scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this._getDefaultColorScale(),
-            field: this.getFieldValue[0]
+            field: this.getFieldValue()[0]
         };
     }
     getInteractionTriggers() {
@@ -91174,7 +91197,7 @@ class HeatmapSeries extends CartesianSeries {
         this._cellMark && this._tooltipHelper.activeTriggerSet.mark.add(this._cellMark);
     }
     getDefaultShapeType() {
-        return 'square';
+        return 'rect';
     }
     getDimensionField() {
         return [].concat(this.fieldX, this.fieldY);
@@ -92300,7 +92323,7 @@ const registerVennAnimation = () => {
             appear: vennCirclePresetAnimation(preset),
             enter: { type: 'growRadiusIn' },
             exit: { type: 'growRadiusOut' },
-            disappear: { type: 'growRadiusOut' }
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
     Factory.registerAnimation('vennOverlap', (params, preset) => {
@@ -92309,7 +92332,7 @@ const registerVennAnimation = () => {
             update: { custom: VennOverlapAnimation },
             enter: { type: 'fadeIn' },
             exit: { type: 'fadeOut' },
-            disappear: { type: 'fadeOut' }
+            disappear: { duration: DEFAULT_ANIMATION_CONFIG.disappear.duration }
         };
     });
 };
@@ -95636,11 +95659,15 @@ function showTooltip(datum, options, component) {
         });
         return originDatum;
     };
+    const transform = region.getOption().globalInstance.getStage().window.getViewBoxTransform().getInverse();
     const getMockEvent = (originPos) => {
         var _a, _b;
         const pos = bound(originPos);
-        const canvasX = (_a = opt.x) !== null && _a !== void 0 ? _a : regionPos.x + pos.x;
-        const canvasY = (_b = opt.y) !== null && _b !== void 0 ? _b : regionPos.y + pos.y;
+        const tempX = (_a = opt.x) !== null && _a !== void 0 ? _a : regionPos.x + pos.x;
+        const tempY = (_b = opt.y) !== null && _b !== void 0 ? _b : regionPos.y + pos.y;
+        const canvasPoint = { x: 0, y: 0 };
+        transform.transformPoint({ x: tempX, y: tempY }, canvasPoint);
+        const { x: canvasX, y: canvasY } = canvasPoint;
         return {
             canvasX,
             canvasY,
@@ -102709,9 +102736,9 @@ class BaseMarkPoint extends BaseMarker {
         return 'cartesian';
     }
     _createMarkerComponent() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         const { itemContent = {}, itemLine = {}, targetSymbol = {} } = this._spec;
-        const _8 = itemContent, { type = 'text', text: label, symbol, image, richText, customMark, textStyle, symbolStyle, imageStyle, richTextStyle, customMarkStyle, style = {}, state = {} } = _8, restItemContent = __rest$e(_8, ["type", "text", "symbol", "image", "richText", "customMark", "textStyle", "symbolStyle", "imageStyle", "richTextStyle", "customMarkStyle", "style", "state"]);
+        const _9 = itemContent, { type = 'text', text: label, symbol, image, richText, customMark, textStyle, symbolStyle, imageStyle, richTextStyle, customMarkStyle, style = {}, state = {} } = _9, restItemContent = __rest$e(_9, ["type", "text", "symbol", "image", "richText", "customMark", "textStyle", "symbolStyle", "imageStyle", "richTextStyle", "customMarkStyle", "style", "state"]);
         let itemContentState = null;
         let itemContentStyle = null;
         let defaultStyle = {};
@@ -102721,61 +102748,61 @@ class BaseMarkPoint extends BaseMarker {
                 dx: 0,
                 dy: 0
             };
-            itemContentStyle = transformLabelAttributes(merge$1(defaultStyle, (_b = label !== null && label !== void 0 ? label : textStyle) !== null && _b !== void 0 ? _b : style), this._markerData, this._markAttributeContext);
+            itemContentStyle = transformLabelAttributes(Object.assign(Object.assign({}, label), { style: merge$1(defaultStyle, (_c = (_b = label === null || label === void 0 ? void 0 : label.textStyle) !== null && _b !== void 0 ? _b : textStyle) !== null && _c !== void 0 ? _c : style) }), this._markerData, this._markAttributeContext);
         }
         else if (type === 'richText') {
-            itemContentState = (_c = richText === null || richText === void 0 ? void 0 : richText.state) !== null && _c !== void 0 ? _c : state;
+            itemContentState = (_d = richText === null || richText === void 0 ? void 0 : richText.state) !== null && _d !== void 0 ? _d : state;
             defaultStyle = {
                 width: 100,
                 height: 100
             };
-            itemContentStyle = transformStyle(merge$1(defaultStyle, (_e = (_d = richText === null || richText === void 0 ? void 0 : richText.style) !== null && _d !== void 0 ? _d : richTextStyle) !== null && _e !== void 0 ? _e : style), this._markerData, this._markAttributeContext);
+            itemContentStyle = transformStyle(merge$1(defaultStyle, (_f = (_e = richText === null || richText === void 0 ? void 0 : richText.style) !== null && _e !== void 0 ? _e : richTextStyle) !== null && _f !== void 0 ? _f : style), this._markerData, this._markAttributeContext);
         }
         else if (type === 'symbol') {
-            itemContentState = (_f = symbol === null || symbol === void 0 ? void 0 : symbol.state) !== null && _f !== void 0 ? _f : state;
+            itemContentState = (_g = symbol === null || symbol === void 0 ? void 0 : symbol.state) !== null && _g !== void 0 ? _g : state;
             defaultStyle = {
                 symbolType: 'star',
                 fill: 'rgb(48, 115, 242)',
                 fillOpacity: 0.8,
                 size: 20
             };
-            itemContentStyle = transformToGraphic(transformStyle(merge$1(defaultStyle, (_h = (_g = symbol === null || symbol === void 0 ? void 0 : symbol.style) !== null && _g !== void 0 ? _g : symbolStyle) !== null && _h !== void 0 ? _h : style), this._markerData, this._markAttributeContext));
+            itemContentStyle = transformToGraphic(transformStyle(merge$1(defaultStyle, (_j = (_h = symbol === null || symbol === void 0 ? void 0 : symbol.style) !== null && _h !== void 0 ? _h : symbolStyle) !== null && _j !== void 0 ? _j : style), this._markerData, this._markAttributeContext));
         }
         else if (type === 'image') {
-            itemContentState = (_j = image === null || image === void 0 ? void 0 : image.state) !== null && _j !== void 0 ? _j : state;
+            itemContentState = (_k = image === null || image === void 0 ? void 0 : image.state) !== null && _k !== void 0 ? _k : state;
             defaultStyle = {
                 width: 80,
                 height: 80
             };
-            itemContentStyle = transformStyle(merge$1(defaultStyle, (_l = (_k = image === null || image === void 0 ? void 0 : image.style) !== null && _k !== void 0 ? _k : imageStyle) !== null && _l !== void 0 ? _l : style), this._markerData, this._markAttributeContext);
+            itemContentStyle = transformStyle(merge$1(defaultStyle, (_m = (_l = image === null || image === void 0 ? void 0 : image.style) !== null && _l !== void 0 ? _l : imageStyle) !== null && _m !== void 0 ? _m : style), this._markerData, this._markAttributeContext);
         }
         else if (type === 'custom') {
-            itemContentState = (_m = customMark === null || customMark === void 0 ? void 0 : customMark.state) !== null && _m !== void 0 ? _m : state;
-            itemContentStyle = transformStyle((_p = (_o = customMark === null || customMark === void 0 ? void 0 : customMark.style) !== null && _o !== void 0 ? _o : customMarkStyle) !== null && _p !== void 0 ? _p : style, this._markerData, this._markAttributeContext);
+            itemContentState = (_o = customMark === null || customMark === void 0 ? void 0 : customMark.state) !== null && _o !== void 0 ? _o : state;
+            itemContentStyle = transformStyle((_q = (_p = customMark === null || customMark === void 0 ? void 0 : customMark.style) !== null && _p !== void 0 ? _p : customMarkStyle) !== null && _q !== void 0 ? _q : style, this._markerData, this._markAttributeContext);
         }
         const markPointAttrs = {
             zIndex: this.layoutZIndex,
-            interactive: (_q = this._spec.interactive) !== null && _q !== void 0 ? _q : true,
-            hover: (_r = this._spec.interactive) !== null && _r !== void 0 ? _r : true,
-            select: (_s = this._spec.interactive) !== null && _s !== void 0 ? _s : true,
+            interactive: (_r = this._spec.interactive) !== null && _r !== void 0 ? _r : true,
+            hover: (_s = this._spec.interactive) !== null && _s !== void 0 ? _s : true,
+            select: (_t = this._spec.interactive) !== null && _t !== void 0 ? _t : true,
             position: { x: 0, y: 0 },
-            clipInRange: (_t = this._spec.clip) !== null && _t !== void 0 ? _t : false,
+            clipInRange: (_u = this._spec.clip) !== null && _u !== void 0 ? _u : false,
             itemContent: Object.assign(Object.assign({ type, offsetX: transformOffset(itemContent.offsetX, this._relativeSeries.getRegion()), offsetY: transformOffset(itemContent.offsetX, this._relativeSeries.getRegion()) }, restItemContent), { style: transformStyle(itemContentStyle, this._markerData, this._markAttributeContext) }),
             targetSymbol: {
-                offset: (_u = targetSymbol.offset) !== null && _u !== void 0 ? _u : 0,
-                visible: (_v = targetSymbol.visible) !== null && _v !== void 0 ? _v : false,
-                size: (_w = targetSymbol.size) !== null && _w !== void 0 ? _w : 20,
+                offset: (_v = targetSymbol.offset) !== null && _v !== void 0 ? _v : 0,
+                visible: (_w = targetSymbol.visible) !== null && _w !== void 0 ? _w : false,
+                size: (_x = targetSymbol.size) !== null && _x !== void 0 ? _x : 20,
                 style: transformStyle(targetSymbol.style, this._markerData, this._markAttributeContext)
             },
             state: {
-                line: transformState((_y = (_x = this._spec.itemLine.line) === null || _x === void 0 ? void 0 : _x.state) !== null && _y !== void 0 ? _y : {}, this._markerData, this._markAttributeContext),
-                lineStartSymbol: transformState((_0 = (_z = this._spec.itemLine.startSymbol) === null || _z === void 0 ? void 0 : _z.state) !== null && _0 !== void 0 ? _0 : {}, this._markerData, this._markAttributeContext),
-                lineEndSymbol: transformState((_2 = (_1 = this._spec.itemLine.endSymbol) === null || _1 === void 0 ? void 0 : _1.state) !== null && _2 !== void 0 ? _2 : {}, this._markerData, this._markAttributeContext),
+                line: transformState((_z = (_y = this._spec.itemLine.line) === null || _y === void 0 ? void 0 : _y.state) !== null && _z !== void 0 ? _z : {}, this._markerData, this._markAttributeContext),
+                lineStartSymbol: transformState((_1 = (_0 = this._spec.itemLine.startSymbol) === null || _0 === void 0 ? void 0 : _0.state) !== null && _1 !== void 0 ? _1 : {}, this._markerData, this._markAttributeContext),
+                lineEndSymbol: transformState((_3 = (_2 = this._spec.itemLine.endSymbol) === null || _2 === void 0 ? void 0 : _2.state) !== null && _3 !== void 0 ? _3 : {}, this._markerData, this._markAttributeContext),
                 itemContent: transformState(itemContentState, this._markerData, this._markAttributeContext),
-                textBackground: transformState((_4 = (_3 = this._spec.itemContent.text) === null || _3 === void 0 ? void 0 : _3.labelBackground) === null || _4 === void 0 ? void 0 : _4.state, this._markerData, this._markAttributeContext),
-                targetItem: transformState((_6 = (_5 = this._spec.targetSymbol) === null || _5 === void 0 ? void 0 : _5.state) !== null && _6 !== void 0 ? _6 : {}, this._markerData, this._markAttributeContext)
+                textBackground: transformState((_5 = (_4 = this._spec.itemContent.text) === null || _4 === void 0 ? void 0 : _4.labelBackground) === null || _5 === void 0 ? void 0 : _5.state, this._markerData, this._markAttributeContext),
+                targetItem: transformState((_7 = (_6 = this._spec.targetSymbol) === null || _6 === void 0 ? void 0 : _6.state) !== null && _7 !== void 0 ? _7 : {}, this._markerData, this._markAttributeContext)
             },
-            animation: (_7 = this._spec.animation) !== null && _7 !== void 0 ? _7 : false,
+            animation: (_8 = this._spec.animation) !== null && _8 !== void 0 ? _8 : false,
             animationEnter: this._spec.animationEnter,
             animationExit: this._spec.animationExit,
             animationUpdate: this._spec.animationUpdate