@visactor/react-vchart 2.1.0-alpha.2 → 2.1.0-alpha.4

package/build/index.js

@@ -61263,6 +61263,15 @@
         compileOnlyKeys: defaultSeriesCompileOnlyCheckKeys,
         dataRelatedKeys: defaultSeriesDataRelatedCheckKeys
       },
+      defaultSeriesMarkCompileOnlySubKeys = {
+        interactive: !0,
+        zIndex: !0,
+        visible: !0,
+        style: !0,
+        state: !0,
+        stateSort: !0,
+        customShape: !0
+      },
       isSpecObject = value => isObject$2(value) && !isArray$1(value) && !isFunction$1(value),
       hasOnlyAllowedSubKeyChanges = (specValue, prevSpecValue, allowedSubKeys) => {
         if (!isSpecObject(specValue) || !isSpecObject(prevSpecValue)) return !1;
@@ -61798,15 +61807,15 @@
             totalLabel: !0
           });
         if (this._compareExtensionMarksSpec(array(spec.extensionMark), array(prevSpec.extensionMark), result), !result.reMake && this._compareLabelSpec(array(spec.label), array(prevSpec.label), result), !result.reMake && this._compareLabelSpec(array(spec.totalLabel), array(prevSpec.totalLabel), result), result.reMake) return result;
-        !result.reCompile && this._marks.getMarks().some(m => {
-          var _a, _b;
-          return ignores[m.name] = !0, (null === (_a = prevSpec[m.name]) || void 0 === _a ? void 0 : _a.visible) !== (null === (_b = spec[m.name]) || void 0 === _b ? void 0 : _b.visible);
-        }) && (result.reCompile = !0);
+        const changedMarkCompileOnlyKeys = this.getMarksWithoutRoot().map(m => m.name).filter(name => hasOnlyAllowedSubKeyChanges(spec[name], prevSpec[name], defaultSeriesMarkCompileOnlySubKeys));
+        changedMarkCompileOnlyKeys.forEach(k => {
+          ignores[k] = !0;
+        }), !result.reCompile && changedMarkCompileOnlyKeys.length && (result.reCompile = !0);
         const changedCompileKeys = currentKeys.filter(k => compileCheckKeys[k] && !isEqual(spec[k], prevSpec[k])),
           changedCompileOnlySubKeys = currentKeys.filter(k => compileOnlySubKeys[k] && hasOnlyAllowedSubKeyChanges(spec[k], prevSpec[k], compileOnlySubKeys[k]));
         return changedCompileOnlySubKeys.forEach(k => {
           ignores[k] = !0;
-        }), result.reCompile || !changedCompileKeys.length && !changedCompileOnlySubKeys.length || (result.reCompile = !0), changedCompileKeys.some(k => dataRelatedKeys[k]) ? markSeriesCompileEffect(result, !0) : result.reCompile && !(null === (_d = result.effects) || void 0 === _d ? void 0 : _d.series) && (changedCompileKeys.length || changedCompileOnlySubKeys.length) && markSeriesCompileEffect(result), currentKeys.some(k => !ignores[k] && !isEqual(spec[k], prevSpec[k])) ? (result.reMake = !0, result) : result;
+        }), result.reCompile || !changedCompileKeys.length && !changedCompileOnlySubKeys.length || (result.reCompile = !0), changedCompileKeys.some(k => dataRelatedKeys[k]) ? markSeriesCompileEffect(result, !0) : result.reCompile && !(null === (_d = result.effects) || void 0 === _d ? void 0 : _d.series) && (changedCompileKeys.length || changedCompileOnlySubKeys.length || changedMarkCompileOnlyKeys.length) && markSeriesCompileEffect(result), currentKeys.some(k => !ignores[k] && !isEqual(spec[k], prevSpec[k])) ? (result.reMake = !0, result) : result;
       }
       _updateSpecData() {
         !this._rawData || !this._spec.data || this._spec.data instanceof DataView || updateDataViewInData(this._rawData, this._spec.data, !0);
@@ -64008,17 +64017,15 @@
         }
       }
       _compareSpec(spec, prevSpec) {
+        var _a, _b;
         const result = super._compareSpec(spec, prevSpec);
         if (result.reMake) return result;
         const specChanged = !isEqual(prevSpec, spec);
-        return result.reRender = !0, (null == prevSpec ? void 0 : prevSpec.type) !== (null == spec ? void 0 : spec.type) || (null == prevSpec ? void 0 : prevSpec.visible) !== (null == spec ? void 0 : spec.visible) ? (result.reMake = !0, result) : (result.reMake = ["grid", "subGrid", "tick", "subTick", "label", "domainLine", "title"].some(k => {
-          var _a, _b;
-          return (null === (_a = null == prevSpec ? void 0 : prevSpec[k]) || void 0 === _a ? void 0 : _a.visible) !== (null === (_b = null == spec ? void 0 : spec[k]) || void 0 === _b ? void 0 : _b.visible);
-        }), specChanged && !result.reMake && this._isComponentOnlySpecChange(spec, prevSpec) && (result.effects = Object.assign(Object.assign({}, result.effects), {
+        return result.reRender = !0, (null == prevSpec ? void 0 : prevSpec.type) !== (null == spec ? void 0 : spec.type) || (null == prevSpec ? void 0 : prevSpec.visible) !== (null == spec ? void 0 : spec.visible) ? (result.reMake = !0, result) : !0 !== (null === (_a = null == spec ? void 0 : spec.grid) || void 0 === _a ? void 0 : _a.visible) || !0 === (null === (_b = null == prevSpec ? void 0 : prevSpec.grid) || void 0 === _b ? void 0 : _b.visible) || this._gridMark ? (specChanged && !result.reMake && this._isComponentOnlySpecChange(spec, prevSpec) && (result.effects = Object.assign(Object.assign({}, result.effects), {
           component: !0,
           layout: !0,
           render: !0
-        })), result);
+        })), result) : (result.reMake = !0, result);
       }
       _isComponentOnlySpecChange(spec, prevSpec) {
         return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || AXIS_COMPONENT_ONLY_CHANGE_KEYS[key]);
