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

package/build/index.es.js

@@ -68791,6 +68791,15 @@ const defaultSeriesSpecUpdatePolicy = {
     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)) {
@@ -69541,12 +69550,13 @@ class BaseSeries extends BaseModel {
         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) => {
@@ -69567,7 +69577,7 @@ class BaseSeries extends BaseModel {
         }
         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) => {
@@ -73999,21 +74009,18 @@ class LinearAxisMixin {
     }
     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(ChartEvent.scaleUpdate, { model: this, value: 'domain' });
+        this.updateScaleDomain();
     }
     extendDomain(domain) {
         let temp;
@@ -76589,7 +76596,7 @@ class BaseChart extends CompilableBase {
         }
         if (onlyComponentSpecsChanged &&
             !componentUpdateResult.hasNonComponentOnlyUpdate &&
-            isUpdateSpecResultComponentOnly(result)) {
+            (isUpdateSpecResultComponentOnly(result) || this._isComponentScaleDomainOnlyUpdate(result))) {
             componentUpdateResult.componentOnlyUpdatedComponents.forEach(component => {
                 component.reInit(component.getSpec());
             });
@@ -76667,7 +76674,8 @@ class BaseChart extends CompilableBase {
                 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)) {
@@ -76678,7 +76686,8 @@ class BaseChart extends CompilableBase {
             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)) {
@@ -76778,6 +76787,23 @@ class BaseChart extends CompilableBase {
         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;
@@ -77320,6 +77346,7 @@ class BaseChartSpecTransformer {
         };
         const seriesType = this.seriesType;
         if (seriesType) {
+            this._addSeriesRelatedSpecKeys([seriesType]);
             series.type = seriesType;
             series[seriesType] = chartSpec[seriesType];
         }
@@ -103263,6 +103290,16 @@ class Tooltip extends BaseComponent {
         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();
@@ -103573,6 +103610,21 @@ const ORIENT_MAP = {
     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';
@@ -103767,12 +103819,43 @@ class BaseCrossHair extends BaseComponent {
     }
     _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;
@@ -105196,11 +105279,30 @@ class DataFilterBaseComponent extends BaseComponent {
     _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 => {
@@ -105826,6 +105928,22 @@ const dataZoom = {
     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;
@@ -105936,6 +106054,9 @@ class DataZoom extends DataFilterBaseComponent {
             this.effect.onZoomChange();
         }
     }
+    _getComponentOnlySpecKeys() {
+        return DATA_ZOOM_COMPONENT_ONLY_CHANGE_KEYS;
+    }
     clear() {
         if (this._component) {
             const container = this.getContainer();
@@ -106291,6 +106412,15 @@ const scrollBar = {
 
 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;
@@ -106340,6 +106470,9 @@ class ScrollBar extends DataFilterBaseComponent {
             data.reRunAllTransform();
         }
     }
+    _getComponentOnlySpecKeys() {
+        return SCROLL_BAR_COMPONENT_ONLY_CHANGE_KEYS;
+    }
     _beforeLayoutEnd() {
         var _a, _b;
         super._beforeLayoutEnd();
@@ -106513,6 +106646,16 @@ class Indicator extends BaseComponent {
         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;
@@ -106684,12 +106827,15 @@ function isNeedExtendDomain(domain, datum, autoRange) {
     }
     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;
@@ -106701,12 +106847,13 @@ function getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStar
     }
     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;
@@ -106718,20 +106865,20 @@ function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionSta
     }
     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) {
@@ -106747,7 +106894,7 @@ function convertDatumToValue(axisHelper, datum) {
 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();
@@ -106777,14 +106924,14 @@ function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries,
         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);
@@ -106801,7 +106948,7 @@ function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries,
         }
         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([
@@ -106856,7 +107003,7 @@ function setTempWithValid(v, isExpand, temp, index) {
     }
     return v;
 }
-function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange) {
+function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, autoRangeExtendDomainKeyPrefix) {
     const refSeries = {
         relativeSeries,
         startRelativeSeries,
@@ -106871,12 +107018,12 @@ function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSerie
         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,
@@ -106889,7 +107036,7 @@ function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSerie
             ]);
         }
         else if (isValidRadius) {
-            const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries);
+            const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
             lines.push([
                 {
                     radius,
@@ -106922,7 +107069,7 @@ function geoLayout(data, relativeSeries) {
     });
     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);
@@ -106952,11 +107099,13 @@ function cartesianCoordinateLayout(data, relativeSeries, autoRange, coordinatesO
         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
@@ -106964,7 +107113,7 @@ function cartesianCoordinateLayout(data, relativeSeries, autoRange, coordinatesO
     });
     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) => {
@@ -106977,11 +107126,11 @@ function polarCoordinateLayout(data, relativeSeries, autoRange) {
         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)
@@ -107510,6 +107659,65 @@ const releaseDataViewWithDependencies = (dataView, shouldReleaseDependency) => {
     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);
@@ -107558,6 +107766,27 @@ class BaseMarker extends BaseComponent {
             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',
@@ -107606,7 +107835,7 @@ class BaseMarker extends BaseComponent {
             return;
         }
         this._markerDataChangeHandler = () => {
-            this._markerLayout();
+            this._updateMarkerLayout();
         };
         this._markerData.target.on('change', this._markerDataChangeHandler);
     }
@@ -107636,7 +107865,7 @@ class BaseMarker extends BaseComponent {
                     this._delegateEvent(this._markerComponent, event, type, null, this.getMarkerData.bind(this));
                 });
             }
-            this._markerLayout();
+            this._updateMarkerLayout();
         }
         super.updateLayoutAttribute();
     }
@@ -107666,9 +107895,9 @@ class BaseMarker extends BaseComponent {
     }
     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() {
@@ -107709,16 +107938,50 @@ class BaseMarker extends BaseComponent {
         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'
@@ -107988,11 +108251,11 @@ class CartesianMarkLine extends BaseMarkLine {
             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);
@@ -108216,7 +108479,7 @@ class PolarMarkLine extends BaseMarkLine {
                 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 = {
@@ -108235,7 +108498,7 @@ class PolarMarkLine extends BaseMarkLine {
             }
         }
         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);
@@ -108613,7 +108876,7 @@ class CartesianMarkArea extends BaseMarkArea {
         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 = [
@@ -108631,14 +108894,14 @@ class CartesianMarkArea extends BaseMarkArea {
             }
         }
         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);
@@ -108721,7 +108984,7 @@ class PolarMarkArea extends BaseMarkArea {
                 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,
@@ -108751,7 +109014,7 @@ class PolarMarkArea extends BaseMarkArea {
             }
         }
         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);
@@ -109060,6 +109323,20 @@ class Player extends BaseComponent {
         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)) {
@@ -109199,7 +109476,13 @@ class BaseLabelComponent extends BaseComponent {
         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;
     }
@@ -109948,7 +110231,7 @@ class BaseMarkPoint extends BaseMarker {
         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;
@@ -109972,12 +110255,15 @@ class BaseMarkPoint extends BaseMarker {
         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
@@ -110046,10 +110332,10 @@ class CartesianMarkPoint extends BaseMarkPoint {
         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];
@@ -110097,7 +110383,7 @@ class PolarMarkPoint extends BaseMarkPoint {
         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,
@@ -110174,6 +110460,11 @@ const brush = {
 
 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);
@@ -110299,11 +110590,23 @@ class Brush extends BaseComponent {
         }
         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();
@@ -110326,9 +110629,10 @@ class Brush extends BaseComponent {
         }
     }
     _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();
     }
@@ -110767,6 +111071,10 @@ const registerBrush = () => {
     Factory.registerComponent(Brush.type, Brush);
 };
 
+const CUSTOM_MARK_COMPONENT_ONLY_CHANGE_KEYS = {
+    style: true,
+    state: true
+};
 class CustomMark extends BaseComponent {
     constructor() {
         super(...arguments);
@@ -110857,12 +111165,43 @@ class CustomMark extends BaseComponent {
     _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,