@visactor/vchart 2.1.0-alpha.2 → 2.1.0-alpha.3

package/build/index.js

@@ -68797,6 +68797,15 @@
         compileOnlyKeys: defaultSeriesCompileOnlyCheckKeys,
         dataRelatedKeys: defaultSeriesDataRelatedCheckKeys
     };
+    const defaultSeriesMarkCompileOnlySubKeys = {
+        interactive: true,
+        zIndex: true,
+        visible: true,
+        style: true,
+        state: true,
+        stateSort: true,
+        customShape: true
+    };
     const isSpecObject = (value) => isObject$2(value) && !isArray$1(value) && !isFunction$1(value);
     const hasOnlyAllowedSubKeyChanges = (specValue, prevSpecValue, allowedSubKeys) => {
         if (!isSpecObject(specValue) || !isSpecObject(prevSpecValue)) {
@@ -69547,12 +69556,13 @@
             if (result.reMake) {
                 return result;
             }
-            if (!result.reCompile &&
-                this._marks.getMarks().some(m => {
-                    var _a, _b;
-                    ignores[m.name] = true;
-                    return ((_a = prevSpec[m.name]) === null || _a === void 0 ? void 0 : _a.visible) !== ((_b = spec[m.name]) === null || _b === void 0 ? void 0 : _b.visible);
-                })) {
+            const changedMarkCompileOnlyKeys = this.getMarksWithoutRoot()
+                .map(m => m.name)
+                .filter(name => hasOnlyAllowedSubKeyChanges(spec[name], prevSpec[name], defaultSeriesMarkCompileOnlySubKeys));
+            changedMarkCompileOnlyKeys.forEach(k => {
+                ignores[k] = true;
+            });
+            if (!result.reCompile && changedMarkCompileOnlyKeys.length) {
                 result.reCompile = true;
             }
             const changedCompileKeys = currentKeys.filter((k) => {
@@ -69573,7 +69583,7 @@
             }
             else if (result.reCompile &&
                 !((_d = result.effects) === null || _d === void 0 ? void 0 : _d.series) &&
-                (changedCompileKeys.length || changedCompileOnlySubKeys.length)) {
+                (changedCompileKeys.length || changedCompileOnlySubKeys.length || changedMarkCompileOnlyKeys.length)) {
                 markSeriesCompileEffect(result);
             }
             if (currentKeys.some((k) => {
@@ -74005,21 +74015,18 @@
         }
         setExtendDomain(key, value) {
             if (value === undefined) {
+                if (!Object.prototype.hasOwnProperty.call(this._extend, key)) {
+                    return;
+                }
                 delete this._extend[key];
-                return;
             }
-            this._extend[key] = value;
-            const domain = this._scale.domain();
-            this.extendDomain(domain);
-            this.includeZero(domain);
-            this.setDomainMinMax(domain);
-            this.niceDomain(domain);
-            this._scale.domain(domain, this._nice);
-            if (this._nice) {
-                const niced = this.setScaleNice();
-                !niced && this._scale.rescale();
+            else {
+                if (this._extend[key] === value) {
+                    return;
+                }
+                this._extend[key] = value;
             }
-            this.event.emit(exports.ChartEvent.scaleUpdate, { model: this, value: 'domain' });
+            this.updateScaleDomain();
         }
         extendDomain(domain) {
             let temp;
@@ -76595,7 +76602,7 @@
             }
             if (onlyComponentSpecsChanged &&
                 !componentUpdateResult.hasNonComponentOnlyUpdate &&
-                isUpdateSpecResultComponentOnly(result)) {
+                (isUpdateSpecResultComponentOnly(result) || this._isComponentScaleDomainOnlyUpdate(result))) {
                 componentUpdateResult.componentOnlyUpdatedComponents.forEach(component => {
                     component.reInit(component.getSpec());
                 });
@@ -76673,7 +76680,8 @@
                     const componentSpec = (_b = cmpSpec[c.getSpecIndex()]) !== null && _b !== void 0 ? _b : {};
                     const previousComponentSpec = c.getSpec();
                     const componentResult = c.updateSpec(componentSpec, cmpSpec);
-                    if (isUpdateSpecResultComponentOnly(componentResult)) {
+                    if (isUpdateSpecResultComponentOnly(componentResult) ||
+                        this._isComponentScaleDomainOnlyUpdate(componentResult)) {
                         componentOnlyUpdatedComponents.push(c);
                     }
                     else if (!isEqual(previousComponentSpec, componentSpec)) {
@@ -76684,7 +76692,8 @@
                 else {
                     const previousComponentSpec = c.getSpec();
                     const componentResult = c.updateSpec(cmpSpec);
-                    if (isUpdateSpecResultComponentOnly(componentResult)) {
+                    if (isUpdateSpecResultComponentOnly(componentResult) ||
+                        this._isComponentScaleDomainOnlyUpdate(componentResult)) {
                         componentOnlyUpdatedComponents.push(c);
                     }
                     else if (!isEqual(previousComponentSpec, cmpSpec)) {
@@ -76784,6 +76793,23 @@
             const effects = result.effects;
             return !!(effects === null || effects === void 0 ? void 0 : effects.series) && !effects.remake && !effects.data && !effects.scaleDomain && !result.reMake;
         }
+        _isComponentScaleDomainOnlyUpdate(result) {
+            const effects = result.effects;
+            return (!!(effects === null || effects === void 0 ? void 0 : effects.component) &&
+                !!effects.scaleDomain &&
+                !result.reMake &&
+                !result.reCompile &&
+                !result.reSize &&
+                !effects.remake &&
+                !effects.compile &&
+                !effects.data &&
+                !effects.series &&
+                !effects.animation &&
+                !result.reTransformSpec &&
+                !result.reAnimate &&
+                !result.changeTheme &&
+                !result.changeBackground);
+        }
         _removeMarkerComponentsForEmptySpecs(result) {
             const removedComponents = this._components.filter(component => {
                 var _a;
@@ -77326,6 +77352,7 @@
             };
             const seriesType = this.seriesType;
             if (seriesType) {
+                this._addSeriesRelatedSpecKeys([seriesType]);
                 series.type = seriesType;
                 series[seriesType] = chartSpec[seriesType];
             }
@@ -103269,6 +103296,16 @@
             this._regions = this._option.getAllRegions();
             this._initEvent();
         }
+        _compareSpec(spec, prevSpec) {
+            const result = super._compareSpec(spec, prevSpec);
+            const specChanged = !isEqual(prevSpec, spec);
+            if (specChanged && !result.reMake && !result.reCompile) {
+                result.change = true;
+                result.reRender = true;
+                result.effects = Object.assign(Object.assign({}, result.effects), { component: true, render: true });
+            }
+            return result;
+        }
         release() {
             var _a, _b;
             super.release();
@@ -103579,6 +103616,21 @@
         category: ['angle'],
         value: ['radius']
     };
+    const CROSSHAIR_COMPONENT_ONLY_TOP_LEVEL_CHANGE_KEYS = {
+        labelZIndex: true,
+        gridZIndex: true
+    };
+    const CROSSHAIR_FIELD_KEYS = {
+        xField: true,
+        yField: true,
+        categoryField: true,
+        valueField: true
+    };
+    const CROSSHAIR_LINE_COMPONENT_ONLY_CHANGE_KEYS = {
+        visible: true,
+        width: true,
+        style: true
+    };
     class BaseCrossHair extends BaseComponent {
         get enableRemain() {
             return this.triggerOff === 'none';
@@ -103773,12 +103825,43 @@
         }
         _compareSpec(spec, prevSpec) {
             const result = super._compareSpec(spec, prevSpec);
-            if (!result.reMake && !isEqual(prevSpec, spec)) {
+            const specChanged = !isEqual(prevSpec, spec);
+            if (specChanged) {
+                result.change = true;
                 result.reRender = true;
-                result.reMake = true;
+                if (!result.reMake) {
+                    if (this._isComponentOnlySpecChange(spec, prevSpec)) {
+                        result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+                    }
+                    else {
+                        result.reMake = true;
+                    }
+                }
             }
             return result;
         }
+        _isComponentOnlySpecChange(spec, prevSpec) {
+            const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+            return keys.every(key => {
+                return (isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) ||
+                    CROSSHAIR_COMPONENT_ONLY_TOP_LEVEL_CHANGE_KEYS[key] ||
+                    (CROSSHAIR_FIELD_KEYS[key] && this._isFieldComponentOnlySpecChange(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key])));
+            });
+        }
+        _isFieldComponentOnlySpecChange(prevSpec, spec) {
+            const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+            return keys.every(key => {
+                return (isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) ||
+                    key === 'label' ||
+                    (key === 'line' && this._isLineComponentOnlySpecChange(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.line, spec === null || spec === void 0 ? void 0 : spec.line)));
+            });
+        }
+        _isLineComponentOnlySpecChange(prevSpec, spec) {
+            const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+            return keys.every(key => {
+                return isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) || CROSSHAIR_LINE_COMPONENT_ONLY_CHANGE_KEYS[key];
+            });
+        }
         _initEvent() {
             if (this._option.disableTriggerEvent) {
                 return;
@@ -105202,11 +105285,30 @@
         _compareSpec(spec, prevSpec) {
             const result = super._compareSpec(spec, prevSpec);
             if (!result.reMake && !isEqual(prevSpec, spec)) {
+                result.change = true;
                 result.reRender = true;
-                result.reMake = true;
+                if (!result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec)) {
+                    result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+                }
+                else {
+                    result.reMake = true;
+                }
             }
             return result;
         }
+        _getComponentOnlySpecKeys() {
+            return null;
+        }
+        _isComponentOnlySpecChange(spec, prevSpec) {
+            const componentOnlySpecKeys = this._getComponentOnlySpecKeys();
+            if (!componentOnlySpecKeys) {
+                return false;
+            }
+            const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+            return keys.every(key => {
+                return isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) || componentOnlySpecKeys[key];
+            });
+        }
         reInit(spec) {
             super.reInit(spec);
             this._marks.forEach(g => {
@@ -105832,6 +105934,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         backgroundChart: getBackgroundChartTheme(true)
     };
 
+    const DATA_ZOOM_COMPONENT_ONLY_CHANGE_KEYS = {
+        width: true,
+        height: true,
+        showDetail: true,
+        middleHandler: true,
+        background: true,
+        startHandler: true,
+        endHandler: true,
+        startText: true,
+        endText: true,
+        dragMask: true,
+        selectedBackground: true,
+        backgroundChart: true,
+        selectedBackgroundChart: true,
+        showBackgroundChart: true
+    };
     class DataZoom extends DataFilterBaseComponent {
         constructor(spec, options) {
             var _a;
@@ -105942,6 +106060,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.effect.onZoomChange();
             }
         }
+        _getComponentOnlySpecKeys() {
+            return DATA_ZOOM_COMPONENT_ONLY_CHANGE_KEYS;
+        }
         clear() {
             if (this._component) {
                 const container = this.getContainer();
@@ -106297,6 +106418,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const SCROLLBAR_EVENT = 'scrollDrag';
     const SCROLLBAR_END_EVENT = 'scrollUp';
+    const SCROLL_BAR_COMPONENT_ONLY_CHANGE_KEYS = {
+        width: true,
+        height: true,
+        rail: true,
+        slider: true,
+        round: true,
+        innerPadding: true,
+        minSliderSize: true
+    };
     class ScrollBar extends DataFilterBaseComponent {
         constructor(spec, options) {
             var _a;
@@ -106346,6 +106476,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 data.reRunAllTransform();
             }
         }
+        _getComponentOnlySpecKeys() {
+            return SCROLL_BAR_COMPONENT_ONLY_CHANGE_KEYS;
+        }
         _beforeLayoutEnd() {
             var _a, _b;
             super._beforeLayoutEnd();
@@ -106519,6 +106652,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._content = array(this._spec.content);
             this._regions = this._option.getRegionsInUserIdOrIndex(array(this._spec.regionId), array(this._spec.regionIndex));
         }
+        _compareSpec(spec, prevSpec) {
+            const result = super._compareSpec(spec, prevSpec);
+            const specChanged = !isEqual(prevSpec, spec);
+            if (specChanged && !result.reMake && !result.reCompile) {
+                result.change = true;
+                result.reRender = true;
+                result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+            }
+            return result;
+        }
         initEvent() {
             if (this._option.disableTriggerEvent) {
                 return;
@@ -106690,12 +106833,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return false;
     }
-    function getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint) {
+    function getAutoRangeExtendDomainKey(keyPrefix, axisKey) {
+        return keyPrefix ? `${keyPrefix}_${axisKey}_extend` : `marker_${axisKey}_extend`;
+    }
+    function getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix) {
         var _a, _b;
         const { relativeSeries } = refSeries;
         isNumber$2(datum.x) &&
             isNeedExtendDomain(xDomain, datum.x, autoRange) &&
-            ((_b = relativeSeries === null || relativeSeries === void 0 ? void 0 : (_a = relativeSeries.getXAxisHelper()).setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_xAxis_extend', datum.x));
+            ((_b = relativeSeries === null || relativeSeries === void 0 ? void 0 : (_a = relativeSeries.getXAxisHelper()).setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'xAxis'), datum.x));
         let x;
         if (isPercent(datum.x)) {
             x = convertPercentToValue(datum.x, regionWidth) + regionStartLayoutStartPoint.x;
@@ -106707,12 +106853,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return x;
     }
-    function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint) {
+    function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix) {
         var _a, _b;
         const { relativeSeries } = refSeries;
         isNumber$2(datum.y) &&
             isNeedExtendDomain(yDomain, datum.y, autoRange) &&
-            ((_b = (_a = relativeSeries.getYAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_yAxis_extend', datum.y));
+            ((_b = (_a = relativeSeries
+                .getYAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'yAxis'), datum.y));
         let y;
         if (isPercent(datum.y)) {
             y = convertPercentToValue(datum.y, regionHeight) + regionStartLayoutStartPoint.y;
@@ -106724,20 +106871,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return y;
     }
-    function getAngleValue(datum, angleDomain, autoRange, refSeries) {
+    function getAngleValue(datum, angleDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix) {
         var _a, _b;
         const { relativeSeries } = refSeries;
         isNumber$2(datum.angle) &&
             isNeedExtendDomain(angleDomain, datum.angle, autoRange) &&
-            ((_b = (_a = relativeSeries.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_angleAxis_extend', datum.angle));
+            ((_b = (_a = relativeSeries.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'angleAxis'), datum.angle));
         return convertDatumToValue(relativeSeries.angleAxisHelper, [datum.angle]);
     }
-    function getRadiusValue(datum, radiusDomain, autoRange, refSeries) {
+    function getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix) {
         var _a, _b;
         const { relativeSeries } = refSeries;
         isNumber$2(datum.radius) &&
             isNeedExtendDomain(radiusDomain, datum.radius, autoRange) &&
-            ((_b = (_a = relativeSeries.radiusAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_radiusAxis_extend', datum.radius));
+            ((_b = (_a = relativeSeries.radiusAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'radiusAxis'), datum.radius));
         return convertDatumToValue(relativeSeries.radiusAxisHelper, [datum.radius]);
     }
     function convertPercentToValue(percent, relativeLength) {
@@ -106753,7 +106900,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function isAggrSpec(spec) {
         return AGGR_TYPE.includes(spec);
     }
-    function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand = false) {
+    function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand = false, autoRangeExtendDomainKeyPrefix) {
         const regionStart = startRelativeSeries.getRegion();
         const regionStartLayoutStartPoint = regionStart.getLayoutStartPoint();
         const regionEnd = endRelativeSeries.getRegion();
@@ -106783,14 +106930,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             let x;
             let y;
             if (isValidX && isValidY) {
-                x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint);
-                y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint);
+                x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix);
+                y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix);
                 setTempWithValid(x, isXExpand, xTemp, lines.length);
                 setTempWithValid(y, isyExpand, yTemp, lines.length);
                 lines.push([{ x, y }]);
             }
             else if (isValidX) {
-                x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint);
+                x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix);
                 y = Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRect().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRect().height);
                 const y1 = Math.min(regionStartLayoutStartPoint.y, regionEndLayoutStartPoint.y);
                 setTempWithValid(x, isXExpand, xTemp, lines.length);
@@ -106807,7 +106954,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else if (isValidY) {
                 x = Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x);
-                y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint);
+                y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix);
                 const x1 = Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRect().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRect().width);
                 setTempWithValid(y, isyExpand, yTemp, lines.length);
                 lines.push([
@@ -106862,7 +107009,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return v;
     }
-    function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange) {
+    function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, autoRangeExtendDomainKeyPrefix) {
         const refSeries = {
             relativeSeries,
             startRelativeSeries,
@@ -106877,12 +107024,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const isValidAngle = isValid$1(datum.angle);
             const isValidRadius = isValid$1(datum.radius);
             if (isValidAngle && isValidRadius) {
-                const angle = getAngleValue(datum, angleDomain, autoRange, refSeries);
-                const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries);
+                const angle = getAngleValue(datum, angleDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
+                const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
                 lines.push([{ angle, radius }]);
             }
             else if (isValidAngle) {
-                const angle = getAngleValue(datum, angleDomain, autoRange, refSeries);
+                const angle = getAngleValue(datum, angleDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
                 lines.push([
                     {
                         angle,
@@ -106895,7 +107042,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 ]);
             }
             else if (isValidRadius) {
-                const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries);
+                const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
                 lines.push([
                     {
                         radius,
@@ -106928,7 +107075,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         return lines;
     }
-    function cartesianCoordinateLayout(data, relativeSeries, autoRange, coordinatesOffset) {
+    function cartesianCoordinateLayout(data, relativeSeries, autoRange, coordinatesOffset, autoRangeExtendDomainKeyPrefix) {
         const points = [];
         const dataPoints = data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
         const isArrayCoordinatesOffset = isArray$1(coordinatesOffset);
@@ -106958,11 +107105,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             xValue.length === 1 &&
                 isNumber$2(xValue[0]) &&
                 isNeedExtendDomain(xDomain, xValue[0], autoRange) &&
-                ((_b = (_a = refRelativeSeries.getXAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_xAxis_extend', xValue[0]));
+                ((_b = (_a = refRelativeSeries
+                    .getXAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'xAxis'), xValue[0]));
             yValue.length === 1 &&
                 isNumber$2(yValue[0]) &&
                 isNeedExtendDomain(yDomain, yValue[0], autoRange) &&
-                ((_d = (_c = refRelativeSeries.getYAxisHelper()) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, 'marker_yAxis_extend', yValue[0]));
+                ((_d = (_c = refRelativeSeries
+                    .getYAxisHelper()) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'yAxis'), yValue[0]));
             points.push({
                 x: convertDatumToValue(refRelativeSeries.getXAxisHelper(), xValue) + regionStartLayoutStartPoint.x + offsetX,
                 y: convertDatumToValue(refRelativeSeries.getYAxisHelper(), yValue) + regionStartLayoutStartPoint.y + offsetY
@@ -106970,7 +107119,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         return points;
     }
-    function polarCoordinateLayout(data, relativeSeries, autoRange) {
+    function polarCoordinateLayout(data, relativeSeries, autoRange, autoRangeExtendDomainKeyPrefix) {
         const points = [];
         const dataPoints = data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
         dataPoints.forEach((datum) => {
@@ -106983,11 +107132,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             angleValue.length === 1 &&
                 isNumber$2(angleValue[0]) &&
                 isNeedExtendDomain(angleDomain, angleValue[0], autoRange) &&
-                ((_b = (_a = refRelativeSeries.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_xAxis_extend', angleValue[0]));
+                ((_b = (_a = refRelativeSeries.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'angleAxis'), angleValue[0]));
             radiusValue.length === 1 &&
                 isNumber$2(radiusValue[0]) &&
                 isNeedExtendDomain(radiusDomain, radiusValue[0], autoRange) &&
-                ((_d = (_c = refRelativeSeries.radiusAxisHelper) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, 'marker_yAxis_extend', radiusValue[0]));
+                ((_d = (_c = refRelativeSeries.radiusAxisHelper) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, 'radiusAxis'), radiusValue[0]));
             points.push({
                 angle: convertDatumToValue(refRelativeSeries.angleAxisHelper, angleValue),
                 radius: convertDatumToValue(refRelativeSeries.radiusAxisHelper, radiusValue)
@@ -107516,6 +107665,65 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         releaseDataViews([dataView, ...releaseDependencies]);
     };
 
+    const MARKER_FORMAT_METHOD_PLACEHOLDER = '__vchart_marker_format_method__';
+    const MARKER_COORDINATE_PLACEHOLDER = '__vchart_marker_coordinate__';
+    const MARKER_TEXT_PLACEHOLDER = '__vchart_marker_text__';
+    const MARKER_AUTO_RANGE_PLACEHOLDER = '__vchart_marker_auto_range__';
+    const MARKER_DOMAIN_POSITION_SPEC_KEYS = [
+        'coordinate',
+        'coordinates',
+        'x',
+        'y',
+        'x1',
+        'y1',
+        'angle',
+        'angle1',
+        'radius',
+        'radius1'
+    ];
+    const MARKER_LAYOUT_POSITION_SPEC_KEYS = ['position', 'positions', 'coordinatesOffset', 'regionRelative'];
+    const normalizeMarkerLabelFormatMethod = (label) => {
+        if (Array.isArray(label)) {
+            return label.map(normalizeMarkerLabelFormatMethod);
+        }
+        if (!label || typeof label !== 'object') {
+            return label;
+        }
+        if (typeof label.formatMethod !== 'function') {
+            return label;
+        }
+        return Object.assign(Object.assign({}, label), { formatMethod: MARKER_FORMAT_METHOD_PLACEHOLDER });
+    };
+    const normalizeMarkerSpecForComponentOnlyUpdate = (spec, options) => {
+        var _a;
+        if (!spec || typeof spec !== 'object') {
+            return spec;
+        }
+        const normalized = Object.assign({}, spec);
+        if (options.normalizeDomainPosition) {
+            MARKER_DOMAIN_POSITION_SPEC_KEYS.forEach(key => {
+                if (key in normalized) {
+                    normalized[key] = MARKER_COORDINATE_PLACEHOLDER;
+                }
+            });
+        }
+        if (options.normalizeAutoRange && 'autoRange' in normalized) {
+            normalized.autoRange = MARKER_AUTO_RANGE_PLACEHOLDER;
+        }
+        MARKER_LAYOUT_POSITION_SPEC_KEYS.forEach(key => {
+            if (key in normalized) {
+                normalized[key] = MARKER_COORDINATE_PLACEHOLDER;
+            }
+        });
+        if ('label' in normalized) {
+            normalized.label = normalizeMarkerLabelFormatMethod(normalized.label);
+        }
+        const text = (_a = normalized.itemContent) === null || _a === void 0 ? void 0 : _a.text;
+        if (text && typeof text === 'object') {
+            normalized.itemContent = Object.assign(Object.assign({}, normalized.itemContent), { text: Object.assign(Object.assign({}, normalizeMarkerLabelFormatMethod(text)), { text: MARKER_TEXT_PLACEHOLDER }) });
+        }
+        return normalized;
+    };
     class BaseMarker extends BaseComponent {
         constructor() {
             super(...arguments);
@@ -107564,6 +107772,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 getEndRelativeSeries: () => this._endRelativeSeries
             };
         }
+        _getAutoRangeExtendDomainKeyPrefix() {
+            return `marker_${this.type}_${this.id}`;
+        }
+        _getAutoRangeExtendDomainKey(axisKey) {
+            return `${this._getAutoRangeExtendDomainKeyPrefix()}_${axisKey}_extend`;
+        }
+        _clearAutoRangeExtendDomain() {
+            var _a, _b;
+            const seriesList = array((_b = (_a = this._option).getAllSeries) === null || _b === void 0 ? void 0 : _b.call(_a));
+            seriesList.forEach((series) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                (_c = (_b = (_a = series === null || series === void 0 ? void 0 : series.getXAxisHelper) === null || _a === void 0 ? void 0 : _a.call(series)) === null || _b === void 0 ? void 0 : _b.setExtendDomain) === null || _c === void 0 ? void 0 : _c.call(_b, this._getAutoRangeExtendDomainKey('xAxis'), undefined);
+                (_f = (_e = (_d = series === null || series === void 0 ? void 0 : series.getYAxisHelper) === null || _d === void 0 ? void 0 : _d.call(series)) === null || _e === void 0 ? void 0 : _e.setExtendDomain) === null || _f === void 0 ? void 0 : _f.call(_e, this._getAutoRangeExtendDomainKey('yAxis'), undefined);
+                (_h = (_g = series === null || series === void 0 ? void 0 : series.angleAxisHelper) === null || _g === void 0 ? void 0 : _g.setExtendDomain) === null || _h === void 0 ? void 0 : _h.call(_g, this._getAutoRangeExtendDomainKey('angleAxis'), undefined);
+                (_k = (_j = series === null || series === void 0 ? void 0 : series.radiusAxisHelper) === null || _j === void 0 ? void 0 : _j.setExtendDomain) === null || _k === void 0 ? void 0 : _k.call(_j, this._getAutoRangeExtendDomainKey('radiusAxis'), undefined);
+            });
+        }
+        _updateMarkerLayout() {
+            this._clearAutoRangeExtendDomain();
+            this._markerLayout();
+        }
         _getFieldInfoFromSpec(dim, spec, relativeSeries) {
             const specKeyByDim = {
                 x: 'xField',
@@ -107612,7 +107841,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             this._markerDataChangeHandler = () => {
-                this._markerLayout();
+                this._updateMarkerLayout();
             };
             this._markerData.target.on('change', this._markerDataChangeHandler);
         }
@@ -107642,7 +107871,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._delegateEvent(this._markerComponent, event, type, null, this.getMarkerData.bind(this));
                     });
                 }
-                this._markerLayout();
+                this._updateMarkerLayout();
             }
             super.updateLayoutAttribute();
         }
@@ -107672,9 +107901,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initEvent() {
             if (this._relativeSeries.coordinate !== 'cartesian') {
-                this._relativeSeries.event.on('zoom', this._markerLayout.bind(this));
-                this._relativeSeries.event.on('panmove', this._markerLayout.bind(this));
-                this._relativeSeries.event.on('scroll', this._markerLayout.bind(this));
+                this._relativeSeries.event.on('zoom', this._updateMarkerLayout.bind(this));
+                this._relativeSeries.event.on('panmove', this._updateMarkerLayout.bind(this));
+                this._relativeSeries.event.on('scroll', this._updateMarkerLayout.bind(this));
             }
         }
         clear() {
@@ -107715,16 +107944,50 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const result = super._compareSpec(spec, prevSpec);
             if (!isEqual(prevSpec, spec)) {
                 result.reRender = true;
-                result.reMake = true;
                 result.change = true;
+                if (!result.reMake && !result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec)) {
+                    result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+                }
+                else if (!result.reMake && !result.reCompile && this._isAutoRangeSpecChange(spec, prevSpec)) {
+                    result.effects = Object.assign(Object.assign({}, result.effects), { component: true, scaleDomain: true, layout: true, render: true });
+                }
+                else {
+                    result.reMake = true;
+                }
             }
             return result;
         }
+        _isComponentOnlySpecChange(spec, prevSpec) {
+            const normalizeDomainPosition = !(spec === null || spec === void 0 ? void 0 : spec.autoRange) && !(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.autoRange);
+            return isEqual(normalizeMarkerSpecForComponentOnlyUpdate(prevSpec, { normalizeDomainPosition }), normalizeMarkerSpecForComponentOnlyUpdate(spec, { normalizeDomainPosition }));
+        }
+        _isAutoRangeSpecChange(spec, prevSpec) {
+            if (!(spec === null || spec === void 0 ? void 0 : spec.autoRange) && !(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.autoRange)) {
+                return false;
+            }
+            return isEqual(normalizeMarkerSpecForComponentOnlyUpdate(prevSpec, {
+                normalizeDomainPosition: true,
+                normalizeAutoRange: true
+            }), normalizeMarkerSpecForComponentOnlyUpdate(spec, {
+                normalizeDomainPosition: true,
+                normalizeAutoRange: true
+            }));
+        }
+        reInit(spec) {
+            super.reInit(spec);
+            this._bindSeries();
+            this._initDataView();
+            this._buildMarkerAttributeContext();
+            if (this._markerComponent) {
+                this._updateMarkerLayout();
+            }
+        }
         _initCommonDataView() {
             const { options } = this._computeOptions();
             const seriesData = this._getRelativeDataView();
             registerDataSetInstanceTransform(this._option.dataSet, 'markerAggregation', markerAggregation);
             registerDataSetInstanceTransform(this._option.dataSet, 'markerFilter', markerFilter);
+            this._releaseMarkerData();
             const data = new DataView(this._option.dataSet, { name: `${this.type}_${this.id}_data` });
             data.parse([seriesData], {
                 type: 'dataview'
@@ -107994,11 +108257,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 doXYProcess ||
                 (isValidCoordinates && isValidProcessX) ||
                 (isValidCoordinates && isValidProcessY)) {
-                const xyPoints = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange);
+                const xyPoints = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, false, this._getAutoRangeExtendDomainKeyPrefix());
                 points = (xyPoints.length === 1 ? xyPoints[0] : xyPoints.map(point => point[0]));
             }
             else if (doCoordinatesProcess) {
-                points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset);
+                points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset, this._getAutoRangeExtendDomainKeyPrefix());
             }
             else if (isPositionLayout) {
                 points = positionLayout(spec.positions, relativeSeries, spec.regionRelative);
@@ -108222,7 +108485,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._relativeSeries.angleAxisHelper.center().y
             };
             if (doAngleProcess || doRadiusProcess || doAngRadRad1Process || doRadAngAng1Process || doRadAngProcess) {
-                const polarPoints = polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange);
+                const polarPoints = polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix());
                 points = (polarPoints.length === 1 ? polarPoints[0] : polarPoints.map(point => point[0]));
                 if (points[0].radius === points[1].radius) {
                     pointsAttr = {
@@ -108241,7 +108504,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             else if (doCoordinatesProcess) {
-                points = polarCoordinateLayout(data, relativeSeries, autoRange);
+                points = polarCoordinateLayout(data, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix());
                 pointsAttr = {
                     points: points.map(point => {
                         return polarToCartesian(center, point.radius, point.angle);
@@ -108619,7 +108882,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             let points = [];
             let lines = [];
             if (doXYProcess) {
-                lines = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand);
+                lines = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand, this._getAutoRangeExtendDomainKeyPrefix());
                 const [start, end] = lines;
                 if (start && start.length && end && end.length) {
                     points = [
@@ -108637,14 +108900,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             else if (doXProcess || doYProcess) {
-                lines = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand);
+                lines = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand, this._getAutoRangeExtendDomainKeyPrefix());
                 const [start, end] = lines;
                 if (start && start.length && end && end.length) {
                     points = [...start, end[1], end[0]];
                 }
             }
             else if (doCoordinatesProcess) {
-                points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset);
+                points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset, this._getAutoRangeExtendDomainKeyPrefix());
             }
             else if (isPositionLayout) {
                 points = positionLayout(spec.positions, relativeSeries, spec.regionRelative);
@@ -108727,7 +108990,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._relativeSeries.angleAxisHelper.center().y
             };
             if (doAngleProcess || doRadiusProcess || doRadAngProcess) {
-                const polarLines = polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange);
+                const polarLines = polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix());
                 if (doRadAngProcess) {
                     pointsAttr = {
                         innerRadius: polarLines[0][0].radius,
@@ -108757,7 +109020,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             else if (doCoordinatesProcess) {
-                points = polarCoordinateLayout(data, relativeSeries, autoRange);
+                points = polarCoordinateLayout(data, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix());
                 pointsAttr = {
                     points: points.map(point => {
                         return polarToCartesian(center, point.radius, point.angle);
@@ -109066,6 +109329,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._position = (_g = this._spec.position) !== null && _g !== void 0 ? _g : 'middle';
             this._visible = (_h = this._spec.visible) !== null && _h !== void 0 ? _h : true;
         }
+        _compareSpec(spec, prevSpec) {
+            const result = super._compareSpec(spec, prevSpec);
+            const specChanged = !isEqual(prevSpec, spec);
+            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.type) !== (spec === null || spec === void 0 ? void 0 : spec.type)) {
+                result.reMake = true;
+                return result;
+            }
+            if (specChanged && !result.reMake && !result.reCompile) {
+                result.change = true;
+                result.reRender = true;
+                result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+            }
+            return result;
+        }
         afterSetLayoutStartPoint(pos) {
             super.afterSetLayoutStartPoint(pos);
             if (isValidNumber$1(pos.x)) {
@@ -109205,7 +109482,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const result = super._compareSpec(spec, prevSpec);
             result.reRender = true;
             if (!isEqual(prevSpec, spec)) {
-                result.reMake = true;
+                result.change = true;
+                if (!result.reMake && !result.reCompile) {
+                    result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+                }
+                else {
+                    result.reMake = true;
+                }
             }
             return result;
         }
@@ -109954,7 +110237,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return markPoint;
         }
         _markerLayout() {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             const spec = this._spec;
             const data = this._markerData;
             const relativeSeries = this._relativeSeries;
@@ -109978,12 +110261,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._markerComponent) {
                 const attribute = (_b = this._markerComponent.attribute) !== null && _b !== void 0 ? _b : {};
                 const textStyle = (_d = (_c = attribute.itemContent) === null || _c === void 0 ? void 0 : _c.textStyle) !== null && _d !== void 0 ? _d : {};
+                const specText = (_e = this._spec.itemContent.text) === null || _e === void 0 ? void 0 : _e.text;
                 this._markerComponent.setAttributes({
                     position: point === undefined ? { x: null, y: null } : point,
-                    itemContent: Object.assign(Object.assign({}, attribute.itemContent), { textStyle: Object.assign(Object.assign({}, textStyle), { text: ((_e = this._spec.itemContent.text) === null || _e === void 0 ? void 0 : _e.formatMethod)
+                    itemContent: Object.assign(Object.assign({}, attribute.itemContent), { textStyle: Object.assign(Object.assign({}, textStyle), { text: ((_f = this._spec.itemContent.text) === null || _f === void 0 ? void 0 : _f.formatMethod)
                                 ?
                                     this._spec.itemContent.text.formatMethod(dataPoints, seriesData)
-                                : textStyle.text }), offsetX: computeOffsetFromRegion(point, attribute.itemContent.offsetX, this._relativeSeries.getRegion()), offsetY: computeOffsetFromRegion(point, attribute.itemContent.offsetY, this._relativeSeries.getRegion()) }),
+                                : isValid$1(specText)
+                                    ? specText
+                                    : textStyle.text }), offsetX: computeOffsetFromRegion(point, attribute.itemContent.offsetX, this._relativeSeries.getRegion()), offsetY: computeOffsetFromRegion(point, attribute.itemContent.offsetY, this._relativeSeries.getRegion()) }),
                     limitRect,
                     dx: this._layoutOffsetX,
                     dy: this._layoutOffsetY
@@ -110052,10 +110338,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const autoRange = (_a = spec === null || spec === void 0 ? void 0 : spec.autoRange) !== null && _a !== void 0 ? _a : false;
             let point;
             if (isXYLayout) {
-                point = (_c = (_b = xyLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange)) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[0];
+                point = (_c = (_b = xyLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange, false, this._getAutoRangeExtendDomainKeyPrefix())) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[0];
             }
             else if (isCoordinateLayout) {
-                point = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset)[0];
+                point = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset, this._getAutoRangeExtendDomainKeyPrefix())[0];
             }
             else if (isPositionLayout) {
                 point = positionLayout(spec.position, relativeSeries, spec.regionRelative)[0];
@@ -110103,7 +110389,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const data = this._markerData;
             const relativeSeries = this._relativeSeries;
             const autoRange = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.autoRange) !== null && _b !== void 0 ? _b : false;
-            const polarPoint = polarLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange)[0][0];
+            const polarPoint = polarLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix())[0][0];
             const center = {
                 x: this._relativeSeries.getRegion().getLayoutStartPoint().x +
                     this._relativeSeries.angleAxisHelper.center().x,
@@ -110180,6 +110466,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const IN_BRUSH_STATE = 'inBrush';
     const OUT_BRUSH_STATE = 'outOfBrush';
+    const BRUSH_COMPONENT_ONLY_CHANGE_KEYS = {
+        style: true,
+        inBrush: true,
+        outOfBrush: true
+    };
     class Brush extends BaseComponent {
         constructor() {
             super(...arguments);
@@ -110305,11 +110596,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const result = super._compareSpec(spec, prevSpec);
             if (!isEqual(prevSpec, spec)) {
+                result.change = true;
                 result.reRender = true;
-                result.reMake = true;
+                if (!result.reMake && !result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec)) {
+                    result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+                }
+                else {
+                    result.reMake = true;
+                }
             }
             return result;
         }
+        _isComponentOnlySpecChange(spec, prevSpec) {
+            const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+            return keys.every(key => {
+                return isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) || BRUSH_COMPONENT_ONLY_CHANGE_KEYS[key];
+            });
+        }
         onLayoutEnd() {
             var _a;
             super.onLayoutEnd();
@@ -110332,9 +110635,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _updateBrushComponent(region, componentIndex) {
+            var _a;
             const interactiveAttr = this._getBrushInteractiveAttr(region);
             const brushComponent = this._brushComponents[componentIndex];
-            brushComponent.setAttributes(interactiveAttr);
+            brushComponent.setAttributes(Object.assign({ brushStyle: transformToGraphic((_a = this._spec) === null || _a === void 0 ? void 0 : _a.style) }, interactiveAttr));
             this._initMarkBrushState(componentIndex, '');
             brushComponent.children[0].removeAllChild();
         }
@@ -110773,6 +111077,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerComponent(Brush.type, Brush);
     };
 
+    const CUSTOM_MARK_COMPONENT_ONLY_CHANGE_KEYS = {
+        style: true,
+        state: true
+    };
     class CustomMark extends BaseComponent {
         constructor() {
             super(...arguments);
@@ -110863,12 +111171,43 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _compareSpec(spec, prevSpec) {
             const result = super._compareSpec(spec, prevSpec);
             if (!isEqual(prevSpec, spec)) {
-                result.reMake = true;
+                if (!result.reMake && !result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec)) {
+                    result.effects = Object.assign(Object.assign({}, result.effects), { component: true, render: true });
+                }
+                else {
+                    result.reMake = true;
+                }
             }
             result.change = true;
             result.reRender = true;
             return result;
         }
+        _isComponentOnlySpecChange(spec, prevSpec) {
+            const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+            return keys.every(key => {
+                return isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) || CUSTOM_MARK_COMPONENT_ONLY_CHANGE_KEYS[key];
+            });
+        }
+        reInit(spec) {
+            super.reInit(spec);
+            this._updateMarkStyleWithSpec(this._spec, this.getMarks()[0]);
+            this.getMarks().forEach(mark => {
+                mark.commit(false, true);
+            });
+        }
+        _updateMarkStyleWithSpec(spec, mark) {
+            var _a, _b, _c, _d;
+            if (!spec || !mark) {
+                return;
+            }
+            this.initMarkStyleWithSpec(mark, spec);
+            if (spec.type === 'group') {
+                const children = (_c = (_b = (_a = mark).getMarks) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
+                (_d = spec.children) === null || _d === void 0 ? void 0 : _d.forEach((childSpec, index) => {
+                    this._updateMarkStyleWithSpec(childSpec, children[index]);
+                });
+            }
+        }
         _getMarkAttributeContext() {
             return {
                 vchart: this._option.globalInstance,