@@ -64967,16 +64974,14 @@
         this._zero && (domain[0] = Math.min(domain[0], 0), domain[domain.length - 1] = Math.max(last(domain), 0));
       }
       setExtendDomain(key, value) {
-        if (void 0 === value) return void delete this._extend[key];
-        this._extend[key] = value;
-        const domain = this._scale.domain();
-        if (this.extendDomain(domain), this.includeZero(domain), this.setDomainMinMax(domain), this.niceDomain(domain), this._scale.domain(domain, this._nice), this._nice) {
-          !this.setScaleNice() && this._scale.rescale();
+        if (void 0 === value) {
+          if (!Object.prototype.hasOwnProperty.call(this._extend, key)) return;
+          delete this._extend[key];
+        } 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;
@@ -66313,10 +66318,25 @@
       return t;
     };
     const MARKER_COMPONENT_SPEC_KEYS = {
-      [ComponentTypeEnum.markPoint]: !0,
-      [ComponentTypeEnum.markLine]: !0,
-      [ComponentTypeEnum.markArea]: !0
-    };
+        [ComponentTypeEnum.markPoint]: !0,
+        [ComponentTypeEnum.markLine]: !0,
+        [ComponentTypeEnum.markArea]: !0
+      },
+      MARKER_ADDITION_REMAKE_SPEC_KEYS = {
+        autoRange: !0,
+        regionId: !0,
+        regionIndex: !0,
+        seriesId: !0,
+        seriesIndex: !0,
+        relativeSeriesId: !0,
+        relativeSeriesIndex: !0,
+        startRelativeSeriesId: !0,
+        startRelativeSeriesIndex: !0,
+        endRelativeSeriesId: !0,
+        endRelativeSeriesIndex: !0,
+        specifiedDataSeriesId: !0,
+        specifiedDataSeriesIndex: !0
+      };
     let BaseChart$1 = class BaseChart extends CompilableBase {
       getSpec() {
         return this._spec;
@@ -66392,7 +66412,7 @@
         }, this.getComponentsByKey = key => this._components.filter(c => (c.specKey || c.type) === key), this.getComponentByUserId = userId => {
           const component = this._components.find(s => s.userId === userId);
           if (component) return component;
-        }, this.getComponentsByType = type => this._components.filter(c => c.type === type), this._paddingSpec = normalizeLayoutPaddingSpec(null !== (_a = spec.padding) && void 0 !== _a ? _a : option.getTheme("padding")), this._event = new Event$1(option.eventDispatcher, option.mode), this._dataSet = option.dataSet, this._chartData = new ChartData(this._dataSet), this._modelOption = Object.assign(Object.assign({}, option), {
+        }, this.getComponentsByType = type => this._components.filter(c => c.type === type), this._isMarkerAdditionSpecSafeWithoutRemake = spec => !(!spec || "object" != typeof spec || !1 === spec.visible) && !Object.keys(MARKER_ADDITION_REMAKE_SPEC_KEYS).some(key => !isNil$1(spec[key])), this._paddingSpec = normalizeLayoutPaddingSpec(null !== (_a = spec.padding) && void 0 !== _a ? _a : option.getTheme("padding")), this._event = new Event$1(option.eventDispatcher, option.mode), this._dataSet = option.dataSet, this._chartData = new ChartData(this._dataSet), this._modelOption = Object.assign(Object.assign({}, option), {
           mode: this._option.mode,
           map: this._idMap,
           getChartLayoutRect: () => this._layoutRect,
@@ -66706,7 +66726,7 @@
         return Object.keys(spec).filter(key => !ignoreKeys[key]).sort();
       }
       updateSpec(spec) {
-        var _a;
+        var _a, _b;
         const result = {
           change: !1,
           reMake: !1,
@@ -66722,7 +66742,7 @@
           const key = currentKeys[i],
             currentSpec = this._spec[key],
             nextSpec = spec[key];
-          if (isArray$1(currentSpec) && currentSpec.length !== array(nextSpec).length && !this._canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec)) return result.reMake = !0, this.setLayoutTag(!0, null, !1), result;
+          if (isArray$1(currentSpec) && currentSpec.length !== array(nextSpec).length && !this._canChangeMarkerComponentsWithoutRemake(key, currentSpec, nextSpec)) return result.reMake = !0, this.setLayoutTag(!0, null, !1), result;
         }
         const oldSpec = this._spec,
           onlyMarkerComponentsRemoved = this._isOnlyMarkerComponentsRemoved(this._spec, spec, currentKeys),
@@ -66733,9 +66753,9 @@
         if (this.updateGlobalScale(result), result.reMake) return this.setLayoutTag(!0, null, !1), result;
         if (this.updateRegionSpec(result), result.reMake) return this.setLayoutTag(!0, null, !1), result;
         const componentUpdateResult = this.updateComponentSpec(result);
-        return result.reMake ? (this.setLayoutTag(!0, null, !1), result) : isUpdateSpecResultLocalOnly(result) ? result : onlyComponentSpecsChanged && !componentUpdateResult.hasNonComponentOnlyUpdate && isUpdateSpecResultComponentOnly(result) ? (componentUpdateResult.componentOnlyUpdatedComponents.forEach(component => {
+        return result.reMake ? (this.setLayoutTag(!0, null, !1), result) : (!onlyComponentSpecsChanged && (null === (_a = result.effects) || void 0 === _a ? void 0 : _a.localOnly) && delete result.effects.localOnly, isUpdateSpecResultLocalOnly(result) ? result : onlyComponentSpecsChanged && !componentUpdateResult.hasNonComponentOnlyUpdate && (isUpdateSpecResultComponentOnly(result) || this._isComponentScaleDomainOnlyUpdate(result)) ? (componentUpdateResult.componentOnlyUpdatedComponents.forEach(component => {
           component.reInit(component.getSpec());
-        }), (null === (_a = result.effects) || void 0 === _a ? void 0 : _a.layout) && this.setLayoutTag(!0, null, !1), result) : (this.setLayoutTag(!0, null, !1), this.updateSeriesSpec(result), result.reMake || (this.reInit(), onlySeriesSpecsChanged && this._canSkipChartDataStages(result) || (this.updateDataSpec(), this.updateGlobalScaleDomain())), result);
+        }), (null === (_b = result.effects) || void 0 === _b ? void 0 : _b.layout) && this.setLayoutTag(!0, null, !1), result) : (this.setLayoutTag(!0, null, !1), this.updateSeriesSpec(result), result.reMake || (this.reInit(), onlySeriesSpecsChanged && this._canSkipChartDataStages(result) || (this.updateDataSpec(), this.reDataFlow(), this._reRunStackDataFlow(), this.getAllModels().forEach(model => model.onDataUpdate()))), result));
       }
       updateChartConfig(result, oldSpec) {
         var _a, _b;
@@ -66775,13 +66795,13 @@
             const componentSpec = null !== (_b = cmpSpec[c.getSpecIndex()]) && void 0 !== _b ? _b : {},
               previousComponentSpec = c.getSpec(),
               componentResult = c.updateSpec(componentSpec, cmpSpec);
-            isUpdateSpecResultComponentOnly(componentResult) ? componentOnlyUpdatedComponents.push(c) : isEqual(previousComponentSpec, componentSpec) || (hasNonComponentOnlyUpdate = !0), mergeUpdateResult(result, componentResult);
+            isUpdateSpecResultComponentOnly(componentResult) || this._isComponentScaleDomainOnlyUpdate(componentResult) ? componentOnlyUpdatedComponents.push(c) : isEqual(previousComponentSpec, componentSpec) || (hasNonComponentOnlyUpdate = !0), mergeUpdateResult(result, componentResult);
           } else {
             const previousComponentSpec = c.getSpec(),
               componentResult = c.updateSpec(cmpSpec);
-            isUpdateSpecResultComponentOnly(componentResult) ? componentOnlyUpdatedComponents.push(c) : isEqual(previousComponentSpec, cmpSpec) || (hasNonComponentOnlyUpdate = !0), mergeUpdateResult(result, componentResult);
+            isUpdateSpecResultComponentOnly(componentResult) || this._isComponentScaleDomainOnlyUpdate(componentResult) ? componentOnlyUpdatedComponents.push(c) : isEqual(previousComponentSpec, cmpSpec) || (hasNonComponentOnlyUpdate = !0), mergeUpdateResult(result, componentResult);
           }
-        });
+        }), result.reMake || this._createMissingMarkerComponentsForSpecs(result, componentCache);
         for (const key in componentCache) if (Object.prototype.hasOwnProperty.call(componentCache, key)) {
           const element = componentCache[key];
           element.componentCount !== element.specCount && (result.reMake = !0);
@@ -66803,6 +66823,12 @@
           hasNonComponentOnlyUpdate: hasNonComponentOnlyUpdate
         };
       }
