@visactor/vchart 2.1.0-alpha.6 → 2.1.0-alpha.8

package/build/index.es.js

@@ -57796,6 +57796,10 @@ function getColorSchemeBySeries(colorScheme, seriesSpec) {
 }
 
 class ColorOrdinalScale extends OrdinalScale {
+    setSpecified(value) {
+        this._specified = value ? Object.assign({}, value) : {};
+        return this;
+    }
     range(value) {
         if (!value) {
             return super.range();
@@ -59384,6 +59388,7 @@ let Event$1 = class Event {
     }
     constructor(eventDispatcher, mode) {
         this._composedEventMap = new Map();
+        this._eventHandlerMap = new Map();
         this._eventDispatcher = eventDispatcher;
         this._mode = mode;
     }
@@ -59405,11 +59410,12 @@ let Event$1 = class Event {
         }
         else {
             this._eventDispatcher.register(eType, handler);
+            this._addEventHandler(eType, handler);
         }
         return this;
     }
     off(eType, query, cb) {
-        var _a, _b;
+        var _a, _b, _c;
         const callback = (cb !== null && cb !== void 0 ? cb : query);
         const ComposedEventCtor = Factory.getComposedEvent(eType);
         if (!!ComposedEventCtor) {
@@ -59428,7 +59434,8 @@ let Event$1 = class Event {
         }
         else {
             if (callback) {
-                const handler = {
+                const storedHandler = this._getEventHandler(eType, callback);
+                const handler = (_c = storedHandler) !== null && _c !== void 0 ? _c : {
                     callback,
                     query: null,
                     filter: {
@@ -59442,9 +59449,11 @@ let Event$1 = class Event {
                     }
                 };
                 this._eventDispatcher.unregister(eType, handler);
+                this._removeEventHandler(eType, callback);
             }
             else {
                 this._eventDispatcher.unregister(eType);
+                this._eventHandlerMap.delete(eType);
             }
         }
         return this;
@@ -59462,9 +59471,40 @@ let Event$1 = class Event {
         return this;
     }
     release() {
-        this._eventDispatcher.clear();
+        this._eventHandlerMap.forEach((handlers, eventType) => {
+            handlers.forEach(handler => {
+                this._eventDispatcher.unregister(eventType, handler);
+            });
+        });
+        this._eventHandlerMap.clear();
+        this._composedEventMap.forEach(entry => {
+            entry.event.unregister();
+        });
         this._composedEventMap.clear();
     }
+    _addEventHandler(eventType, handler) {
+        if (!handler.callback) {
+            return;
+        }
+        if (!this._eventHandlerMap.has(eventType)) {
+            this._eventHandlerMap.set(eventType, new Map());
+        }
+        this._eventHandlerMap.get(eventType).set(handler.callback, handler);
+    }
+    _getEventHandler(eventType, callback) {
+        var _a;
+        return (_a = this._eventHandlerMap.get(eventType)) === null || _a === void 0 ? void 0 : _a.get(callback);
+    }
+    _removeEventHandler(eventType, callback) {
+        const handlerMap = this._eventHandlerMap.get(eventType);
+        if (!handlerMap) {
+            return;
+        }
+        handlerMap.delete(callback);
+        if (!handlerMap.size) {
+            this._eventHandlerMap.delete(eventType);
+        }
+    }
 };
 
 var HOOK_EVENT;
@@ -66783,7 +66823,6 @@ class VChart {
         }
         if (updateResult.reMake) {
             (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.releaseGrammar(true);
-            this._userEvents.forEach(e => { var _a; return (_a = this._event) === null || _a === void 0 ? void 0 : _a.on(e.eType, e.query, e.handler); });
         }
         else if (updateResult.reCompile) {
             (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
@@ -75567,8 +75606,22 @@ class GlobalScale {
                 return result;
             }
             if (!isEqual(lastSpec.specified, s.specified)) {
-                result.reMake = true;
-                return result;
+                if (s.id !== 'color') {
+                    result.reMake = true;
+                    return result;
+                }
+                const colorScale = scale;
+                if (colorScale.setSpecified) {
+                    colorScale.setSpecified(s.specified);
+                }
+                else if (s.specified && colorScale.specified) {
+                    colorScale.specified(s.specified);
+                }
+                else {
+                    result.reMake = true;
+                    return result;
+                }
+                result.reRender = true;
             }
             if (s.range && !isEqual(s.range, scale.range())) {
                 scale.range(s.range);
@@ -75977,17 +76030,10 @@ const MARKER_COMPONENT_SPEC_KEYS = {
     [ComponentTypeEnum.markArea]: true
 };
 const MARKER_ADDITION_REMAKE_SPEC_KEYS = {
-    autoRange: true,
     regionId: true,
     regionIndex: true,
     seriesId: true,
     seriesIndex: true,
-    relativeSeriesId: true,
-    relativeSeriesIndex: true,
-    startRelativeSeriesId: true,
-    startRelativeSeriesIndex: true,
-    endRelativeSeriesId: true,
-    endRelativeSeriesIndex: true,
     specifiedDataSeriesId: true,
     specifiedDataSeriesIndex: true
 };
@@ -76166,10 +76212,14 @@ class BaseChart extends CompilableBase {
             return this._components.filter(c => c.type === type);
         };
         this._isMarkerAdditionSpecSafeWithoutRemake = (spec) => {
-            if (!spec || typeof spec !== 'object' || spec.visible === false) {
+            if (!spec || typeof spec !== 'object') {
                 return false;
             }
-            return !Object.keys(MARKER_ADDITION_REMAKE_SPEC_KEYS).some(key => !isNil$1(spec[key]));
+            const markerSpec = spec;
+            if (markerSpec.visible === false) {
+                return false;
+            }
+            return !Object.keys(MARKER_ADDITION_REMAKE_SPEC_KEYS).some(key => !isNil$1(markerSpec[key]));
         };
         this._paddingSpec = normalizeLayoutPaddingSpec((_a = spec.padding) !== null && _a !== void 0 ? _a : option.getTheme('padding'));
         this._event = new Event$1(option.eventDispatcher, option.mode);
@@ -76790,6 +76840,9 @@ class BaseChart extends CompilableBase {
         }
         return nextSpec.slice(currentSpec.length).every(this._isMarkerAdditionSpecSafeWithoutRemake);
     }
+    _isAutoRangeMarkerSpec(spec) {
+        return !!spec && typeof spec === 'object' && spec.autoRange === true;
+    }
     _canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
         return (MARKER_COMPONENT_SPEC_KEYS[key] &&
             isArray$1(currentSpec) &&
@@ -76916,6 +76969,7 @@ class BaseChart extends CompilableBase {
     _createMissingMarkerComponentsForSpecs(result, componentCache) {
         var _a;
         let createdCount = 0;
+        let hasAutoRangeMarker = false;
         (_a = this._specTransformer) === null || _a === void 0 ? void 0 : _a.forEachComponentInSpec(this._spec, (constructor, specInfo) => {
             if (result.reMake) {
                 return;
@@ -76933,12 +76987,13 @@ class BaseChart extends CompilableBase {
                 componentCache[compSpecKey].componentCount++;
             }
             createdCount++;
+            hasAutoRangeMarker = hasAutoRangeMarker || this._isAutoRangeMarkerSpec(specInfo.spec);
         }, this._option.getSpecInfo());
         if (!createdCount) {
             return;
         }
         result.change = true;
-        result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+        result.effects = Object.assign(Object.assign(Object.assign(Object.assign({}, result.effects), { component: true }), (hasAutoRangeMarker ? { scaleDomain: true } : null)), { layout: true, render: true });
     }
     _removeMarkerComponentsForEmptySpecs(result) {
         const removedComponents = this._components.filter(component => {
@@ -107886,6 +107941,7 @@ 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_STYLE_PLACEHOLDER = '__vchart_marker_style__';
 const MARKER_DOMAIN_POSITION_SPEC_KEYS = [
     'coordinate',
     'coordinates',
@@ -107911,6 +107967,24 @@ const normalizeMarkerLabelFormatMethod = (label) => {
     }
     return Object.assign(Object.assign({}, label), { formatMethod: MARKER_FORMAT_METHOD_PLACEHOLDER });
 };
+const normalizeMarkerStyles = (value) => {
+    if (Array.isArray(value)) {
+        return value.map(normalizeMarkerStyles);
+    }
+    if (!value || typeof value !== 'object') {
+        return value;
+    }
+    const normalized = Object.assign({}, value);
+    Object.keys(normalized).forEach(key => {
+        if (key === 'style' || key.endsWith('Style')) {
+            normalized[key] = MARKER_STYLE_PLACEHOLDER;
+        }
+        else {
+            normalized[key] = normalizeMarkerStyles(normalized[key]);
+        }
+    });
+    return normalized;
+};
 const normalizeMarkerSpecForComponentOnlyUpdate = (spec, options) => {
     var _a;
     if (!spec || typeof spec !== 'object') {
@@ -107919,9 +107993,7 @@ const normalizeMarkerSpecForComponentOnlyUpdate = (spec, options) => {
     const normalized = Object.assign({}, spec);
     if (options.normalizeDomainPosition) {
         MARKER_DOMAIN_POSITION_SPEC_KEYS.forEach(key => {
-            if (key in normalized) {
-                normalized[key] = MARKER_COORDINATE_PLACEHOLDER;
-            }
+            normalized[key] = MARKER_COORDINATE_PLACEHOLDER;
         });
     }
     if (options.normalizeAutoRange && 'autoRange' in normalized) {
@@ -107935,6 +108007,9 @@ const normalizeMarkerSpecForComponentOnlyUpdate = (spec, options) => {
     if ('label' in normalized) {
         normalized.label = normalizeMarkerLabelFormatMethod(normalized.label);
     }
+    Object.keys(normalized).forEach(key => {
+        normalized[key] = normalizeMarkerStyles(normalized[key]);
+    });
     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 }) });
@@ -108192,6 +108267,7 @@ class BaseMarker extends BaseComponent {
     }
     reInit(spec) {
         super.reInit(spec);
+        this._releaseMarkerData();
         this._bindSeries();
         this._initDataView();
         this._buildMarkerAttributeContext();
@@ -110454,7 +110530,7 @@ class BaseMarkPoint extends BaseMarker {
         return markPoint;
     }
     _markerLayout() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const spec = this._spec;
         const data = this._markerData;
         const relativeSeries = this._relativeSeries;
@@ -110465,8 +110541,16 @@ class BaseMarkPoint extends BaseMarker {
                 ? data.latestData[0].latestData
                 : data.latestData
             : seriesData;
+        const { itemLine = {}, itemContent = {} } = this._spec;
+        const { visible: itemLineVisible, line = {} } = itemLine, restItemLine = __rest$f(itemLine, ["visible", "line"]);
+        const itemLineAttrs = itemLineVisible !== false
+            ? Object.assign(Object.assign({}, restItemLine), { visible: true, lineStyle: transformToGraphic(line.style) })
+            : {
+                visible: false
+            };
+        const labelAttrs = transformLabelAttributes(Object.assign(Object.assign({}, itemContent.text), { style: merge$1({ dx: 0, dy: 0 }, (_b = (_a = itemContent.text) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : itemContent.style) }), data, this._markAttributeContext);
         let limitRect;
-        if (spec.clip || ((_a = spec.itemContent) === null || _a === void 0 ? void 0 : _a.confine)) {
+        if (spec.clip || ((_c = spec.itemContent) === null || _c === void 0 ? void 0 : _c.confine)) {
             const { minX, maxX, minY, maxY } = computeClipRange([relativeSeries.getRegion()]);
             limitRect = {
                 x: minX,
@@ -110476,17 +110560,18 @@ 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;
+            const attribute = (_d = this._markerComponent.attribute) !== null && _d !== void 0 ? _d : {};
+            const textStyle = (_f = (_e = attribute.itemContent) === null || _e === void 0 ? void 0 : _e.textStyle) !== null && _f !== void 0 ? _f : {};
+            const specText = (_g = this._spec.itemContent.text) === null || _g === void 0 ? void 0 : _g.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: ((_f = this._spec.itemContent.text) === null || _f === void 0 ? void 0 : _f.formatMethod)
+                itemContent: Object.assign(Object.assign({}, attribute.itemContent), { panel: (_h = labelAttrs.panel) !== null && _h !== void 0 ? _h : (_j = attribute.itemContent) === null || _j === void 0 ? void 0 : _j.panel, padding: (_k = labelAttrs.padding) !== null && _k !== void 0 ? _k : (_l = attribute.itemContent) === null || _l === void 0 ? void 0 : _l.padding, textStyle: Object.assign(Object.assign(Object.assign({}, textStyle), ((_m = labelAttrs.textStyle) !== null && _m !== void 0 ? _m : {})), { text: ((_o = this._spec.itemContent.text) === null || _o === void 0 ? void 0 : _o.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()) }),
+                itemLine: itemLineAttrs,
                 limitRect,
                 dx: this._layoutOffsetX,
                 dy: this._layoutOffsetY

package/build/index.js

@@ -57802,6 +57802,10 @@
     }
 
     class ColorOrdinalScale extends OrdinalScale {
+        setSpecified(value) {
+            this._specified = value ? Object.assign({}, value) : {};
+            return this;
+        }
         range(value) {
             if (!value) {
                 return super.range();
@@ -59390,6 +59394,7 @@
         }
         constructor(eventDispatcher, mode) {
             this._composedEventMap = new Map();
+            this._eventHandlerMap = new Map();
             this._eventDispatcher = eventDispatcher;
             this._mode = mode;
         }
@@ -59411,11 +59416,12 @@
             }
             else {
                 this._eventDispatcher.register(eType, handler);
+                this._addEventHandler(eType, handler);
             }
             return this;
         }
         off(eType, query, cb) {
-            var _a, _b;
+            var _a, _b, _c;
             const callback = (cb !== null && cb !== void 0 ? cb : query);
             const ComposedEventCtor = Factory.getComposedEvent(eType);
             if (!!ComposedEventCtor) {
@@ -59434,7 +59440,8 @@
             }
             else {
                 if (callback) {
-                    const handler = {
+                    const storedHandler = this._getEventHandler(eType, callback);
+                    const handler = (_c = storedHandler) !== null && _c !== void 0 ? _c : {
                         callback,
                         query: null,
                         filter: {
@@ -59448,9 +59455,11 @@
                         }
                     };
                     this._eventDispatcher.unregister(eType, handler);
+                    this._removeEventHandler(eType, callback);
                 }
                 else {
                     this._eventDispatcher.unregister(eType);
+                    this._eventHandlerMap.delete(eType);
                 }
             }
             return this;
@@ -59468,9 +59477,40 @@
             return this;
         }
         release() {
-            this._eventDispatcher.clear();
+            this._eventHandlerMap.forEach((handlers, eventType) => {
+                handlers.forEach(handler => {
+                    this._eventDispatcher.unregister(eventType, handler);
+                });
+            });
+            this._eventHandlerMap.clear();
+            this._composedEventMap.forEach(entry => {
+                entry.event.unregister();
+            });
             this._composedEventMap.clear();
         }
+        _addEventHandler(eventType, handler) {
+            if (!handler.callback) {
+                return;
+            }
+            if (!this._eventHandlerMap.has(eventType)) {
+                this._eventHandlerMap.set(eventType, new Map());
+            }
+            this._eventHandlerMap.get(eventType).set(handler.callback, handler);
+        }
+        _getEventHandler(eventType, callback) {
+            var _a;
+            return (_a = this._eventHandlerMap.get(eventType)) === null || _a === void 0 ? void 0 : _a.get(callback);
+        }
+        _removeEventHandler(eventType, callback) {
+            const handlerMap = this._eventHandlerMap.get(eventType);
+            if (!handlerMap) {
+                return;
+            }
+            handlerMap.delete(callback);
+            if (!handlerMap.size) {
+                this._eventHandlerMap.delete(eventType);
+            }
+        }
     };
 
     var HOOK_EVENT;
@@ -66789,7 +66829,6 @@
             }
             if (updateResult.reMake) {
                 (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.releaseGrammar(true);
-                this._userEvents.forEach(e => { var _a; return (_a = this._event) === null || _a === void 0 ? void 0 : _a.on(e.eType, e.query, e.handler); });
             }
             else if (updateResult.reCompile) {
                 (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
@@ -75573,8 +75612,22 @@
                     return result;
                 }
                 if (!isEqual(lastSpec.specified, s.specified)) {
-                    result.reMake = true;
-                    return result;
+                    if (s.id !== 'color') {
+                        result.reMake = true;
+                        return result;
+                    }
+                    const colorScale = scale;
+                    if (colorScale.setSpecified) {
+                        colorScale.setSpecified(s.specified);
+                    }
+                    else if (s.specified && colorScale.specified) {
+                        colorScale.specified(s.specified);
+                    }
+                    else {
+                        result.reMake = true;
+                        return result;
+                    }
+                    result.reRender = true;
                 }
                 if (s.range && !isEqual(s.range, scale.range())) {
                     scale.range(s.range);
@@ -75983,17 +76036,10 @@
         [ComponentTypeEnum.markArea]: true
     };
     const MARKER_ADDITION_REMAKE_SPEC_KEYS = {
-        autoRange: true,
         regionId: true,
         regionIndex: true,
         seriesId: true,
         seriesIndex: true,
-        relativeSeriesId: true,
-        relativeSeriesIndex: true,
-        startRelativeSeriesId: true,
-        startRelativeSeriesIndex: true,
-        endRelativeSeriesId: true,
-        endRelativeSeriesIndex: true,
         specifiedDataSeriesId: true,
         specifiedDataSeriesIndex: true
     };
@@ -76172,10 +76218,14 @@
                 return this._components.filter(c => c.type === type);
             };
             this._isMarkerAdditionSpecSafeWithoutRemake = (spec) => {
-                if (!spec || typeof spec !== 'object' || spec.visible === false) {
+                if (!spec || typeof spec !== 'object') {
                     return false;
                 }
-                return !Object.keys(MARKER_ADDITION_REMAKE_SPEC_KEYS).some(key => !isNil$1(spec[key]));
+                const markerSpec = spec;
+                if (markerSpec.visible === false) {
+                    return false;
+                }
+                return !Object.keys(MARKER_ADDITION_REMAKE_SPEC_KEYS).some(key => !isNil$1(markerSpec[key]));
             };
             this._paddingSpec = normalizeLayoutPaddingSpec((_a = spec.padding) !== null && _a !== void 0 ? _a : option.getTheme('padding'));
             this._event = new Event$1(option.eventDispatcher, option.mode);
@@ -76796,6 +76846,9 @@
             }
             return nextSpec.slice(currentSpec.length).every(this._isMarkerAdditionSpecSafeWithoutRemake);
         }
+        _isAutoRangeMarkerSpec(spec) {
+            return !!spec && typeof spec === 'object' && spec.autoRange === true;
+        }
         _canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
             return (MARKER_COMPONENT_SPEC_KEYS[key] &&
                 isArray$1(currentSpec) &&
@@ -76922,6 +76975,7 @@
         _createMissingMarkerComponentsForSpecs(result, componentCache) {
             var _a;
             let createdCount = 0;
+            let hasAutoRangeMarker = false;
             (_a = this._specTransformer) === null || _a === void 0 ? void 0 : _a.forEachComponentInSpec(this._spec, (constructor, specInfo) => {
                 if (result.reMake) {
                     return;
@@ -76939,12 +76993,13 @@
                     componentCache[compSpecKey].componentCount++;
                 }
                 createdCount++;
+                hasAutoRangeMarker = hasAutoRangeMarker || this._isAutoRangeMarkerSpec(specInfo.spec);
             }, this._option.getSpecInfo());
             if (!createdCount) {
                 return;
             }
             result.change = true;
-            result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+            result.effects = Object.assign(Object.assign(Object.assign(Object.assign({}, result.effects), { component: true }), (hasAutoRangeMarker ? { scaleDomain: true } : null)), { layout: true, render: true });
         }
         _removeMarkerComponentsForEmptySpecs(result) {
             const removedComponents = this._components.filter(component => {
@@ -107892,6 +107947,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     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_STYLE_PLACEHOLDER = '__vchart_marker_style__';
     const MARKER_DOMAIN_POSITION_SPEC_KEYS = [
         'coordinate',
         'coordinates',
@@ -107917,6 +107973,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return Object.assign(Object.assign({}, label), { formatMethod: MARKER_FORMAT_METHOD_PLACEHOLDER });
     };
+    const normalizeMarkerStyles = (value) => {
+        if (Array.isArray(value)) {
+            return value.map(normalizeMarkerStyles);
+        }
+        if (!value || typeof value !== 'object') {
+            return value;
+        }
+        const normalized = Object.assign({}, value);
+        Object.keys(normalized).forEach(key => {
+            if (key === 'style' || key.endsWith('Style')) {
+                normalized[key] = MARKER_STYLE_PLACEHOLDER;
+            }
+            else {
+                normalized[key] = normalizeMarkerStyles(normalized[key]);
+            }
+        });
+        return normalized;
+    };
     const normalizeMarkerSpecForComponentOnlyUpdate = (spec, options) => {
         var _a;
         if (!spec || typeof spec !== 'object') {
@@ -107925,9 +107999,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const normalized = Object.assign({}, spec);
         if (options.normalizeDomainPosition) {
             MARKER_DOMAIN_POSITION_SPEC_KEYS.forEach(key => {
-                if (key in normalized) {
-                    normalized[key] = MARKER_COORDINATE_PLACEHOLDER;
-                }
+                normalized[key] = MARKER_COORDINATE_PLACEHOLDER;
             });
         }
         if (options.normalizeAutoRange && 'autoRange' in normalized) {
@@ -107941,6 +108013,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if ('label' in normalized) {
             normalized.label = normalizeMarkerLabelFormatMethod(normalized.label);
         }
+        Object.keys(normalized).forEach(key => {
+            normalized[key] = normalizeMarkerStyles(normalized[key]);
+        });
         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 }) });
@@ -108198,6 +108273,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         reInit(spec) {
             super.reInit(spec);
+            this._releaseMarkerData();
             this._bindSeries();
             this._initDataView();
             this._buildMarkerAttributeContext();
@@ -110460,7 +110536,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return markPoint;
         }
         _markerLayout() {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             const spec = this._spec;
             const data = this._markerData;
             const relativeSeries = this._relativeSeries;
@@ -110471,8 +110547,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     ? data.latestData[0].latestData
                     : data.latestData
                 : seriesData;
+            const { itemLine = {}, itemContent = {} } = this._spec;
+            const { visible: itemLineVisible, line = {} } = itemLine, restItemLine = __rest$f(itemLine, ["visible", "line"]);
+            const itemLineAttrs = itemLineVisible !== false
+                ? Object.assign(Object.assign({}, restItemLine), { visible: true, lineStyle: transformToGraphic(line.style) })
+                : {
+                    visible: false
+                };
+            const labelAttrs = transformLabelAttributes(Object.assign(Object.assign({}, itemContent.text), { style: merge$1({ dx: 0, dy: 0 }, (_b = (_a = itemContent.text) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : itemContent.style) }), data, this._markAttributeContext);
             let limitRect;
-            if (spec.clip || ((_a = spec.itemContent) === null || _a === void 0 ? void 0 : _a.confine)) {
+            if (spec.clip || ((_c = spec.itemContent) === null || _c === void 0 ? void 0 : _c.confine)) {
                 const { minX, maxX, minY, maxY } = computeClipRange([relativeSeries.getRegion()]);
                 limitRect = {
                     x: minX,
@@ -110482,17 +110566,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 };
             }
             if (this._markerComponent) {
-                const attribute = (_b = this._markerComponent.attribute) !== null && _b !== void 0 ? _b : {};
-                const textStyle = (_d = (_c = attribute.itemContent) === null || _c === void 0 ? void 0 : _c.textStyle) !== null && _d !== void 0 ? _d : {};
-                const specText = (_e = this._spec.itemContent.text) === null || _e === void 0 ? void 0 : _e.text;
+                const attribute = (_d = this._markerComponent.attribute) !== null && _d !== void 0 ? _d : {};
+                const textStyle = (_f = (_e = attribute.itemContent) === null || _e === void 0 ? void 0 : _e.textStyle) !== null && _f !== void 0 ? _f : {};
+                const specText = (_g = this._spec.itemContent.text) === null || _g === void 0 ? void 0 : _g.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: ((_f = this._spec.itemContent.text) === null || _f === void 0 ? void 0 : _f.formatMethod)
+                    itemContent: Object.assign(Object.assign({}, attribute.itemContent), { panel: (_h = labelAttrs.panel) !== null && _h !== void 0 ? _h : (_j = attribute.itemContent) === null || _j === void 0 ? void 0 : _j.panel, padding: (_k = labelAttrs.padding) !== null && _k !== void 0 ? _k : (_l = attribute.itemContent) === null || _l === void 0 ? void 0 : _l.padding, textStyle: Object.assign(Object.assign(Object.assign({}, textStyle), ((_m = labelAttrs.textStyle) !== null && _m !== void 0 ? _m : {})), { text: ((_o = this._spec.itemContent.text) === null || _o === void 0 ? void 0 : _o.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()) }),
+                    itemLine: itemLineAttrs,
                     limitRect,
                     dx: this._layoutOffsetX,
                     dy: this._layoutOffsetY