@visactor/react-vchart 2.0.20-alpha.2 → 2.0.20-alpha.3

package/build/index.js

@@ -20641,9 +20641,10 @@
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else {
           const {
-            backgroundCornerRadius: backgroundCornerRadius
+            backgroundCornerRadius: backgroundCornerRadius,
+            backgroundOpacity = 1
           } = graphic.attribute;
-          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
         }
         shouldReCalBounds && boundsAllocate.free(b), restore();
       }
@@ -37417,8 +37418,9 @@
           const label = labels[i];
           if (!label) continue;
           const baseMark = this.getRelatedGraphic(label.attribute);
-          let backgroundColor = baseMark.getAttributes(!0).fill,
-            foregroundColor = label.attribute.fill;
+          let backgroundColor = baseMark.getAttributes(!0).fill;
+          const backgroundOpacity = baseMark.getAttributes(!0).fillOpacity;
+          let foregroundColor = label.attribute.fill;
           if (isObject$2(backgroundColor) && backgroundColor.gradient) {
             const firstStopColor = null === (_g = null === (_f = backgroundColor.stops) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.color;
             firstStopColor && (backgroundColor = firstStopColor, foregroundColor = firstStopColor);
@@ -37432,11 +37434,26 @@
             if (fill && label.setAttributes({
               fill: fill
             }), 0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
-            const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
-            stroke && label.setAttributes({
-              stroke: stroke
-            });
+            if ("background" === interactInvertType) label.setAttributes({
+              stroke: !1
+            });else {
+              const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
+              stroke && label.setAttributes({
+                stroke: stroke
+              });
+            }
           } else if (isIntersect && "none" !== interactInvertType) {
+            if ("background" === interactInvertType) {
+              const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
+              fill && label.setAttributes({
+                fill: fill
+              }), label.setAttributes({
+                stroke: !1,
+                background: backgroundColor,
+                backgroundOpacity: backgroundOpacity
+              });
+              continue;
+            }
             if (0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
             if (label.attribute.stroke) {
               label.setAttributes({
@@ -37453,6 +37470,9 @@
               stroke: stroke
             });
           }
+          !1 === isInside && "background" === interactInvertType && label.setAttributes({
+            background: null
+          });
         }
       }
       _canPlaceInside(textBound, shapeBound) {
@@ -42996,7 +43016,31 @@
         return graphicCreator.symbol(style);
       }
       _renderHandlerText(value, position) {
-        var _a, _b, _c;
+        return graphicCreator.text(this._getHandlerTextAttributes(value, position));
+      }
+      _getHandlerPosition(isStart) {
+        return this.attribute.range && isStart ? "start" : "end";
+      }
+      _getHandlerTextStyle(value, position) {
+        const {
+          align: align,
+          handlerSize = 14,
+          handlerText = {},
+          railHeight: railHeight,
+          railWidth: railWidth,
+          slidable: slidable
+        } = this.attribute;
+        return isFunction$1(handlerText.style) ? handlerText.style(value, position, {
+          layout: this.attribute.layout,
+          align: align,
+          railWidth: railWidth,
+          railHeight: railHeight,
+          handlerSize: handlerSize,
+          slidable: slidable
+        }) : handlerText.style;
+      }
+      _getHandlerTextAttributes(value, position) {
+        var _a, _b;
         const {
             align: align,
             handlerSize = 14,
@@ -43008,13 +43052,13 @@
           isHorizontal = this._isHorizontal,
           pos = this.calculatePosByValue(value, position),
           textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
+          handlerTextStyle = this._getHandlerTextStyle(value, position),
           textStyle = {
             text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
-            lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+            lineHeight: null == handlerTextStyle ? void 0 : handlerTextStyle.lineHeight,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
-        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos), Object.assign(Object.assign({}, textStyle), handlerTextStyle);
       }
       _renderTooltip() {
         var _a;
@@ -43142,31 +43186,19 @@
         }
       }
       _updateHandler(handler, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal;
         handler.setAttribute(isHorizontal ? "x" : "y", position);
         const updateHandlerText = handler.name === SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
         if (updateHandlerText) {
-          const {
-            handlerText = {}
-          } = this.attribute;
-          updateHandlerText.setAttributes({
-            text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_a = handlerText.precision) && void 0 !== _a ? _a : 0),
-            [isHorizontal ? "x" : "y"]: position
-          });
+          const handlerPosition = this._getHandlerPosition(handler.name === SLIDER_ELEMENT_NAME.startHandler);
+          updateHandlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         }
         handler.name === SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
       }
       _updateHandlerText(handlerText, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal,
-          {
-            handlerText: handlerTextAttr = {}
-          } = this.attribute;
-        handlerText.setAttributes({
-          [isHorizontal ? "x" : "y"]: position,
-          text: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
-        });
+          handlerPosition = this._getHandlerPosition(handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText);
+        handlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         const updateHandler = handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
         updateHandler && updateHandler.setAttributes({
           [isHorizontal ? "x" : "y"]: position
@@ -47252,24 +47284,11 @@
       updateLayoutTag() {
         this._layoutState = LayoutState.before;
       }
-      _isGeoRegionRoamDragEnabled() {
-        var _a, _b;
-        const chartSpec = null === (_b = null === (_a = this._compileChart) || void 0 === _a ? void 0 : _a.getSpec) || void 0 === _b ? void 0 : _b.call(_a),
-          regions = null == chartSpec ? void 0 : chartSpec.region;
-        return !!isArray$1(regions) && regions.some(region => {
-          var _a;
-          return !("geo" !== (null == region ? void 0 : region.coordinate) || !region.roam) && (!0 === region.roam || null === (_a = region.roam.drag) || void 0 === _a || _a);
-        });
-      }
-      _shouldDisableCanvasTouchAction() {
-        if (!isTrueBrowser(this._option.mode)) return !1;
-        return !1 === (isValid$1(this._option.supportsTouchEvents) ? this._option.supportsTouchEvents : vglobal.supportsTouchEvents) && this._isGeoRegionRoamDragEnabled();
-      }
       _setCanvasStyle() {
         if (this._stage && this._container.dom && !isString$1(this._container.dom)) {
           this._container.dom.style.display = "block", this._container.dom.style.position = "relative";
           const canvas = this.getCanvas();
-          canvas && (canvas.style.display = "block", canvas.style.touchAction = this._shouldDisableCanvasTouchAction() ? "none" : "");
+          canvas && (canvas.style.display = "block");
         }
       }
       compile(ctx, option) {
@@ -47277,7 +47296,7 @@
         const {
           chart: chart
         } = ctx;
-        this._compileChart = chart, this.initView(), this._stage && ("render" !== (null == option ? void 0 : option.actionSource) && this._cachedMarks && (this.reuseOrMorphing(option.morphConfig), this._cachedMarks = null), chart.compile(), this._setCanvasStyle(), chart.afterCompile());
+        this._compileChart = chart, this.initView(), this._stage && ("render" !== (null == option ? void 0 : option.actionSource) && this._cachedMarks && (this.reuseOrMorphing(option.morphConfig), this._cachedMarks = null), chart.compile(), chart.afterCompile());
       }
       clearNextRender() {
         return !!this._nextRafId && (vglobal.getSpecifiedCancelAnimationFrame(10)(this._nextRafId), this._nextRafId = null, !0);
@@ -49166,6 +49185,9 @@
           });
         });
       }
