@visactor/vchart 1.7.1 → 1.7.2

package/build/index.js

@@ -44803,7 +44803,7 @@
         }
         const groupMark = isString$1(spec.group) ? this.view.getMarkById(spec.group) : spec.group;
         return this.attach(groupMark), this.join(null === (_a = spec.from) || void 0 === _a ? void 0 : _a.data, spec.key, spec.sort, spec.groupBy, spec.groupSort), this.coordinate(spec.coordinate), this.state(spec.state, this.spec.stateSort), Object.keys(null !== (_b = this.spec.encode) && void 0 !== _b ? _b : {}).forEach(state => {
-          this.encodeState(state, {});
+          this.encodeState(state, {}, !0);
         }), Object.keys(null !== (_c = spec.encode) && void 0 !== _c ? _c : {}).forEach(state => {
           this.encodeState(state, spec.encode[state]);
         }), this.animation(spec.animation), this.animationState(spec.animationState), this.morph(spec.morph, spec.morphKey, spec.morphElementKey), this.layout(spec.layout), this.configure(spec), this.transform(spec.transform), this.parseAddition(spec), this.spec = spec, this.markType = spec.type, this.commit(), this;
@@ -44876,15 +44876,20 @@
       state(state, stateSort) {
         return this.spec.stateSort = stateSort, this.setFunctionSpec(state, "state");
       }