+      _canChangeMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
+        return this._canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) || this._canAddMarkerComponentsWithoutRemake(key, currentSpec, nextSpec);
+      }
+      _canAddMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
+        return !!(MARKER_COMPONENT_SPEC_KEYS[key] && isArray$1(currentSpec) && isArray$1(nextSpec)) && !(nextSpec.length <= currentSpec.length) && nextSpec.slice(currentSpec.length).every(this._isMarkerAdditionSpecSafeWithoutRemake);
+      }
       _canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
         return MARKER_COMPONENT_SPEC_KEYS[key] && isArray$1(currentSpec) && currentSpec.length > 0 && isArray$1(nextSpec) && 0 === nextSpec.length;
       }
@@ -66812,7 +66838,7 @@
         return hasMarkerRemoval && onlyMarkerRemoval;
       }
       _isComponentSpecKey(key) {
-        return this._components.some(component => (component.specKey || component.type) === key);
+        return !!MARKER_COMPONENT_SPEC_KEYS[key] || this._components.some(component => (component.specKey || component.type) === key);
       }
       _isOnlyComponentSpecsChanged(currentSpec, nextSpec, specKeys) {
         let hasComponentSpecChange = !1;
@@ -66834,6 +66860,42 @@
         const effects = result.effects;
         return !(!(null == effects ? void 0 : effects.series) || effects.remake || effects.data || effects.scaleDomain || result.reMake);
       }