+      clearAllStateInfo() {
+        this._stateInfoList = [];
+      }
       _isMultiMark() {
         return !this._mark || isMultiDatumMark(this._mark.type);
       }
@@ -49868,7 +49890,9 @@
         this._lastMark = mark;
       }
       reuse(mark) {
-        this.type === mark.type && (this._product = mark.getProduct(), this._graphics = mark.getGraphics(), this._graphicMap = mark._graphicMap, this._graphicMap.forEach(g => {
+        this.type === mark.type && (this._product = mark.getProduct(), this._product.clearStates(), this._graphics = mark.getGraphics(), this._graphics.forEach(g => {
+          g.clearStates();
+        }), this._graphicMap = mark._graphicMap, this._graphicMap.forEach(g => {
           g.context = Object.assign(Object.assign({}, g.context), this._getCommonContext());
         }), this._dataByKey = mark._dataByKey, this._prevDataByKey = mark._prevDataByKey, this.needClear = mark.needClear);
       }
@@ -50173,7 +50197,7 @@
         (null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) ? (this._graphicMap.clear(), this._runProgressiveStep()) : (this._runJoin(markData), this._runState(this._graphics), this._runEncoder(this._graphics), this._runEncoderTransform(this._graphics, !1), this._runApplyGraphic(this._graphics)), this._updateAttrsOfGroup();
       }
       render() {
-        this.isCommited() && (!this.getVisible() || this._skipBeforeLayouted && this.getCompiler().getLayoutState() === LayoutState.before || (log(`render mark: ${this.getProductId()}, type is ${this.type}`), this.renderInner()), this.uncommit());
+        this.isCommited() && (!this.getVisible() || this._skipBeforeLayouted && this.getCompiler().getLayoutState() === LayoutState.before || (this._product || this._initProduct(), log(`render mark: ${this.getProductId()}, type is ${this.type}`), this.renderInner()), this.uncommit());
       }
       updateMarkState(key) {
         if (!this._product) return;
@@ -50314,6 +50338,11 @@
       runAnimation() {
         this._runStateAnimation(this.getGraphics());
       }
+      clearBeforeReInit() {
+        this.state.clearAllStateInfo(), this.uncommit(), this.stateStyle = {}, this.getGraphics().forEach(g => {
+          g.clearStates();
+        });
+      }
     }
 
     class GroupMark extends BaseMark {
@@ -53045,7 +53074,7 @@
         super.reInit(spec);
         const marks = this.getMarksWithoutRoot();
         marks.forEach(mark => {
-          this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
+          mark.clearBeforeReInit(), this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
         }), this.initMarkStyle(), marks.forEach(mark => {
           mark.commit(!1);
         }), this._updateExtensionMarkSpec(), this._updateSpecData(), this._tooltipHelper && this._tooltipHelper.updateTooltipSpec();
@@ -54924,6 +54953,9 @@
       getTickData(index = 0) {
         return this._tickData[index];
       }
+      getVisible() {
+        return this._visible;
+      }
       get visible() {
         return this._visible;
       }
@@ -54934,10 +54966,14 @@
         return this._coordinateType;
       }
       constructor(spec, options) {
-        var _a;
-        super(spec, options), this.specKey = "axes", this._scales = [], this._tickData = [], this._visible = !0, this._tick = void 0, this._onTickDataChange = tickData => {
+        var _a, _b;
+        super(spec, options), this.specKey = "axes", this._scales = [], this._tickData = [], this._visible = !0, this._specVisible = !0, this._hideWhenEmpty = !1, this._tick = void 0, this._onTickDataChange = tickData => {
           this._forceLayout(), null == tickData || tickData.updateData();
-        }, this._visible = null === (_a = spec.visible) || void 0 === _a || _a, this._coordinateType = "none";
+        }, this._specVisible = null === (_a = spec.visible) || void 0 === _a || _a, this._hideWhenEmpty = null !== (_b = spec.hideWhenEmpty) && void 0 !== _b && _b, this._visible = this._specVisible, this._coordinateType = "none";
+      }
+      setAttrFromSpec() {
+        var _a, _b;
+        super.setAttrFromSpec(), this._specVisible = null === (_a = this._spec.visible) || void 0 === _a || _a, this._hideWhenEmpty = null !== (_b = this._spec.hideWhenEmpty) && void 0 !== _b && _b, this._visible = this._specVisible, this._scale && this._refreshVisibilityByData();
       }
       getVRenderComponents() {
         var _a, _b;
@@ -54945,7 +54981,7 @@
       }
       created() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        if (super.created(), this.setSeriesAndRegionsFromSpec(), this.initEvent(), this.initScales(), this.updateSeriesScale(), this._shouldComputeTickData() && this._initData(), this._visible) {
+        if (super.created(), this.setSeriesAndRegionsFromSpec(), this.initEvent(), this.initScales(), this.updateSeriesScale(), this._refreshVisibilityByData(), this._shouldComputeTickData() && this._initData(), this._specVisible) {
           const axisMark = this._createMark({
             type: "component",
             name: `axis-${this.getOrient()}`
@@ -54974,7 +55010,7 @@
               interactive: !1
             }), this._marks.addMark(gridMark), this._gridMark = gridMark;
           }
-          if ((null === (_h = this._option.globalInstance) || void 0 === _h ? void 0 : _h.isAnimationEnable()) && !1 !== get$1(this._option.getChart().getSpec(), "animation") && !0 === this._spec.animation) {
+          if (this._syncComponentVisibility(), (null === (_h = this._option.globalInstance) || void 0 === _h ? void 0 : _h.isAnimationEnable()) && !1 !== get$1(this._option.getChart().getSpec(), "animation") && !0 === this._spec.animation) {
             const axisAnimateConfig = animationConfig(null === (_j = Factory.getAnimationInKey("axis")) || void 0 === _j ? void 0 : _j(), {
               appear: null !== (_l = null !== (_k = this._spec.animationAppear) && void 0 !== _k ? _k : get$1(this._option.getChart().getSpec(), "animationAppear.axis")) && void 0 !== _l ? _l : get$1(this._option.getChart().getSpec(), "animationAppear"),
               disappear: null !== (_o = null !== (_m = this._spec.animationDisappear) && void 0 !== _m ? _m : get$1(this._option.getChart().getSpec(), "animationDisappear.axis")) && void 0 !== _o ? _o : get$1(this._option.getChart().getSpec(), "animationDisappear"),
@@ -54989,7 +55025,7 @@
         }
       }
       _shouldComputeTickData() {
-        return this.getVisible() || this._spec.forceInitTick;
+        return this._specVisible && (this.getVisible() || this._spec.forceInitTick || this._hideWhenEmpty);
       }
       _initData() {
         const tickData = this._initTickDataSet(this._tickTransformOption()),
@@ -55000,7 +55036,7 @@
       }
       collectData(depth, rawData) {
         const data = [];
-        return eachSeries(this._regions, s => {
+        return this._regions && eachSeries(this._regions, s => {
           var _a;
           let field = this.collectSeriesField(depth, s);
           if (field = isArray$1(field) ? isContinuous(this._scale.type) ? field : [field[0]] : [field], depth || (this._dataFieldText = s.getFieldAlias(field[0])), field) {
@@ -55076,6 +55112,22 @@
         });
       }
       updateScaleDomain() {}
+      _hasCollectedSeriesData() {
+        return this.collectData(0).length > 0;
+      }
+      _refreshVisibilityByData() {
+        const nextVisible = this._specVisible && (!this._hideWhenEmpty || this._hasCollectedSeriesData()),
+          changed = this._visible !== nextVisible;
+        return this._visible = nextVisible, (this._axisMark || this._gridMark) && this._syncComponentVisibility(), changed && this._forceLayout(), changed;
+      }
+      _syncComponentVisibility() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        null === (_a = this._axisMark) || void 0 === _a || _a.setVisible(this._visible), null === (_b = this._gridMark) || void 0 === _b || _b.setVisible(this._visible && !1 !== (null === (_c = this._spec.grid) || void 0 === _c ? void 0 : _c.visible)), null === (_g = null === (_f = null === (_e = null === (_d = this._axisMark) || void 0 === _d ? void 0 : _d.getComponent) || void 0 === _e ? void 0 : _e.call(_d)) || void 0 === _f ? void 0 : _f.setAttributes) || void 0 === _g || _g.call(_f, {
+          visibleAll: this._visible
+        }), null === (_l = null === (_k = null === (_j = null === (_h = this._gridMark) || void 0 === _h ? void 0 : _h.getComponent) || void 0 === _j ? void 0 : _j.call(_h)) || void 0 === _k ? void 0 : _k.setAttributes) || void 0 === _l || _l.call(_k, {
+          visibleAll: this._visible && !1 !== (null === (_m = this._spec.grid) || void 0 === _m ? void 0 : _m.visible)
+        });
+      }
       _clearRawDomain() {}
       onLayoutEnd() {
         this.updateScaleRange();
@@ -55424,6 +55476,7 @@
           }
           return result.width = Math.ceil(result.width), result.height = Math.ceil(result.height), this._layout.setRectInSpec(this._layoutCacheProcessing(result));
         }, this._transformLayoutPadding = padding => ("left" === this.layoutOrient || "right" === this.layoutOrient ? (padding.top = 0, padding.bottom = 0) : "top" !== this.layoutOrient && "bottom" !== this.layoutOrient || (padding.left = 0, padding.right = 0), padding), this._updateAxisLayout = () => {
+          if (!this._visible) return void this._syncComponentVisibility();
           const startPoint = this.getLayoutStartPoint(),
             _a = this._getUpdateAttribute(!1),
             {
@@ -55437,7 +55490,7 @@
           this._axisMark.setSimpleStyle(axisAttrs), this._gridMark && this._gridMark.setSimpleStyle(mergeSpec({
             x: startPoint.x,
             y: startPoint.y
-          }, this._getGridAttributes(), updateGridAttrs));
+          }, this._getGridAttributes(), updateGridAttrs)), this._syncComponentVisibility();
         }, this._fixAxisOnZero = () => {
           const {
             onZero: onZero,
@@ -55565,7 +55618,7 @@
       }
       setAttrFromSpec() {
         var _a;
-        if (super.setAttrFromSpec(), this.visible) {
+        if (super.setAttrFromSpec(), this._specVisible) {
           isXAxis(this.getOrient()) ? isUndefined$1(this._spec.maxHeight) && (this._spec.maxHeight = "30%") : isUndefined$1(this._spec.maxWidth) && (this._spec.maxWidth = "30%");
           const axisStyle = this._getAxisAttributes();
           axisStyle.label.formatMethod = this._getLabelFormatMethod(), axisStyle.verticalFactor = "top" === this.getOrient() || "right" === this.getOrient() ? -1 : 1, this._axisStyle = axisStyle;
@@ -55790,7 +55843,7 @@
         })] : [];
       }
       initEvent() {
-        super.initEvent(), this.visible && (this.event.on(ChartEvent.layoutEnd, this._updateAxisLayout), this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero), this.event.on(ChartEvent.layoutRectUpdate, () => {
+        super.initEvent(), this._specVisible && (this.event.on(ChartEvent.layoutEnd, this._updateAxisLayout), this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero), this.event.on(ChartEvent.layoutRectUpdate, () => {
           this._clearLayoutCache();
         }));
       }
@@ -56128,7 +56181,7 @@
         if (domain = null != domain ? domain : this._scale.domain(), this.extendDomain(domain), this.includeZero(domain), this.setDomainMinMax(domain), this.niceDomain(domain), this._scale.domain(domain, this._nice), this._nice) {
           !this.setScaleNice() && this._scale.rescale();
         }
-        this._updateNiceLabelFormatter(domain), this._domainAfterSpec = this._scale.domain(), this.event.emit(ChartEvent.scaleDomainUpdate, {
+        this._updateNiceLabelFormatter(domain), this._domainAfterSpec = this._scale.domain(), this._refreshVisibilityByData(), this.event.emit(ChartEvent.scaleDomainUpdate, {
           model: this
         }), this.event.emit(ChartEvent.scaleUpdate, {
           model: this,
@@ -56517,7 +56570,7 @@
             domain = this.computeBandDomain(data);
           this._scales[i].domain(domain.sort((a, b) => this._rawDomainIndex[i][a] - this._rawDomainIndex[i][b]));
         }
-        this.transformScaleDomain(), this.event.emit(ChartEvent.scaleDomainUpdate, {
+        this.transformScaleDomain(), this._refreshVisibilityByData(), this.event.emit(ChartEvent.scaleDomainUpdate, {
           model: this
         }), this.event.emit(ChartEvent.scaleUpdate, {
           model: this,
@@ -63875,7 +63928,9 @@
             x: calcLayoutNumber(null === (_a = this._spec) || void 0 === _a ? void 0 : _a.centerX, layoutRect.width, layoutRect, layoutRect.width / 2),
             y: calcLayoutNumber(null === (_b = this._spec) || void 0 === _b ? void 0 : _b.centerY, layoutRect.height, layoutRect, layoutRect.height / 2)
           };
-        }, this._startAngle = POLAR_START_RADIAN, this._endAngle = POLAR_END_RADIAN, this._pieMark = null, this._labelMark = null, this._labelLineMark = null, this._emptyArcMark = null, this.dataToCentralPosition = datum => {
+        }, this._startAngle = POLAR_START_RADIAN, this._endAngle = POLAR_END_RADIAN, this._pieMark = null, this._labelMark = null, this._labelLineMark = null, this._emptyArcMark = null, this._pendingViewDataLabelUpdate = !1, this.flushViewDataLabelUpdate = () => {
+          this._pendingViewDataLabelUpdate && (this._pendingViewDataLabelUpdate = !1, this._viewDataLabel.getDataView().reRunAllTransform());
+        }, this.dataToCentralPosition = datum => {
           const angle = datum[ARC_MIDDLE_ANGLE];
           if (isNil$1(angle)) return null;
           const radius = this.computeDatumRadius(datum),
@@ -64009,11 +64064,11 @@
       }
       initEvent() {
         var _a;
-        super.initEvent(), null === (_a = this._viewDataLabel.getDataView()) || void 0 === _a || _a.target.addListener("change", this.viewDataLabelUpdate.bind(this));
+        super.initEvent(), null === (_a = this._viewDataLabel.getDataView()) || void 0 === _a || _a.target.addListener("change", this.viewDataLabelUpdate.bind(this)), this.event.on(ChartEvent.afterRender, this.flushViewDataLabelUpdate);
       }
       initGroups() {}
       onLayoutEnd() {
-        this._viewDataLabel.getDataView().reRunAllTransform(), this.onMarkPositionUpdate(), super.onLayoutEnd();
+        this._pendingViewDataLabelUpdate = !0, this.onMarkPositionUpdate(), super.onLayoutEnd();
       }
       getDimensionField() {
         return this._seriesField ? [this._seriesField] : [];
@@ -64333,7 +64388,7 @@
         }, this.getRefLayoutRect = () => this.getRegions()[0].getLayoutRect(), this._coordinateType = "polar";
       }
       setAttrFromSpec() {
-        super.setAttrFromSpec(), this.visible && (this._axisStyle = this._getAxisAttributes(), this._gridStyle = this._getGridAttributes()), this._tick = this._spec.tick, this._orient = "angle" === this._spec.orient ? "angle" : "radius", this._center = this._spec.center, this._startAngle = degreeToRadian(this._spec.startAngle), this._endAngle = degreeToRadian(this._spec.endAngle), this._inverse = this._spec.inverse;
+        super.setAttrFromSpec(), this._specVisible && (this._axisStyle = this._getAxisAttributes(), this._gridStyle = this._getGridAttributes()), this._tick = this._spec.tick, this._orient = "angle" === this._spec.orient ? "angle" : "radius", this._center = this._spec.center, this._startAngle = degreeToRadian(this._spec.startAngle), this._endAngle = degreeToRadian(this._spec.endAngle), this._inverse = this._spec.inverse;
       }
       _tickTransformOption() {
         var _a;
@@ -77153,6 +77208,12 @@
       }
       return t;
     };
+    function transformHandlerText(handlerText) {
+      if (!handlerText) return handlerText;
+      const nextHandlerText = Object.assign({}, handlerText),
+        handlerTextStyle = handlerText.style;
+      return isFunction$1(handlerTextStyle) ? nextHandlerText.style = (value, position, context) => transformToGraphic(handlerTextStyle(value, position, context)) : isEmpty(handlerTextStyle) || (nextHandlerText.style = transformToGraphic(handlerTextStyle)), nextHandlerText;
+    }
     function getContinuousLegendAttributes(spec) {
       const _a = mergeSpec({}, spec),
         {
@@ -77183,7 +77244,7 @@
         attrs = __rest$6(_a, ["title", "handler", "rail", "track", "startText", "endText", "handlerText", "sizeBackground", "background", "type", "id", "visible", "orient", "position", "data", "defaultSelected", "field", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
       return title.visible ? attrs.title = transformLegendTitleAttributes(title) : attrs.title = {
         visible: !1
-      }, attrs.showHandler = !1 !== handler.visible, isEmpty(handler.style) || (attrs.handlerStyle = transformToGraphic(handler.style)), isValid$1(rail.width) && (attrs.railWidth = rail.width), isValid$1(rail.height) && (attrs.railHeight = rail.height), isEmpty(rail.style) || (attrs.railStyle = transformToGraphic(rail.style)), isEmpty(track.style) || (attrs.trackStyle = transformToGraphic(track.style)), attrs.startText = transformComponentStyle(startText), attrs.endText = transformComponentStyle(endText), attrs.handlerText = transformComponentStyle(handlerText), isEmpty(sizeBackground) || (attrs.sizeBackground = transformToGraphic(sizeBackground)), background.visible && !isEmpty(background.style) && (mergeSpec(attrs, background.style), isValid$1(background.padding) && (attrs.padding = background.padding)), attrs;
+      }, attrs.showHandler = !1 !== handler.visible, isEmpty(handler.style) || (attrs.handlerStyle = transformToGraphic(handler.style)), isValid$1(rail.width) && (attrs.railWidth = rail.width), isValid$1(rail.height) && (attrs.railHeight = rail.height), isEmpty(rail.style) || (attrs.railStyle = transformToGraphic(rail.style)), isEmpty(track.style) || (attrs.trackStyle = transformToGraphic(track.style)), attrs.startText = transformComponentStyle(startText), attrs.endText = transformComponentStyle(endText), attrs.handlerText = transformHandlerText(handlerText), isEmpty(sizeBackground) || (attrs.sizeBackground = transformToGraphic(sizeBackground)), background.visible && !isEmpty(background.style) && (mergeSpec(attrs, background.style), isValid$1(background.padding) && (attrs.padding = background.padding)), attrs;
     }
     function isContinuousLegend(type) {
       return "color" === type || "size" === type;