-      encode(channel, value) {
-        return this.encodeState(DiffState.update, channel, value);
+      encode(channel, value, clear) {
+        return this.encodeState(DiffState.update, channel, value, clear);
       }
-      encodeState(state, channel, value) {
+      encodeState(state, channel, value, clear) {
         if (state === DiffState.enter && (this._isReentered = !0), this.spec.encode[state]) {
           const lastEncoder = this.spec.encode[state];
-          isFunctionType(lastEncoder) ? this.detach(parseEncodeType(lastEncoder, this.view)) : isString$1(channel) ? this.detach(parseEncodeType(this.spec.encode[state][channel], this.view)) : Object.keys(channel).forEach(c => {
-            this.detach(parseEncodeType(this.spec.encode[state][c], this.view));
-          });
+          if (isFunctionType(lastEncoder)) this.detach(parseEncodeType(lastEncoder, this.view));else {
+            const isSingleChannel = isString$1(channel);
+            isSingleChannel && clear || !isSingleChannel && value ? (Object.keys(lastEncoder).forEach(c => {
+              this.detach(parseEncodeType(lastEncoder[c], this.view));
+            }), this.spec.encode[state] = {}) : isSingleChannel ? this.detach(parseEncodeType(lastEncoder[channel], this.view)) : Object.keys(channel).forEach(c => {
+              this.detach(parseEncodeType(lastEncoder[c], this.view));
+            });
+          }
         } else this.spec.encode[state] = {};
         return isString$1(channel) ? (this.spec.encode[state][channel] = value, this.attach(parseEncodeType(value, this.view))) : isFunctionType(channel) ? (this.spec.encode[state] = channel, this.attach(parseEncodeType(channel, this.view))) : (Object.assign(this.spec.encode[state], channel), channel && Object.values(channel).forEach(channelEncoder => {
           this.attach(parseEncodeType(channelEncoder, this.view));
@@ -54856,19 +54861,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _prepareSpecBeforeMergingTheme(obj) {
             return obj;
         }
-        setCurrentTheme(noRender) {
-            return __awaiter$h(this, void 0, void 0, function* () {
-                const modifyConfig = () => {
-                    this.reInit(this._getTheme());
-                    return { change: true, reMake: false };
-                };
-                if (noRender) {
-                    modifyConfig();
-                }
-                else {
-                    yield this._option.globalInstance.updateCustomConfigAndRerender(modifyConfig);
-                }
-            });
+        setCurrentTheme() {
+            this.reInit(this._getTheme());
         }
         updateLayoutAttribute() {
         }
@@ -56515,9 +56509,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
-    const keptInUpdateAttribute = {
-        defined: true
-    };
     class CompilableMark extends GrammarItem {
         getSkipTheme() {
             return this._skipTheme;
@@ -56738,10 +56729,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._product) {
                 return;
             }
-            const { enterStyles } = this._separateStyle();
-            if (enterStyles) {
-                this._product.encodeState('group', enterStyles);
-            }
+            const { enterStyles, updateStyles } = this._separateStyle();
+            this._product.encodeState('group', enterStyles, true);
+            this._product.encode(updateStyles, true);
         }
         _separateStyle() {
             const _a = this.stateStyle, _b = STATE_VALUE_ENUM.STATE_NORMAL, normalStyle = _a[_b]; __rest$8(_a, [typeof _b === "symbol" ? _b : _b + ""]);
@@ -56751,10 +56741,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._unCompileChannel[key]) {
                     return;
                 }
-                if (keptInUpdateAttribute[key]) {
-                    updateStyles[key] = normalStyle[key].style;
-                }
-                else if (this._option.noSeparateStyle || isStateAttrChangeable(key, normalStyle, this.getFacet())) {
+                if (this._option.noSeparateStyle || isStateAttrChangeable(key, normalStyle, this.getFacet())) {
                     updateStyles[key] = {
                         callback: this.compileCommonAttributeCallback(key, 'normal'),
                         dependency: [this.stateKeyToSignalName('markUpdateRank')]
@@ -56769,10 +56756,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compileEncode() {
             const _a = this.stateStyle, _b = STATE_VALUE_ENUM.STATE_NORMAL; _a[_b]; const temp = __rest$8(_a, [typeof _b === "symbol" ? _b : _b + ""]);
             const { enterStyles, updateStyles } = this._separateStyle();
-            this._product.encode(updateStyles);
-            if (!isEmpty(enterStyles)) {
-                this._product.encodeState('group', enterStyles);
-            }
+            this._product.encode(updateStyles, true);
+            this._product.encodeState('group', enterStyles, true);
             Object.keys(temp).forEach(state => {
                 const styles = {};
                 Object.keys(temp[state]).forEach(key => {
@@ -56784,7 +56769,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         dependency: [this.stateKeyToSignalName('markUpdateRank')]
                     };
                 });
-                this._product.encodeState(state, styles);
+                this._product.encodeState(state, styles, true);
             });
             if (this._skipBeforeLayouted) {
                 this._product.layout({
@@ -57125,6 +57110,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (stateStyle.referer) {
                 return stateStyle.referer._computeAttribute(key, state);
             }
+            if (typeof stateStyle.style === 'function') {
+                return (datum, opt) => stateStyle.style(datum, this._attributeContext, opt, this.getDataView());
+            }
             if (GradientType.includes(stateStyle.style.gradient)) {
                 return this._computeGradientAttr(stateStyle.style);
             }
@@ -57135,10 +57123,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return (datum, opt) => stateStyle.style.scale.scale(datum[stateStyle.style.field]);
             }
             return (datum, opt) => {
-                var _a;
-                if (typeof stateStyle.style === 'function') {
-                    return (_a = stateStyle.style) === null || _a === void 0 ? void 0 : _a.call(stateStyle, datum, this._attributeContext, opt, this.getDataView());
-                }
                 return stateStyle.style;
             };
         }
@@ -58057,7 +58041,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     const reSize = this._shouldChartResize(lastSpec);
                     (_c = (_b = this._compiler) === null || _b === void 0 ? void 0 : _b.getVGrammarView()) === null || _c === void 0 ? void 0 : _c.updateLayoutTag();
-                    return mergeUpdateResult(this._chart.updateSpec(spec, morphConfig), {
+                    return mergeUpdateResult(this._chart.updateSpec(spec), {
                         change: reSize,
                         reMake: false,
                         reCompile: false,
@@ -58089,7 +58073,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 const reSize = this._shouldChartResize(lastSpec);
                 (_d = (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.getVGrammarView()) === null || _d === void 0 ? void 0 : _d.updateLayoutTag();
-                return mergeUpdateResult(this._chart.updateSpec(spec, morphConfig), {
+                return mergeUpdateResult(this._chart.updateSpec(spec), {
                     change: reSize,
                     reMake: false,
                     reCompile: false,
@@ -58303,7 +58287,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 yield this.updateCustomConfigAndRerender(() => {
                     var _a;
                     this._updateCurrentTheme(name);
-                    (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(true);
+                    (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme();
                     return { change: true, reMake: false };
                 });
                 return this;
@@ -58316,7 +58300,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.updateCustomConfigAndRerenderSync(() => {
                 var _a;
                 this._updateCurrentTheme(name);
-                (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(true);
+                (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme();
                 return { change: true, reMake: false };
             });
             return this;
@@ -58626,7 +58610,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.7.1";
+    const version = "1.7.2";
 
     class ChartData {
         get dataList() {
@@ -59594,7 +59578,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._globalScale.getScale('color').range(colorSpec.range);
             }
         }
-        updateSpec(spec, morphConfig) {
+        updateSpec(spec) {
             const result = {
                 change: false,
                 reMake: false,
@@ -59602,7 +59586,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 reSize: false,
                 reCompile: false
             };
-            this.setLayoutTag(true, morphConfig);
+            this.setLayoutTag(true, null, false);
             if (spec.type !== this.type) {
                 result.reMake = true;
                 return result;
@@ -59763,29 +59747,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._layoutRect.y = this.padding.top;
             this._event.emit(exports.ChartEvent.layoutRectUpdate, {});
         }
-        setCurrentTheme(reInit = true) {
+        setCurrentTheme() {
             this.updateChartConfig({ change: true, reMake: false }, this._spec);
-            this.setLayoutTag(true);
+            this.setLayoutTag(true, null, false);
             this.transformSpec(this._spec);
             this.updateGlobalScaleTheme();
-            this.setRegionTheme(reInit);
-            this.setComponentTheme(reInit);
-            this.setSeriesTheme(reInit);
-        }
-        setRegionTheme(reInit = true) {
-            this._regions.forEach((r) => __awaiter$h(this, void 0, void 0, function* () {
-                yield r.setCurrentTheme(reInit);
-            }));
-        }
-        setComponentTheme(reInit = true) {
-            this._components.forEach((c) => __awaiter$h(this, void 0, void 0, function* () {
-                yield c.setCurrentTheme(reInit);
-            }));
-        }
-        setSeriesTheme(reInit = true) {
-            this._series.forEach((s) => __awaiter$h(this, void 0, void 0, function* () {
-                yield s.setCurrentTheme(reInit);
-            }));
+            this._regions.forEach(r => r.setCurrentTheme());
+            this._components.forEach(c => c.setCurrentTheme());
+            this._series.forEach(s => s.setCurrentTheme());
         }
         clear() {
             this.getAllModels().forEach(i => { var _a; return (_a = i.clear) === null || _a === void 0 ? void 0 : _a.call(i); });
@@ -61555,12 +61524,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         reInit(theme, lastSpec) {
             super.reInit(theme);
-            this.initMarkStyle();
-            this.getMarksWithoutRoot().forEach(mark => {
-                if (lastSpec && isEqual$1(lastSpec[mark.name], this._spec[mark.name])) {
-                    return;
-                }
+            const marks = !lastSpec
+                ? this.getMarksWithoutRoot()
+                : this.getMarksWithoutRoot().filter(mark => !isEqual$1(lastSpec[mark.name], this._spec[mark.name]));
+            marks.forEach(mark => {
                 this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
+            });
+            this.initMarkStyle();
+            marks.forEach(mark => {
                 mark.updateStaticEncode();
                 mark.updateLayoutState(true);
             });
@@ -64777,10 +64748,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     chart: (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance) === null || _b === void 0 ? void 0 : _b.getChart()
                 }, 'model');
             };
-            this.getGraphicBounds = () => {
-                var _a, _b, _c;
-                return (_c = (_b = (_a = this.getVRenderComponents()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.AABBBounds) !== null && _c !== void 0 ? _c : super.getGraphicBounds();
-            };
             if (this._option.animation) {
                 this.animate = new AnimateManager({
                     getCompiler: options.getCompiler
@@ -64793,6 +64760,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._regions = (_a = this._regions) !== null && _a !== void 0 ? _a : this._option.getRegionsInIndex();
             this._layout && (this._layout.layoutBindRegionID = this._regions.map(x => x.id));
         }
+        getVRenderComponents() {
+            return this._getNeedClearVRenderComponents();
+        }
         callPlugin(cb) {
             if (this.pluginService) {
                 this.pluginService.getAll().forEach(plugin => cb(plugin));
@@ -64841,7 +64811,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         clear() {
             var _a;
-            const components = this.getVRenderComponents();
+            const components = this._getNeedClearVRenderComponents();
             if (components && components.length) {
                 components.forEach(c => {
                     var _a;
@@ -65442,7 +65412,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         changeRegions(regions) {
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [];
         }
         collectFeatures() {
@@ -69226,20 +69196,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const pointerSpec = this._spec.pointer;
             if (pointerMark) {
                 this.setMarkStyle(pointerMark, {
-                    x: () => {
+                    x: (datum) => {
                         var _a, _b;
-                        const { x } = this.angleAxisHelper.center();
+                        const { x } = this._getPointerAnchor(datum, pointerSpec);
                         const dx = this._getPointerWidth() * ((_b = (_a = pointerSpec === null || pointerSpec === void 0 ? void 0 : pointerSpec.center) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0);
                         return x - dx;
                     },
                     y: (datum) => {
                         var _a, _b;
-                        const { y } = this.angleAxisHelper.center();
+                        const { y } = this._getPointerAnchor(datum, pointerSpec);
                         const dy = this._getPointerHeight(datum) * ((_b = (_a = pointerSpec === null || pointerSpec === void 0 ? void 0 : pointerSpec.center) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 0);
                         return y - dy;
                     },
-                    anchor: () => {
-                        const { x, y } = this.angleAxisHelper.center();
+                    anchor: (datum) => {
+                        const { x, y } = this._getPointerAnchor(datum, pointerSpec);
                         return [x, y];
                     },
                     fill: this.getColorAttribute(),
@@ -69266,6 +69236,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.initTooltip();
             this._pointerMark && this._tooltipHelper.activeTriggerSet.mark.add(this._pointerMark);
         }
+        _getPointerAnchor(datum, markSpec) {
+            var _a;
+            if ((_a = markSpec.isOnCenter) !== null && _a !== void 0 ? _a : true) {
+                return this.angleAxisHelper.center();
+            }
+            return this.radiusAxisHelper.coordToPoint({
+                radius: this._innerRadius * this._computeLayoutRadius(),
+                angle: this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]])
+            });
+        }
         _getPointerWidth() {
             return this._spec.pointer.width * this._computeLayoutRadius();
         }
@@ -69303,8 +69283,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const pinBackgroundSpec = this._spec.pinBackground;
             if (pinBackgroundMark) {
                 this.setMarkStyle(pinBackgroundMark, {
-                    x: () => this.angleAxisHelper.center().x,
-                    y: () => this.angleAxisHelper.center().y,
+                    x: (datum) => this._getPointerAnchor(datum, pinBackgroundSpec).x,
+                    y: (datum) => this._getPointerAnchor(datum, pinBackgroundSpec).y,
                     scaleX: () => pinBackgroundSpec.width * this._computeLayoutRadius(),
                     scaleY: () => pinBackgroundSpec.height * this._computeLayoutRadius(),
                     fill: this.getColorAttribute(),
@@ -69317,8 +69297,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const pinSpec = this._spec.pin;
             if (pinMark) {
                 this.setMarkStyle(pinMark, {
-                    x: () => this.angleAxisHelper.center().x,
-                    y: () => this.angleAxisHelper.center().y,
+                    x: (datum) => this._getPointerAnchor(datum, pinSpec).x,
+                    y: (datum) => this._getPointerAnchor(datum, pinSpec).y,
                     scaleX: () => pinSpec.width * this._computeLayoutRadius(),
                     scaleY: () => pinSpec.height * this._computeLayoutRadius(),
                     fill: this.getColorAttribute(),
@@ -69388,7 +69368,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initMark() {
             super.initMark();
             this._trackMark = this._createMark(GaugeSeries.mark.track, {
-                parent: this._arcGroupMark
+                parent: this._arcGroupMark,
+                dataView: false
             });
             this._segmentMark = this._createMark(GaugeSeries.mark.segment, {
                 parent: this._arcGroupMark,
@@ -69428,6 +69409,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._segmentMark && this._tooltipHelper.activeTriggerSet.mark.add(this._segmentMark);
         }
         initTrackMarkStyle() {
+            var _a;
             const trackMark = this._trackMark;
             if (trackMark) {
                 this.setMarkStyle(trackMark, {
@@ -69435,6 +69417,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y: () => this.angleAxisHelper.center().y,
                     startAngle: this._startAngle,
                     endAngle: this._endAngle,
+                    innerRadius: () => { var _a; return this._computeLayoutRadius() * ((_a = this._spec.innerRadius) !== null && _a !== void 0 ? _a : 0); },
+                    outerRadius: () => { var _a, _b; return this._computeLayoutRadius() * ((_b = (_a = this._spec.radius) !== null && _a !== void 0 ? _a : this._spec.outerRadius) !== null && _b !== void 0 ? _b : 1); },
+                    cap: (_a = this._spec.roundCap) !== null && _a !== void 0 ? _a : false,
+                    boundsMode: 'imprecise',
                     cornerRadius: this._spec.cornerRadius,
                     zIndex: 100
                 });
@@ -80531,9 +80517,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._tick = undefined;
             this._visible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [];
         }
+        getVRenderComponents() {
+            var _a, _b;
+            return array((_b = (_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct()) === null || _b === void 0 ? void 0 : _b.getGroupGraphicItem());
+        }
         created() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             super.created();
@@ -81533,7 +81523,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return bounds;
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return this._unitText ? [this._unitText] : [];
         }
     }
@@ -82902,7 +82892,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             (_b = (_a = this.effect).onSelectedDataChange) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.event.emit(exports.ChartEvent.legendSelectedDataChange, { model: this });
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._legendComponent];
         }
         clear() {
@@ -86153,7 +86143,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         changeRegions(regions) {
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [];
         }
         _registerEvent() {
@@ -87146,7 +87136,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             limitTagInBounds(label, this._getLimitBounds());
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [
                 this._xCrosshair,
                 this._xTopLabel,
@@ -87506,7 +87496,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             limitTagInBounds(label, this._getLimitBounds());
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [
                 this._radiusCrosshair,
                 this._radiusLabelCrosshair,
@@ -88209,7 +88199,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._cacheVisibility = isShown;
             return isShown;
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._component];
         }
     }
@@ -88526,7 +88516,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             };
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._component];
         }
     }
@@ -88671,7 +88661,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return attrs;
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._component];
         }
     }
@@ -88871,7 +88861,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         isRelativeModel(model) {
             return eachSeries(this._regions, s => model === s) || this._regions.includes(model);
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._indicatorComponent];
         }
         clear() {
@@ -89264,7 +89254,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError('need at least one series');
             return null;
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._markerComponent];
         }
         onLayoutStart(layoutRect, chartViewRect, ctx) {
@@ -89722,7 +89712,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._cacheAttrs = attrs;
             return this._titleComponent;
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._titleComponent];
         }
         clear() {
@@ -90124,7 +90114,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onRender(ctx) {
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [this._playerComponent];
         }
         _computeLayoutRect(rect, width, height) {
@@ -90236,7 +90226,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         changeRegions(regions) {
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [];
         }
     }
@@ -90497,6 +90487,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             });
         }
+        getVRenderComponents() {
+            const labels = [];
+            this._labelComponentMap.forEach((info, component) => {
+                const graphicItem = component.getProduct().getGroupGraphicItem();
+                if (graphicItem) {
+                    labels.push(graphicItem);
+                }
+            });
+            return labels;
+        }
     }
     Label.type = ComponentTypeEnum.label;
     const registerLabel = () => {
@@ -90606,6 +90606,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             });
         }
+        getVRenderComponents() {
+            const labels = [];
+            this.getMarks().forEach(m => {
+                const graphicItem = m.getProduct().getGroupGraphicItem();
+                if (graphicItem) {
+                    labels.push(graphicItem);
+                }
+            });
+            return labels;
+        }
     }
     TotalLabel.type = ComponentTypeEnum.totalLabel;
     function totalLabelPosition(series, type) {
@@ -91106,7 +91116,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         changeRegions(regions) {
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return this._brushComponents;
         }
         _compareSpec() {
@@ -91244,7 +91254,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         changeRegions(regions) {
         }
-        getVRenderComponents() {
+        _getNeedClearVRenderComponents() {
             return [];
         }
         onRender(ctx) {
@@ -91770,8 +91780,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         changeRegions() {
         }
-        getVRenderComponents() {
-            return [];
+        _getNeedClearVRenderComponents() {
+            return this._markerComponents;
         }
     }
     MapLabelComponent.type = ComponentTypeEnum.mapLabel;