+      _isComponentScaleDomainOnlyUpdate(result) {
+        const effects = result.effects;
+        return !(!(null == effects ? 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);
+      }
+      _reRunStackDataFlow() {
+        var _a, _b;
+        this._series.some(series => {
+          var _a;
+          return null === (_a = series.getStack) || void 0 === _a ? void 0 : _a.call(series);
+        }) && (null === (_b = null === (_a = this._stack) || void 0 === _a ? void 0 : _a.stackAll) || void 0 === _b || _b.call(_a), this._series.forEach(series => {
+          series.getViewDataFilter() && series.reTransformViewData();
+        }));
+      }
+      _getModelSpecIndex(specInfo) {
+        var _a;
+        const specPath = null !== (_a = specInfo.specPath) && void 0 !== _a ? _a : [],
+          specIndex = specPath[specPath.length - 1];
+        return "number" == typeof specIndex ? specIndex : 0;
+      }
+      _hasComponentForSpecInfo(key, specInfo) {
+        const specIndex = this._getModelSpecIndex(specInfo);
+        return this._components.some(component => (component.specKey || component.type) === key && component.getSpecIndex() === specIndex);
+      }
+      _createMissingMarkerComponentsForSpecs(result, componentCache) {
+        var _a;
+        let createdCount = 0;
+        null === (_a = this._specTransformer) || void 0 === _a || _a.forEachComponentInSpec(this._spec, (constructor, specInfo) => {
+          if (result.reMake) return;
+          const compSpecKey = constructor.specKey || constructor.type;
+          MARKER_COMPONENT_SPEC_KEYS[compSpecKey] && !this._hasComponentForSpecInfo(compSpecKey, specInfo) && (this._isMarkerAdditionSpecSafeWithoutRemake(specInfo.spec) ? (this._createComponent(constructor, specInfo), componentCache[compSpecKey] && componentCache[compSpecKey].componentCount++, createdCount++) : result.reMake = !0);
+        }, this._option.getSpecInfo()), createdCount && (result.change = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        }));
+      }
       _removeMarkerComponentsForEmptySpecs(result) {
         const removedComponents = this._components.filter(component => {
           var _a;
@@ -67263,7 +67325,7 @@
             interactions: chartSpec.interactions
           },
           seriesType = this.seriesType;
-        return seriesType && (series.type = seriesType, series[seriesType] = chartSpec[seriesType]), pickKeys && pickKeys.length && pickKeys.forEach(k => {
+        return seriesType && (this._addSeriesRelatedSpecKeys([seriesType]), series.type = seriesType, series[seriesType] = chartSpec[seriesType]), pickKeys && pickKeys.length && pickKeys.forEach(k => {
           series[k] = chartSpec[k];
         }), pickKeys2 && pickKeys2.length && pickKeys2.forEach(k => {
           series[k] = chartSpec[k];
@@ -87224,6 +87286,13 @@
       created() {
         super.created(), this._regions = this._option.getAllRegions(), this._initEvent();
       }
+      _compareSpec(spec, prevSpec) {
+        const result = super._compareSpec(spec, prevSpec);
+        return !!isEqual(prevSpec, spec) || result.reMake || result.reCompile || (result.change = !0, result.reRender = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          render: !0
+        })), result;
+      }
       release() {
         var _a, _b;
         super.release(), this._isReleased = !0, this._hideTimer && clearTimeout(this._hideTimer), this._eventList.forEach(({
@@ -87415,11 +87484,26 @@
       return t;
     };
     const ORIENT_MAP = {
-      x: ["top", "bottom"],
-      y: ["left", "right"],
-      category: ["angle"],
-      value: ["radius"]
-    };
+        x: ["top", "bottom"],
+        y: ["left", "right"],
+        category: ["angle"],
+        value: ["radius"]
+      },
+      CROSSHAIR_COMPONENT_ONLY_TOP_LEVEL_CHANGE_KEYS = {
+        labelZIndex: !0,
+        gridZIndex: !0
+      },
+      CROSSHAIR_FIELD_KEYS = {
+        xField: !0,
+        yField: !0,
+        categoryField: !0,
+        valueField: !0
+      },
+      CROSSHAIR_LINE_COMPONENT_ONLY_CHANGE_KEYS = {
+        visible: !0,
+        width: !0,
+        style: !0
+      };
     class BaseCrossHair extends BaseComponent {
       get enableRemain() {
         return "none" === this.triggerOff;
@@ -87547,7 +87631,20 @@
       }
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return result.reMake || isEqual(prevSpec, spec) || (result.reRender = !0, result.reMake = !0), result;
+        return !isEqual(prevSpec, spec) && (result.change = !0, result.reRender = !0, result.reMake || (this._isComponentOnlySpecChange(spec, prevSpec) ? result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        }) : result.reMake = !0)), result;
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || CROSSHAIR_COMPONENT_ONLY_TOP_LEVEL_CHANGE_KEYS[key] || CROSSHAIR_FIELD_KEYS[key] && this._isFieldComponentOnlySpecChange(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]));
+      }
+      _isFieldComponentOnlySpecChange(prevSpec, spec) {
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || "label" === key || "line" === key && this._isLineComponentOnlySpecChange(null == prevSpec ? void 0 : prevSpec.line, null == spec ? void 0 : spec.line));
+      }
+      _isLineComponentOnlySpecChange(prevSpec, spec) {
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || CROSSHAIR_LINE_COMPONENT_ONLY_CHANGE_KEYS[key]);
       }
       _initEvent() {
         if (!this._option.disableTriggerEvent) if (this._spec.followTooltip) this._registerTooltipEvent();else {
@@ -88764,7 +88861,19 @@
       }
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return result.reMake || isEqual(prevSpec, spec) || (result.reRender = !0, result.reMake = !0), result;
+        return result.reMake || isEqual(prevSpec, spec) || (result.change = !0, result.reRender = !0, !result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec) ? result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        }) : result.reMake = !0), result;
+      }
+      _getComponentOnlySpecKeys() {
+        return null;
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        const componentOnlySpecKeys = this._getComponentOnlySpecKeys();
+        if (!componentOnlySpecKeys) return !1;
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || componentOnlySpecKeys[key]);
       }
       reInit(spec) {
         super.reInit(spec), this._marks.forEach(g => {
@@ -89247,6 +89356,22 @@
       backgroundChart: getBackgroundChartTheme(!0)
     };
 
+    const DATA_ZOOM_COMPONENT_ONLY_CHANGE_KEYS = {
+      width: !0,
+      height: !0,
+      showDetail: !0,
+      middleHandler: !0,
+      background: !0,
+      startHandler: !0,
+      endHandler: !0,
+      startText: !0,
+      endText: !0,
+      dragMask: !0,
+      selectedBackground: !0,
+      backgroundChart: !0,
+      selectedBackgroundChart: !0,
+      showBackgroundChart: !0
+    };
     let DataZoom$1 = class DataZoom extends DataFilterBaseComponent {
       constructor(spec, options) {
         var _a;
@@ -89312,6 +89437,9 @@
         const axis = this._relatedAxisComponent;
         (isReverse(axis, this._isHorizontal) && !this._isReverseCache || this._auto) && (this._isReverseCache = isReverse(axis, this._isHorizontal), this.effect.onZoomChange());
       }
+      _getComponentOnlySpecKeys() {
+        return DATA_ZOOM_COMPONENT_ONLY_CHANGE_KEYS;
+      }
       clear() {
         if (this._component) {
           const container = this.getContainer();
@@ -89588,6 +89716,15 @@
       }
     };
 
+    const SCROLL_BAR_COMPONENT_ONLY_CHANGE_KEYS = {
+        width: !0,
+        height: !0,
+        rail: !0,
+        slider: !0,
+        round: !0,
+        innerPadding: !0,
+        minSliderSize: !0
+      };
     let ScrollBar$1 = class ScrollBar extends DataFilterBaseComponent {
       constructor(spec, options) {
         var _a;
@@ -89620,6 +89757,9 @@
           this._data.getDataView().reRunAllTransform();
         }
       }
+      _getComponentOnlySpecKeys() {
+        return SCROLL_BAR_COMPONENT_ONLY_CHANGE_KEYS;
+      }
       _beforeLayoutEnd() {
         var _a, _b;
         super._beforeLayoutEnd(), null === (_b = (_a = this.effect).onZoomChange) || void 0 === _b || _b.call(_a);
@@ -89763,6 +89903,14 @@
       setAttrFromSpec() {
         super.setAttrFromSpec(), this._gap = this._spec.gap || 0, this._title = this._spec.title, 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);
+        return !!isEqual(prevSpec, spec) || result.reMake || result.reCompile || (result.change = !0, result.reRender = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result;
+      }
       initEvent() {
         if (this._option.disableTriggerEvent) return;
         "none" !== this._spec.trigger && ("hover" === this._spec.trigger ? (this.event.on("element-highlight:start", params => {
@@ -89921,35 +90069,38 @@
         max = maxInArray(domainNum);
       return datum < min || datum > max;
     }
-    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: relativeSeries
       } = refSeries;
       let x;
-      return isNumber$2(datum.x) && isNeedExtendDomain(xDomain, datum.x, autoRange) && (null === (_b = null == relativeSeries ? void 0 : (_a = relativeSeries.getXAxisHelper()).setExtendDomain) || void 0 === _b || _b.call(_a, "marker_xAxis_extend", datum.x)), x = isPercent(datum.x) ? convertPercentToValue(datum.x, regionWidth) + regionStartLayoutStartPoint.x : convertDatumToValue(relativeSeries.getXAxisHelper(), [datum.x]) + regionStartLayoutStartPoint.x, x;
+      return isNumber$2(datum.x) && isNeedExtendDomain(xDomain, datum.x, autoRange) && (null === (_b = null == relativeSeries ? void 0 : (_a = relativeSeries.getXAxisHelper()).setExtendDomain) || void 0 === _b || _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "xAxis"), datum.x)), x = isPercent(datum.x) ? convertPercentToValue(datum.x, regionWidth) + regionStartLayoutStartPoint.x : convertDatumToValue(relativeSeries.getXAxisHelper(), [datum.x]) + regionStartLayoutStartPoint.x, x;
     }
-    function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint) {
+    function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint, autoRangeExtendDomainKeyPrefix) {
       var _a, _b;
       const {
         relativeSeries: relativeSeries
       } = refSeries;
       let y;
-      return isNumber$2(datum.y) && isNeedExtendDomain(yDomain, datum.y, autoRange) && (null === (_b = null === (_a = relativeSeries.getYAxisHelper()) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, "marker_yAxis_extend", datum.y)), y = isPercent(datum.y) ? convertPercentToValue(datum.y, regionHeight) + regionStartLayoutStartPoint.y : convertDatumToValue(relativeSeries.getYAxisHelper(), [datum.y]) + regionStartLayoutStartPoint.y, y;
+      return isNumber$2(datum.y) && isNeedExtendDomain(yDomain, datum.y, autoRange) && (null === (_b = null === (_a = relativeSeries.getYAxisHelper()) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "yAxis"), datum.y)), y = isPercent(datum.y) ? convertPercentToValue(datum.y, regionHeight) + regionStartLayoutStartPoint.y : convertDatumToValue(relativeSeries.getYAxisHelper(), [datum.y]) + regionStartLayoutStartPoint.y, y;
     }
-    function getAngleValue(datum, angleDomain, autoRange, refSeries) {
+    function getAngleValue(datum, angleDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix) {
       var _a, _b;
       const {
         relativeSeries: relativeSeries
       } = refSeries;
-      return isNumber$2(datum.angle) && isNeedExtendDomain(angleDomain, datum.angle, autoRange) && (null === (_b = null === (_a = relativeSeries.angleAxisHelper) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, "marker_angleAxis_extend", datum.angle)), convertDatumToValue(relativeSeries.angleAxisHelper, [datum.angle]);
+      return isNumber$2(datum.angle) && isNeedExtendDomain(angleDomain, datum.angle, autoRange) && (null === (_b = null === (_a = relativeSeries.angleAxisHelper) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "angleAxis"), datum.angle)), convertDatumToValue(relativeSeries.angleAxisHelper, [datum.angle]);
     }
-    function getRadiusValue(datum, radiusDomain, autoRange, refSeries) {
+    function getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix) {
       var _a, _b;
       const {
         relativeSeries: relativeSeries
       } = refSeries;
-      return isNumber$2(datum.radius) && isNeedExtendDomain(radiusDomain, datum.radius, autoRange) && (null === (_b = null === (_a = relativeSeries.radiusAxisHelper) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, "marker_radiusAxis_extend", datum.radius)), convertDatumToValue(relativeSeries.radiusAxisHelper, [datum.radius]);
+      return isNumber$2(datum.radius) && isNeedExtendDomain(radiusDomain, datum.radius, autoRange) && (null === (_b = null === (_a = relativeSeries.radiusAxisHelper) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "radiusAxis"), datum.radius)), convertDatumToValue(relativeSeries.radiusAxisHelper, [datum.radius]);
     }
     function convertPercentToValue(percent, relativeLength) {
       return Number(percent.substring(0, percent.length - 1)) * relativeLength / 100;
@@ -89961,7 +90112,7 @@
     function isAggrSpec(spec) {
       return AGGR_TYPE.includes(spec);
     }
-    function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand = !1) {
+    function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, includeFullBand = !1, autoRangeExtendDomainKeyPrefix) {
       const regionStart = startRelativeSeries.getRegion(),
         regionStartLayoutStartPoint = regionStart.getLayoutStartPoint(),
         regionEnd = endRelativeSeries.getRegion(),
@@ -89993,11 +90144,11 @@
         const isValidX = isValid$1(datum.x),
           isValidY = isValid$1(datum.y);
         let x, y;
-        if (isValidX && isValidY) x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint), y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint), setTempWithValid(x, isXExpand, xTemp, lines.length), setTempWithValid(y, isyExpand, yTemp, lines.length), lines.push([{
+        if (isValidX && isValidY) 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: x,
           y: y
         }]);else if (isValidX) {
-          x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint), y = Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRect().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRect().height);
+          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), lines.push([{
             x: x,
@@ -90007,7 +90158,7 @@
             y: y1
           }]);
         } else if (isValidY) {
-          x = Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x), y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint);
+          x = Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x), 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([{
             x: x,
@@ -90038,7 +90189,7 @@
         index: index
       })), v;
     }
-    function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange) {
+    function polarLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, autoRangeExtendDomainKeyPrefix) {
       const refSeries = {
           relativeSeries: relativeSeries,
           startRelativeSeries: startRelativeSeries,
@@ -90053,14 +90204,14 @@
         const isValidAngle = isValid$1(datum.angle),
           isValidRadius = isValid$1(datum.radius);
         if (isValidAngle && isValidRadius) {
-          const angle = getAngleValue(datum, angleDomain, autoRange, refSeries),
-            radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries);
+          const angle = getAngleValue(datum, angleDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix),
+            radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
           lines.push([{
             angle: angle,
             radius: radius
           }]);
         } else if (isValidAngle) {
-          const angle = getAngleValue(datum, angleDomain, autoRange, refSeries);
+          const angle = getAngleValue(datum, angleDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
           lines.push([{
             angle: angle,
             radius: -regionRadius
@@ -90069,7 +90220,7 @@
             radius: regionRadius
           }]);
         } else if (isValidRadius) {
-          const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries);
+          const radius = getRadiusValue(datum, radiusDomain, autoRange, refSeries, autoRangeExtendDomainKeyPrefix);
           lines.push([{
             radius: radius,
             angle: 0
@@ -90089,7 +90240,7 @@
         }]);
       }), lines;
     }
-    function cartesianCoordinateLayout(data, relativeSeries, autoRange, coordinatesOffset) {
+    function cartesianCoordinateLayout(data, relativeSeries, autoRange, coordinatesOffset, autoRangeExtendDomainKeyPrefix) {
       const points = [],
         dataPoints = data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData,
         isArrayCoordinatesOffset = isArray$1(coordinatesOffset);
@@ -90114,13 +90265,13 @@
           yDomain = refRelativeSeries.getYAxisHelper().getScale(0).domain(),
           xValue = array(datum.x),
           yValue = array(datum.y);
-        1 === xValue.length && isNumber$2(xValue[0]) && isNeedExtendDomain(xDomain, xValue[0], autoRange) && (null === (_b = null === (_a = refRelativeSeries.getXAxisHelper()) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, "marker_xAxis_extend", xValue[0])), 1 === yValue.length && isNumber$2(yValue[0]) && isNeedExtendDomain(yDomain, yValue[0], autoRange) && (null === (_d = null === (_c = refRelativeSeries.getYAxisHelper()) || void 0 === _c ? void 0 : _c.setExtendDomain) || void 0 === _d || _d.call(_c, "marker_yAxis_extend", yValue[0])), points.push({
+        1 === xValue.length && isNumber$2(xValue[0]) && isNeedExtendDomain(xDomain, xValue[0], autoRange) && (null === (_b = null === (_a = refRelativeSeries.getXAxisHelper()) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "xAxis"), xValue[0])), 1 === yValue.length && isNumber$2(yValue[0]) && isNeedExtendDomain(yDomain, yValue[0], autoRange) && (null === (_d = null === (_c = refRelativeSeries.getYAxisHelper()) || void 0 === _c ? void 0 : _c.setExtendDomain) || void 0 === _d || _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
         });
       }), points;
     }
-    function polarCoordinateLayout(data, relativeSeries, autoRange) {
+    function polarCoordinateLayout(data, relativeSeries, autoRange, autoRangeExtendDomainKeyPrefix) {
       const points = [];
       return (data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData).forEach(datum => {
         var _a, _b, _c, _d;
@@ -90129,7 +90280,7 @@
           radiusDomain = refRelativeSeries.radiusAxisHelper.getScale(0).domain(),
           angleValue = array(datum.angle),
           radiusValue = array(datum.radius);
-        1 === angleValue.length && isNumber$2(angleValue[0]) && isNeedExtendDomain(angleDomain, angleValue[0], autoRange) && (null === (_b = null === (_a = refRelativeSeries.angleAxisHelper) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, "marker_xAxis_extend", angleValue[0])), 1 === radiusValue.length && isNumber$2(radiusValue[0]) && isNeedExtendDomain(radiusDomain, radiusValue[0], autoRange) && (null === (_d = null === (_c = refRelativeSeries.radiusAxisHelper) || void 0 === _c ? void 0 : _c.setExtendDomain) || void 0 === _d || _d.call(_c, "marker_yAxis_extend", radiusValue[0])), points.push({
+        1 === angleValue.length && isNumber$2(angleValue[0]) && isNeedExtendDomain(angleDomain, angleValue[0], autoRange) && (null === (_b = null === (_a = refRelativeSeries.angleAxisHelper) || void 0 === _a ? void 0 : _a.setExtendDomain) || void 0 === _b || _b.call(_a, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "angleAxis"), angleValue[0])), 1 === radiusValue.length && isNumber$2(radiusValue[0]) && isNeedExtendDomain(radiusDomain, radiusValue[0], autoRange) && (null === (_d = null === (_c = refRelativeSeries.radiusAxisHelper) || void 0 === _c ? void 0 : _c.setExtendDomain) || void 0 === _d || _d.call(_c, getAutoRangeExtendDomainKey(autoRangeExtendDomainKeyPrefix, "radiusAxis"), radiusValue[0])), points.push({
           angle: convertDatumToValue(refRelativeSeries.angleAxisHelper, angleValue),
           radius: convertDatumToValue(refRelativeSeries.radiusAxisHelper, radiusValue)
         });
@@ -90574,6 +90725,31 @@
       collectReleaseDependencies(dataView), releaseDataViews([dataView, ...releaseDependencies]);
     };
 
+    const MARKER_FORMAT_METHOD_PLACEHOLDER = "__vchart_marker_format_method__",
+      MARKER_COORDINATE_PLACEHOLDER = "__vchart_marker_coordinate__",
+      MARKER_TEXT_PLACEHOLDER = "__vchart_marker_text__",
+      MARKER_AUTO_RANGE_PLACEHOLDER = "__vchart_marker_auto_range__",
+      MARKER_DOMAIN_POSITION_SPEC_KEYS = ["coordinate", "coordinates", "x", "y", "x1", "y1", "angle", "angle1", "radius", "radius1"],
+      MARKER_LAYOUT_POSITION_SPEC_KEYS = ["position", "positions", "coordinatesOffset", "regionRelative"],
+      normalizeMarkerLabelFormatMethod = label => Array.isArray(label) ? label.map(normalizeMarkerLabelFormatMethod) : label && "object" == typeof label ? "function" != typeof label.formatMethod ? label : Object.assign(Object.assign({}, label), {
+        formatMethod: MARKER_FORMAT_METHOD_PLACEHOLDER
+      }) : label,
+      normalizeMarkerSpecForComponentOnlyUpdate = (spec, options) => {
+        var _a;
+        if (!spec || "object" != typeof spec) return spec;
+        const normalized = Object.assign({}, spec);
+        options.normalizeDomainPosition && MARKER_DOMAIN_POSITION_SPEC_KEYS.forEach(key => {
+          key in normalized && (normalized[key] = MARKER_COORDINATE_PLACEHOLDER);
+        }), options.normalizeAutoRange && "autoRange" in normalized && (normalized.autoRange = MARKER_AUTO_RANGE_PLACEHOLDER), MARKER_LAYOUT_POSITION_SPEC_KEYS.forEach(key => {
+          key in normalized && (normalized[key] = MARKER_COORDINATE_PLACEHOLDER);
+        }), "label" in normalized && (normalized.label = normalizeMarkerLabelFormatMethod(normalized.label));
+        const text = null === (_a = normalized.itemContent) || void 0 === _a ? void 0 : _a.text;
+        return text && "object" == typeof text && (normalized.itemContent = Object.assign(Object.assign({}, normalized.itemContent), {
+          text: Object.assign(Object.assign({}, normalizeMarkerLabelFormatMethod(text)), {
+            text: MARKER_TEXT_PLACEHOLDER
+          })
+        })), normalized;
+      };
     class BaseMarker extends BaseComponent {
       constructor() {
         super(...arguments), this.layoutType = "none", this._markerDataChangeHandler = null, this._markerDataOwned = !1, this._layoutOffsetX = 0, this._layoutOffsetY = 0;
@@ -90611,6 +90787,22 @@
           getEndRelativeSeries: () => this._endRelativeSeries
         };
       }
+      _getAutoRangeExtendDomainKeyPrefix() {
+        return `marker_${this.type}_${this.id}`;
+      }
+      _getAutoRangeExtendDomainKey(axisKey) {
+        return `${this._getAutoRangeExtendDomainKeyPrefix()}_${axisKey}_extend`;
+      }
+      _clearAutoRangeExtendDomain() {
+        var _a, _b;
+        array(null === (_b = (_a = this._option).getAllSeries) || void 0 === _b ? void 0 : _b.call(_a)).forEach(series => {
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+          null === (_c = null === (_b = null === (_a = null == series ? void 0 : series.getXAxisHelper) || void 0 === _a ? void 0 : _a.call(series)) || void 0 === _b ? void 0 : _b.setExtendDomain) || void 0 === _c || _c.call(_b, this._getAutoRangeExtendDomainKey("xAxis"), void 0), null === (_f = null === (_e = null === (_d = null == series ? void 0 : series.getYAxisHelper) || void 0 === _d ? void 0 : _d.call(series)) || void 0 === _e ? void 0 : _e.setExtendDomain) || void 0 === _f || _f.call(_e, this._getAutoRangeExtendDomainKey("yAxis"), void 0), null === (_h = null === (_g = null == series ? void 0 : series.angleAxisHelper) || void 0 === _g ? void 0 : _g.setExtendDomain) || void 0 === _h || _h.call(_g, this._getAutoRangeExtendDomainKey("angleAxis"), void 0), null === (_k = null === (_j = null == series ? void 0 : series.radiusAxisHelper) || void 0 === _j ? void 0 : _j.setExtendDomain) || void 0 === _k || _k.call(_j, this._getAutoRangeExtendDomainKey("radiusAxis"), void 0);
+        });
+      }
+      _updateMarkerLayout() {
+        this._clearAutoRangeExtendDomain(), this._markerLayout();
+      }
       _getFieldInfoFromSpec(dim, spec, relativeSeries) {
         const specKeyByDim = {
           x: "xField",
@@ -90656,7 +90848,7 @@
       _bindMarkerDataChange() {
         var _a;
         (null === (_a = this._markerData) || void 0 === _a ? void 0 : _a.target) && (this._markerDataChangeHandler = () => {
-          this._markerLayout();
+          this._updateMarkerLayout();
         }, this._markerData.target.on("change", this._markerDataChangeHandler));
       }
       _releaseMarkerData() {
@@ -90672,7 +90864,7 @@
               this._delegateEvent(this._markerComponent, event, type, null, this.getMarkerData.bind(this));
             });
           }
-          this._markerLayout();
+          this._updateMarkerLayout();
         }
         super.updateLayoutAttribute();
       }
@@ -90686,7 +90878,7 @@
         this._relativeSeries = this._getSeriesByIdOrIndex(spec.relativeSeriesId, spec.relativeSeriesIndex), this._startRelativeSeries = this._getSeriesByIdOrIndex(spec.startRelativeSeriesId, spec.startRelativeSeriesIndex), this._endRelativeSeries = this._getSeriesByIdOrIndex(spec.endRelativeSeriesId, spec.endRelativeSeriesIndex), spec.specifiedDataSeriesIndex && "all" === spec.specifiedDataSeriesIndex || spec.specifiedDataSeriesId && "all" === spec.specifiedDataSeriesId ? this._specifiedDataSeries = this._option.getAllSeries() : (spec.specifiedDataSeriesIndex || spec.specifiedDataSeriesId) && (this._specifiedDataSeries = this._getSeriesByIdOrIndex(spec.specifiedDataSeriesId, spec.specifiedDataSeriesIndex));
       }
       initEvent() {
-        "cartesian" !== this._relativeSeries.coordinate && (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)));
+        "cartesian" !== this._relativeSeries.coordinate && (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() {
         super.clear(), this._markerComponent = null, this._firstSeries = null;
@@ -90708,14 +90900,43 @@
       }
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return isEqual(prevSpec, spec) || (result.reRender = !0, result.reMake = !0, result.change = !0), result;
+        return isEqual(prevSpec, spec) || (result.reRender = !0, result.change = !0, result.reMake || result.reCompile || !this._isComponentOnlySpecChange(spec, prevSpec) ? result.reMake || result.reCompile || !this._isAutoRangeSpecChange(spec, prevSpec) ? result.reMake = !0 : result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          scaleDomain: !0,
+          layout: !0,
+          render: !0
+        }) : result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result;
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        const normalizeDomainPosition = !(null == spec ? void 0 : spec.autoRange) && !(null == prevSpec ? void 0 : prevSpec.autoRange);
+        return isEqual(normalizeMarkerSpecForComponentOnlyUpdate(prevSpec, {
+          normalizeDomainPosition: normalizeDomainPosition
+        }), normalizeMarkerSpecForComponentOnlyUpdate(spec, {
+          normalizeDomainPosition: normalizeDomainPosition
+        }));
+      }
+      _isAutoRangeSpecChange(spec, prevSpec) {
+        return !(!(null == spec ? void 0 : spec.autoRange) && !(null == prevSpec ? void 0 : prevSpec.autoRange)) && isEqual(normalizeMarkerSpecForComponentOnlyUpdate(prevSpec, {
+          normalizeDomainPosition: !0,
+          normalizeAutoRange: !0
+        }), normalizeMarkerSpecForComponentOnlyUpdate(spec, {
+          normalizeDomainPosition: !0,
+          normalizeAutoRange: !0
+        }));
+      }
+      reInit(spec) {
+        super.reInit(spec), this._bindSeries(), this._initDataView(), this._buildMarkerAttributeContext(), this._markerComponent && this._updateMarkerLayout();
       }
       _initCommonDataView() {
         const {
             options: options
           } = this._computeOptions(),
           seriesData = this._getRelativeDataView();
-        registerDataSetInstanceTransform(this._option.dataSet, "markerAggregation", markerAggregation), registerDataSetInstanceTransform(this._option.dataSet, "markerFilter", markerFilter);
+        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`
         });
@@ -90986,9 +91207,9 @@
           } = getMarkLineProcessInfo(spec);
         let points = [];
         if (doXProcess || doXYY1Process || doYProcess || doYXX1Process || doXYProcess || isValidCoordinates && isValidProcessX || isValidCoordinates && isValidProcessY) {
-          const xyPoints = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange);
+          const xyPoints = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange, !1, this._getAutoRangeExtendDomainKeyPrefix());
           points = 1 === xyPoints.length ? xyPoints[0] : xyPoints.map(point => point[0]);
-        } else doCoordinatesProcess ? points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset) : isPositionLayout && (points = positionLayout(spec.positions, relativeSeries, spec.regionRelative));
+        } else doCoordinatesProcess ? points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset, this._getAutoRangeExtendDomainKeyPrefix()) : isPositionLayout && (points = positionLayout(spec.positions, relativeSeries, spec.regionRelative));
         return {
           points: points
         };
@@ -91198,7 +91419,7 @@
           y: this._relativeSeries.getRegion().getLayoutStartPoint().y + 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 = 1 === polarPoints.length ? polarPoints[0] : polarPoints.map(point => point[0]), pointsAttr = points[0].radius === points[1].radius ? {
             radius: points[0].radius,
             startAngle: points[0].angle,
@@ -91207,7 +91428,7 @@
           } : {
             points: points.map(point => polarToCartesian(center, point.radius, point.angle))
           };
-        } else doCoordinatesProcess && (points = polarCoordinateLayout(data, relativeSeries, autoRange), pointsAttr = {
+        } else doCoordinatesProcess && (points = polarCoordinateLayout(data, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix()), pointsAttr = {
           points: points.map(point => polarToCartesian(center, point.radius, point.angle))
         });
         return pointsAttr;
@@ -91572,7 +91793,7 @@
         let points = [],
           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;
           start && start.length && end && end.length && (points = [{
             x: start[0].x,
@@ -91582,10 +91803,10 @@
             y: start[0].y
           }, end[0]]);
         } 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;
           start && start.length && end && end.length && (points = [...start, end[1], end[0]]);
-        } else doCoordinatesProcess ? points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset) : isPositionLayout && (points = positionLayout(spec.positions, relativeSeries, spec.regionRelative));
+        } else doCoordinatesProcess ? points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset, this._getAutoRangeExtendDomainKeyPrefix()) : isPositionLayout && (points = positionLayout(spec.positions, relativeSeries, spec.regionRelative));
         return {
           points: points
         };
@@ -91668,7 +91889,7 @@
           y: this._relativeSeries.getRegion().getLayoutStartPoint().y + 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());
           doRadAngProcess ? pointsAttr = {
             innerRadius: polarLines[0][0].radius,
             outerRadius: polarLines[1][0].radius,
@@ -91688,7 +91909,7 @@
             endAngle: polarLines[1][1].angle,
             center: center
           });
-        } else doCoordinatesProcess && (points = polarCoordinateLayout(data, relativeSeries, autoRange), pointsAttr = {
+        } else doCoordinatesProcess && (points = polarCoordinateLayout(data, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix()), pointsAttr = {
           points: points.map(point => polarToCartesian(center, point.radius, point.angle))
         });
         return pointsAttr;
@@ -92000,6 +92221,15 @@
         var _a, _b, _c, _d, _e, _f, _g, _h;
         super.setAttrFromSpec(), this._orient = null !== (_a = this._spec.orient) && void 0 !== _a ? _a : "bottom", this._specs = null !== (_b = this._spec.specs) && void 0 !== _b ? _b : [], this._direction = null !== (_c = this._spec.direction) && void 0 !== _c ? _c : "default", this._alternate = null !== (_d = this._spec.alternate) && void 0 !== _d && _d, this._dx = null !== (_e = this._spec.dx) && void 0 !== _e ? _e : 0, this._dy = null !== (_f = this._spec.dy) && void 0 !== _f ? _f : 0, this._position = null !== (_g = this._spec.position) && void 0 !== _g ? _g : "middle", this._visible = null === (_h = this._spec.visible) || void 0 === _h || _h;
       }
+      _compareSpec(spec, prevSpec) {
+        const result = super._compareSpec(spec, prevSpec),
+          specChanged = !isEqual(prevSpec, spec);
+        return (null == prevSpec ? void 0 : prevSpec.type) !== (null == spec ? void 0 : spec.type) ? (result.reMake = !0, result) : (!specChanged || result.reMake || result.reCompile || (result.change = !0, result.reRender = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result);
+      }
       afterSetLayoutStartPoint(pos) {
         if (super.afterSetLayoutStartPoint(pos), isValidNumber$1(pos.x)) {
           const offsetX = isVertical(this._orient) ? pos.x + this._sliderExceededSize() / 2 : pos.x;
@@ -92106,7 +92336,11 @@
       }
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return result.reRender = !0, isEqual(prevSpec, spec) || (result.reMake = !0), result;
+        return result.reRender = !0, isEqual(prevSpec, spec) || (result.change = !0, result.reMake || result.reCompile ? result.reMake = !0 : result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result;
       }
       _getDataLabelType(baseMark, type) {
         const markType = baseMark.type;
@@ -92744,7 +92978,7 @@
         return new MarkPoint$1(markPointAttrs);
       }
       _markerLayout() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const spec = this._spec,
           data = this._markerData,
           relativeSeries = this._relativeSeries,
@@ -92770,7 +93004,8 @@
         }
         if (this._markerComponent) {
           const attribute = null !== (_b = this._markerComponent.attribute) && void 0 !== _b ? _b : {},
-            textStyle = null !== (_d = null === (_c = attribute.itemContent) || void 0 === _c ? void 0 : _c.textStyle) && void 0 !== _d ? _d : {};
+            textStyle = null !== (_d = null === (_c = attribute.itemContent) || void 0 === _c ? void 0 : _c.textStyle) && void 0 !== _d ? _d : {},
+            specText = null === (_e = this._spec.itemContent.text) || void 0 === _e ? void 0 : _e.text;
           this._markerComponent.setAttributes({
             position: void 0 === point ? {
               x: null,
@@ -92778,7 +93013,7 @@
             } : point,
             itemContent: Object.assign(Object.assign({}, attribute.itemContent), {
               textStyle: Object.assign(Object.assign({}, textStyle), {
-                text: (null === (_e = this._spec.itemContent.text) || void 0 === _e ? void 0 : _e.formatMethod) ? this._spec.itemContent.text.formatMethod(dataPoints, seriesData) : textStyle.text
+                text: (null === (_f = this._spec.itemContent.text) || void 0 === _f ? void 0 : _f.formatMethod) ? this._spec.itemContent.text.formatMethod(dataPoints, seriesData) : isValid$1(specText) ? specText : textStyle.text
               }),
               offsetX: computeOffsetFromRegion(point, attribute.itemContent.offsetX, this._relativeSeries.getRegion()),
               offsetY: computeOffsetFromRegion(point, attribute.itemContent.offsetY, this._relativeSeries.getRegion())
@@ -92856,7 +93091,7 @@
           isPositionLayout = isValid$1(spec.position),
           autoRange = null !== (_a = null == spec ? void 0 : spec.autoRange) && void 0 !== _a && _a;
         let point;
-        return isXYLayout ? point = null === (_c = null === (_b = xyLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange)) || void 0 === _b ? void 0 : _b[0]) || void 0 === _c ? void 0 : _c[0] : isCoordinateLayout ? point = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset)[0] : isPositionLayout && (point = positionLayout(spec.position, relativeSeries, spec.regionRelative)[0]), {
+        return isXYLayout ? point = null === (_c = null === (_b = xyLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange, !1, this._getAutoRangeExtendDomainKeyPrefix())) || void 0 === _b ? void 0 : _b[0]) || void 0 === _c ? void 0 : _c[0] : isCoordinateLayout ? point = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset, this._getAutoRangeExtendDomainKeyPrefix())[0] : isPositionLayout && (point = positionLayout(spec.position, relativeSeries, spec.regionRelative)[0]), {
           point: point
         };
       }
@@ -92894,7 +93129,7 @@
         const data = this._markerData,
           relativeSeries = this._relativeSeries,
           autoRange = null !== (_b = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.autoRange) && void 0 !== _b && _b,
-          polarPoint = polarLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange)[0][0],
+          polarPoint = polarLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange, this._getAutoRangeExtendDomainKeyPrefix())[0][0],
           center = {
             x: this._relativeSeries.getRegion().getLayoutStartPoint().x + this._relativeSeries.angleAxisHelper.center().x,
             y: this._relativeSeries.getRegion().getLayoutStartPoint().y + this._relativeSeries.angleAxisHelper.center().y
@@ -92966,6 +93201,11 @@
       delayTime: 0
     };
 
+    const BRUSH_COMPONENT_ONLY_CHANGE_KEYS = {
+        style: !0,
+        inBrush: !0,
+        outOfBrush: !0
+      };
     let Brush$1 = class Brush extends BaseComponent {
       constructor() {
         super(...arguments), this.layoutType = "none", this.type = ComponentTypeEnum.brush, this.name = ComponentTypeEnum.brush, this.specKey = "brush", this.layoutZIndex = LayoutZIndex.Brush, this._linkedSeries = [], this._itemMap = {}, this._linkedItemMap = {}, this._inBrushElementsMap = {}, this._outOfBrushElementsMap = {}, this._linkedInBrushElementsMap = {}, this._linkedOutOfBrushElementsMap = {}, this._cacheInteractiveRangeAttrs = [], this._releatedAxes = [], this._regionAxisMap = {}, this._axisDataZoomMap = {}, this._zoomRecord = [];
@@ -93028,7 +93268,14 @@
           this._updateBrushComponent(region, index);
         });
         const result = super._compareSpec(spec, prevSpec);
-        return isEqual(prevSpec, spec) || (result.reRender = !0, result.reMake = !0), result;
+        return isEqual(prevSpec, spec) || (result.change = !0, result.reRender = !0, result.reMake || result.reCompile || !this._isComponentOnlySpecChange(spec, prevSpec) ? result.reMake = !0 : result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result;
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || BRUSH_COMPONENT_ONLY_CHANGE_KEYS[key]);
       }
       onLayoutEnd() {
         var _a;
@@ -93040,9 +93287,12 @@
         })));
       }
       _updateBrushComponent(region, componentIndex) {
+        var _a;
         const interactiveAttr = this._getBrushInteractiveAttr(region),
           brushComponent = this._brushComponents[componentIndex];
-        brushComponent.setAttributes(interactiveAttr), this._initMarkBrushState(componentIndex, ""), brushComponent.children[0].removeAllChild();
+        brushComponent.setAttributes(Object.assign({
+          brushStyle: transformToGraphic(null === (_a = this._spec) || void 0 === _a ? void 0 : _a.style)
+        }, interactiveAttr)), this._initMarkBrushState(componentIndex, ""), brushComponent.children[0].removeAllChild();
       }
       _shouldEnableInteractive() {
         return !1 !== this.getOption().getCompiler().getOption().interactive;
@@ -93361,6 +93611,10 @@
       Factory.registerComponent(Brush$1.type, Brush$1);
     };
 
+    const CUSTOM_MARK_COMPONENT_ONLY_CHANGE_KEYS = {
+      style: !0,
+      state: !0
+    };
     class CustomMark extends BaseComponent {
       constructor() {
         super(...arguments), this.type = ComponentTypeEnum.customMark, this.specKey = "customMark", this.layoutType = "none", this.layoutZIndex = LayoutZIndex.CustomMark, this.layoutLevel = LayoutLevel.CustomMark;
@@ -93418,7 +93672,27 @@
       initEvent() {}
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return isEqual(prevSpec, spec) || (result.reMake = !0), result.change = !0, result.reRender = !0, result;
+        return isEqual(prevSpec, spec) || (result.reMake || result.reCompile || !this._isComponentOnlySpecChange(spec, prevSpec) ? result.reMake = !0 : result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          render: !0
+        })), result.change = !0, result.reRender = !0, result;
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? 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(!1, !0);
+        });
+      }
+      _updateMarkStyleWithSpec(spec, mark) {
+        var _a, _b, _c, _d;
+        if (spec && mark && (this.initMarkStyleWithSpec(mark, spec), "group" === spec.type)) {
+          const children = null !== (_c = null === (_b = (_a = mark).getMarks) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : [];
+          null === (_d = spec.children) || void 0 === _d || _d.forEach((childSpec, index) => {
+            this._updateMarkStyleWithSpec(childSpec, children[index]);
+          });
+        }
       }
       _getMarkAttributeContext() {
         return {