vue-echarts 8.2.0 → 8.3.1

package/dist/index.js

@@ -1,6 +1,6 @@
-import { a as hasZeroDimension, c as isOn, d as parseOnEvent, f as warn$1, i as hasEventHandler, l as isPlainObject, n as useRuntime, o as isBrowser, r as createEventInvoker, s as isIgnorableWatchChange, u as isValidArrayIndex } from "./runtime-BSiQKM1W.js";
+import { a as hasEventHandler, c as isIgnorableWatchChange, d as isValidArrayIndex, f as parseOnEvent, i as createEventInvoker, l as isOn, o as hasZeroDimension, p as warn$1, r as useRuntime, s as isBrowser, t as planUpdate, u as isPlainObject } from "./update-DiQcDAnW.js";
 import { Teleport, computed, defineComponent, getCurrentInstance, h, inject, nextTick, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, shallowReactive, shallowRef, toRef, toValue, watch, watchSyncEffect } from "vue";
-import { ComponentModel, init, throttle } from "echarts/core";
+import { init, throttle } from "echarts/core";
 //#region src/composables/api.ts
 const METHOD_NAMES = [
 	"getWidth",
@@ -81,27 +81,22 @@ const autoresizeProps = { autoresize: [Boolean, Object] };
 const LOADING_OPTIONS_KEY = Symbol();
 function useLoading(chart, loading, loadingType, loadingOptions) {
 	const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, void 0);
-	return watch(() => loading.value ? {
-		instance: chart.value,
-		visible: true,
+	return watch(() => chart.value && loading.value ? {
 		type: loadingType.value || void 0,
 		options: {
 			...toValue(defaultLoadingOptions),
 			...loadingOptions.value
 		}
-	} : {
-		instance: chart.value,
-		visible: false
-	}, (state) => {
-		const { instance } = state;
+	} : null, (state) => {
+		const instance = chart.value;
 		if (!instance) return;
-		if (!state.visible) {
+		if (!state) {
 			instance.hideLoading();
 			return;
 		}
-		const { type, options: currentOptions } = state;
-		if (type) instance.showLoading(type, currentOptions);
-		else instance.showLoading(currentOptions);
+		const { type, options } = state;
+		if (type) instance.showLoading(type, options);
+		else instance.showLoading(options);
 	}, {
 		deep: true,
 		immediate: true,
@@ -139,15 +134,16 @@ function getSlotPath(key) {
 	} else path.push(...target);
 	return path;
 }
-function ensureChild(parent, seg, nextSeg) {
+function ensureChild(parent, seg, nextSeg, writable) {
 	const parentIsArray = Array.isArray(parent);
 	if (parentIsArray !== isValidArrayIndex(seg)) return;
 	const next = parentIsArray ? parent[Number(seg)] : parent[seg];
 	let child;
-	if (Array.isArray(next)) child = [...next];
-	else if (isPlainObject(next)) child = { ...next };
+	if (Array.isArray(next)) child = writable.has(next) ? next : [...next];
+	else if (isPlainObject(next)) child = writable.has(next) ? next : { ...next };
 	else if (next === void 0 && !parentIsArray && !isValidArrayIndex(nextSeg)) child = {};
 	else return;
+	writable.add(child);
 	writeSegment(parent, seg, child);
 	return child;
 }
@@ -158,10 +154,10 @@ function writeSegment(parent, seg, value) {
 	}
 	parent[seg] = value;
 }
-function writePath(root, path, value, preserveDefined = false) {
+function writePath(root, path, value, writable, preserveDefined = false) {
 	let current = root;
 	for (let i = 0; i < path.length - 1; i++) {
-		const child = ensureChild(current, path[i], path[i + 1]);
+		const child = ensureChild(current, path[i], path[i + 1], writable);
 		if (!child) return false;
 		current = child;
 	}
@@ -178,40 +174,42 @@ function useSlotOption(slots, onSlotsChange) {
 	const isMounted = shallowRef(false);
 	const ready = shallowRef(false);
 	const collectSlotNames = (warnInvalid = false) => {
-		const names = [];
+		const names = /* @__PURE__ */ new Set();
 		for (const key in slots) {
 			if (key === "graphic") continue;
-			if (isValidSlotName(key)) names.push(key);
+			if (isValidSlotName(key)) names.add(key);
 			else if (warnInvalid) warn$1(`Invalid slot name: ${key}`);
 		}
 		return names;
 	};
 	collectSlotNames(true);
-	let slotNames = [];
+	let slotNames = /* @__PURE__ */ new Set();
 	let nextSlotNames = slotNames;
-	let patchedSlotNames = slotNames;
-	const hasNewSlots = () => collectSlotNames().some((name) => !slotNames.includes(name));
+	const patchedSlotNames = /* @__PURE__ */ new Set();
+	const callbacks = /* @__PURE__ */ new Map();
 	function setReady(value) {
 		ready.value = value;
 		if (value) return;
-		patchedSlotNames = [];
+		patchedSlotNames.clear();
 		for (const key of Object.keys(params)) delete params[key];
 	}
 	function syncSlotNames(names) {
-		if (names.length === slotNames.length && slotNames.every((name) => names.includes(name))) return false;
-		for (const key of slotNames) if (!names.includes(key)) {
+		let changed = names.size !== slotNames.size;
+		for (const key of slotNames) if (!names.has(key)) {
+			changed = true;
 			delete params[key];
 			delete containers[key];
+			callbacks.delete(key);
 		}
-		slotNames = names;
-		return true;
+		if (changed) slotNames = names;
+		return changed;
 	}
 	const render = () => {
 		nextSlotNames = collectSlotNames();
-		if (nextSlotNames.length === 0 || !ready.value || !isMounted.value) return;
+		if (nextSlotNames.size === 0 || !ready.value || !isMounted.value) return;
 		const ownerDocument = instance.vnode.el.ownerDocument;
 		detachedRoot ??= ownerDocument.createElement("div");
-		return h(Teleport, { to: detachedRoot }, nextSlotNames.map((slotName) => {
+		return h(Teleport, { to: detachedRoot }, Array.from(nextSlotNames, (slotName) => {
 			const slot = slots[slotName];
 			const slotContent = slotName in params ? slot?.(params[slotName]) : void 0;
 			return h("div", {
@@ -224,32 +222,41 @@ function useSlotOption(slots, onSlotsChange) {
 			}, slotContent);
 		}));
 	};
-	function patchOption(src) {
+	function prepare(src) {
 		const names = collectSlotNames();
 		syncSlotNames(names);
+		const writable = /* @__PURE__ */ new WeakSet();
 		let root;
-		for (const key of patchedSlotNames) if (!names.includes(key)) {
+		for (const key of patchedSlotNames) if (!names.has(key)) {
 			root ??= { ...src };
-			writePath(root, getSlotPath(key), null, true);
-		}
-		if (names.length === 0) {
-			patchedSlotNames = [];
-			return root ?? src;
+			writePath(root, getSlotPath(key), null, writable, true);
 		}
-		root ??= { ...src };
 		const patchedNames = [];
 		for (const key of names) {
-			const formatter = (payload) => {
-				if (!slots[key]) return;
-				if (key in params && Object.is(params[key], payload)) delete params[key];
-				params[key] = payload;
-				return containers[key];
-			};
-			if (!writePath(root, getSlotPath(key), formatter)) continue;
+			root ??= { ...src };
+			let callback = callbacks.get(key);
+			if (!callback) {
+				const formatter = (payload) => {
+					if (!slots[key]) return;
+					if (key in params && Object.is(params[key], payload)) delete params[key];
+					params[key] = payload;
+					return containers[key];
+				};
+				callback = {
+					path: getSlotPath(key),
+					formatter
+				};
+				callbacks.set(key, callback);
+			}
+			if (!writePath(root, callback.path, callback.formatter, writable)) continue;
 			patchedNames.push(key);
 		}
-		patchedSlotNames = patchedNames;
-		return root;
+		return {
+			option: root ?? src,
+			commit: () => {
+				patchedNames.forEach((name) => patchedSlotNames.add(name));
+			}
+		};
 	}
 	onUpdated(() => {
 		if (syncSlotNames(nextSlotNames)) onSlotsChange();
@@ -260,9 +267,11 @@ function useSlotOption(slots, onSlotsChange) {
 	});
 	return {
 		render,
-		hasNewSlots,
-		patchOption,
-		setReady
+		prepare,
+		setReady,
+		cancelPendingUpdate: () => {
+			syncSlotNames(collectSlotNames());
+		}
 	};
 }
 //#endregion
@@ -303,7 +312,7 @@ function useReactiveChartListeners(chart, attrs) {
 		for (const binding of bindings.values()) binding.emitter.off(binding.event, binding.handler);
 		bindings.clear();
 	}
-	const stopWatch = watchSyncEffect(() => {
+	function sync() {
 		seen.clear();
 		const instance = chart.value;
 		for (const [key, source] of consumedSources) if (attrs[key] !== source) consumedSources.delete(key);
@@ -354,219 +363,46 @@ function useReactiveChartListeners(chart, attrs) {
 			binding.emitter.off(binding.event, binding.handler);
 			bindings.delete(key);
 		}
-	});
+	}
+	const stopWatch = watchSyncEffect(sync);
+	if (getCurrentInstance()) onUpdated(sync);
 	const stop = () => {
 		stopWatch();
 		clearBindings();
 	};
 	onScopeDispose(stop);
-	return stop;
-}
-function useRootAttrs(attrs) {
-	return computed(() => {
-		const result = {};
-		for (const key in attrs) {
-			if (key.startsWith(NATIVE_EVENT_PREFIX)) {
-				const event = key.slice(9);
-				if (event) result[`on:${event}`] = attrs[key];
-				continue;
-			}
-			if (!isOn(key)) result[key] = attrs[key];
-		}
-		return result;
-	});
-}
-//#endregion
-//#region src/update.ts
-function toIdentity(value) {
-	return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
-}
-function buildShape(value, context, mode) {
-	if (!isPlainObject(value)) return true;
-	const shape = Object.create(null);
-	for (const key of Object.keys(value)) {
-		const child = value[key];
-		if (child === void 0) continue;
-		if (mode === "graphic" && key === "$action") context.hasAction = true;
-		if (mode === "graphic" && (key === "elements" || key === "children") && Array.isArray(child)) {
-			shape[key] = analyzeItems(child, context, "graphic", true);
-			continue;
-		}
-		if (mode === "option") {
-			const componentItems = ComponentModel.hasClass(key);
-			if (Array.isArray(child) || componentItems && isPlainObject(child)) {
-				shape[key] = analyzeItems(Array.isArray(child) ? child : [child], context, key === "graphic" ? "graphic" : void 0, componentItems);
-				continue;
-			}
-		}
-		shape[key] = mode === "media" && key === "option" ? buildShape(child, context, "option") : buildShape(child, context);
-	}
-	return shape;
-}
-function analyzeItems(items, context, mode, componentItems) {
-	const shapes = [];
-	for (const item of items) {
-		const identity = componentItems ? item : void 0;
-		shapes.push({
-			id: toIdentity(identity?.id),
-			name: toIdentity(identity?.name),
-			shape: buildShape(item, context, mode)
-		});
-	}
-	return shapes;
-}
-/**
-* Build a structural signature that retains component identities but not option payload values.
-* Data arrays inside component items remain leaves. Graphic element trees and nested option units
-* (`baseOption`, timeline options, and media options) reuse collection summaries.
-*/
-function buildSignature(option) {
-	const opt = option;
-	const context = { hasAction: false };
-	const collections = Object.create(null);
-	const objectShapes = Object.create(null);
-	const leaves = [];
-	for (const key of Object.keys(opt)) {
-		const value = opt[key];
-		const componentItems = ComponentModel.hasClass(key);
-		if (Array.isArray(value) || componentItems && isPlainObject(value)) {
-			const mode = key === "options" ? "option" : key === "media" ? "media" : key === "graphic" ? "graphic" : void 0;
-			collections[key] = analyzeItems(Array.isArray(value) ? value : [value], context, mode, componentItems);
-			continue;
-		}
-		if (isPlainObject(value)) {
-			objectShapes[key] = buildShape(value, context, key === "baseOption" ? "option" : void 0);
-			continue;
-		}
-		if (value !== void 0 && !componentItems) leaves.push(key);
-	}
 	return {
-		collections,
-		objectShapes,
-		leaves,
-		hasAction: context.hasAction
+		sync,
+		stop
 	};
 }
-function hasCollectionRemoval(prev, next) {
-	if (!next) return prev.length > 0;
-	return next.length < prev.length;
-}
-function getItemIdentity(item) {
-	return item.id !== void 0 ? `id:${item.id}` : item.name !== void 0 ? `name:${item.name}` : void 0;
-}
-function hasIdentityChange(prev, next) {
-	const length = Math.min(prev.length, next.length);
-	for (let index = 0; index < length; index++) {
-		const previous = getItemIdentity(prev[index]);
-		const current = getItemIdentity(next[index]);
-		if (previous !== current && (previous !== void 0 || current !== void 0)) return true;
-	}
-	return false;
-}
-function preservesReplacementOrder(prev, next) {
-	const positions = /* @__PURE__ */ new Map();
-	for (let index = 0; index < prev.length; index++) {
-		const item = prev[index];
-		if (item.id !== void 0) positions.set(item.id, index);
-	}
-	return next.every((item, index) => {
-		const previousIndex = item.id === void 0 ? void 0 : positions.get(item.id);
-		return previousIndex === void 0 || previousIndex === index;
-	});
-}
-function hasShapeRemoval(prev, next) {
-	if (prev === true || next === true) return false;
-	const prevIsCollection = Array.isArray(prev);
-	const nextIsCollection = Array.isArray(next);
-	if (prevIsCollection || nextIsCollection) return !prevIsCollection || !nextIsCollection || hasCollectionRemoval(prev, next) || hasIdentityChange(prev, next) || findItemShapeRemoval(prev, next) !== void 0;
-	for (const key in prev) {
-		const nextChild = next[key];
-		if (nextChild === void 0 || hasShapeRemoval(prev[key], nextChild)) return true;
-	}
-	return false;
-}
-function findItemShapeRemoval(prev, next) {
-	let anonymousRemoval;
-	for (let index = 0; index < prev.length; index++) {
-		const item = prev[index];
-		let nextShape;
-		if (item.id !== void 0) nextShape = next.find((candidate) => candidate.id === item.id)?.shape;
-		else nextShape = next[index]?.shape;
-		if (nextShape && hasShapeRemoval(item.shape, nextShape)) {
-			if (item.id !== void 0) return item;
-			anonymousRemoval ??= item;
-		}
-	}
-	return anonymousRemoval;
-}
-/** Returns replacements, undefined for a plain merge, or null when a rebuild is required. */
-function collectReplacements(prev, next) {
-	let replaceMerge;
-	if (next.objectShapes.aria && !prev.objectShapes.aria) return null;
-	for (const key in next.collections) if (!prev.collections[key] && !prev.objectShapes[key] && !prev.leaves.includes(key) && !ComponentModel.hasClass(key)) return null;
-	for (const key in prev.objectShapes) {
-		const prevShape = prev.objectShapes[key];
-		const nextShape = next.objectShapes[key];
-		if (prevShape && nextShape) {
-			if (hasShapeRemoval(prevShape, nextShape)) return null;
+function getRootAttrs(attrs) {
+	const result = {};
+	for (const key in attrs) {
+		if (key.startsWith(NATIVE_EVENT_PREFIX)) {
+			const event = key.slice(9);
+			if (event) result[`on:${event}`] = attrs[key];
 			continue;
 		}
-		if (!next.leaves.includes(key)) return null;
+		if (!isOn(key)) result[key] = attrs[key];
 	}
-	for (const key of prev.leaves) if (!next.leaves.includes(key) && next.collections[key] === void 0 && next.objectShapes[key] === void 0) return null;
-	for (const key in prev.collections) {
-		const prevCollection = prev.collections[key];
-		if (key === "graphic" && next.hasAction) continue;
-		const nextCollection = next.collections[key];
-		if (!nextCollection && !ComponentModel.hasClass(key)) return null;
-		const collectionRemoval = hasCollectionRemoval(prevCollection, nextCollection);
-		const identityChange = nextCollection && !collectionRemoval && hasIdentityChange(prevCollection, nextCollection);
-		const shapeRemoval = nextCollection ? findItemShapeRemoval(prevCollection, nextCollection) : void 0;
-		if (shapeRemoval?.id !== void 0) return null;
-		if (!shapeRemoval && !collectionRemoval && !identityChange) continue;
-		if (!ComponentModel.hasClass(key)) return null;
-		if (nextCollection && !preservesReplacementOrder(prevCollection, nextCollection)) return null;
-		(replaceMerge ??= []).push(key);
-	}
-	return replaceMerge;
-}
-/**
-* Produce an update plan that preserves option structure and initialization semantics.
-* Falls back to `notMerge: true` when the change looks complex.
-*/
-function planUpdate(prev, option) {
-	const next = buildSignature(option);
-	if (!prev) return {
-		signature: next,
-		plan: { notMerge: false }
-	};
-	const replaceMerge = collectReplacements(prev, next);
-	if (replaceMerge === null) return {
-		signature: next,
-		plan: { notMerge: !next.hasAction }
-	};
-	replaceMerge?.sort();
-	return {
-		signature: next,
-		plan: replaceMerge ? {
-			notMerge: false,
-			replaceMerge
-		} : { notMerge: false }
-	};
+	return result;
 }
 //#endregion
 //#region src/style.css?raw
-var style_default = "x-vue-echarts{display:block;width:100%;height:100%;min-width:0;}\nx-vue-echarts>.echarts-host{display:block;width:100%;height:100%;min-width:0;}\nx-vue-echarts>.echarts-host>:first-child,x-vue-echarts>.echarts-host>:first-child>canvas{border-radius:inherit;}\n";
+var style_default = "x-vue-echarts{display:block;width:100%;height:100%;min-width:0;min-height:0;}\nx-vue-echarts>.echarts-host{display:block;width:100%;height:100%;min-width:0;border-radius:inherit;}\nx-vue-echarts>.echarts-host>:first-child,x-vue-echarts>.echarts-host>:first-child>canvas{border-radius:inherit;}\n";
 //#endregion
 //#region src/style.ts
-if (isBrowser()) if (Array.isArray(document.adoptedStyleSheets) && "replaceSync" in CSSStyleSheet.prototype) {
-	const sheet = new CSSStyleSheet();
-	sheet.replaceSync(style_default);
-	document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-} else {
-	const styleEl = document.createElement("style");
-	styleEl.textContent = style_default;
-	document.head.appendChild(styleEl);
+if (isBrowser()) {
+	if (Array.isArray(document.adoptedStyleSheets) && "replaceSync" in CSSStyleSheet.prototype) {
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync(style_default);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+	} else {
+		const styleEl = document.createElement("style");
+		styleEl.textContent = style_default;
+		document.head.appendChild(styleEl);
+	}
 }
 //#endregion
 //#region src/ECharts.ts
@@ -575,29 +411,30 @@ const SKIP_AUTO_UPDATE = Symbol();
 const THEME_KEY = Symbol();
 const INIT_OPTIONS_KEY = Symbol();
 const UPDATE_OPTIONS_KEY = Symbol();
+const chartProps = {
+	option: Object,
+	theme: { type: [Object, String] },
+	initOptions: Object,
+	updateOptions: Object,
+	group: String,
+	manualUpdate: Boolean,
+	...autoresizeProps,
+	...loadingProps
+};
 //#endregion
 //#region src/index.ts
 var src_default = /* @__PURE__ */ defineComponent({
 	name: "Echarts",
 	inheritAttrs: false,
-	props: {
-		option: Object,
-		theme: { type: [Object, String] },
-		initOptions: Object,
-		updateOptions: Object,
-		group: String,
-		manualUpdate: Boolean,
-		...autoresizeProps,
-		...loadingProps
-	},
+	props: chartProps,
 	emits: {},
 	slots: Object,
 	setup(props, { attrs, expose, slots }) {
 		const root = shallowRef();
 		const chartHost = shallowRef();
 		const chart = shallowRef();
-		const themeRevision = shallowRef(0);
-		const initOptionsRevision = shallowRef(0);
+		const updateRequest = shallowRef(0);
+		let pendingUpdate = 0;
 		const defaultTheme = inject(THEME_KEY, null);
 		const defaultInitOptions = inject(INIT_OPTIONS_KEY, null);
 		const defaultUpdateOptions = inject(UPDATE_OPTIONS_KEY, null);
@@ -609,95 +446,131 @@ var src_default = /* @__PURE__ */ defineComponent({
 		const realTheme = computed(() => props.theme ?? toValue(defaultTheme) ?? void 0);
 		const realInitOptions = computed(() => props.initOptions ?? toValue(defaultInitOptions) ?? void 0);
 		const realUpdateOptions = computed(() => props.updateOptions ?? toValue(defaultUpdateOptions));
-		const rootAttrs = useRootAttrs(attrs);
 		const terminallyDisposed = shallowRef(false);
-		const { render: renderSlot, hasNewSlots, patchOption, setReady: setSlotsReady } = useSlotOption(slots, requestUpdate);
-		const { patchOption: patchGraphicOption, render: renderGraphic } = useRuntime({
+		const { render: renderSlot, prepare: prepareSlots, setReady: setSlotsReady, cancelPendingUpdate: cancelSlotUpdate } = useSlotOption(slots, requestUpdate);
+		const graphic = useRuntime({
 			slots,
 			manualUpdate,
-			requestUpdate: () => requestUpdate("graphic")
-		}) ?? {};
+			requestUpdate: () => requestUpdate(2)
+		});
 		let lastSignature;
 		let lastAutoOption;
 		let themeApplied = false;
-		let initOptionsInvalidated = false;
 		let optionApplied = false;
-		let manualUpdateAtInit = manualUpdate.value;
 		let initDeferred = false;
 		let graphicSlotApplied = false;
-		const updateFlush = patchGraphicOption ? "post" : "pre";
+		let updateRevision = 0;
+		let modelValid = false;
 		function getAutoOption() {
-			return props.option ?? (patchGraphicOption && (slots.graphic || graphicSlotApplied) ? {} : void 0);
+			return props.option ?? (graphic && (slots.graphic || graphicSlotApplied) ? {} : void 0);
 		}
 		function isCurrent(instance) {
 			return instance !== void 0 && chart.value === instance && !terminallyDisposed.value;
 		}
+		function runUpdate(instance, update, signature) {
+			const revision = ++updateRevision;
+			lastSignature = null;
+			modelValid = false;
+			update();
+			if (!isCurrent(instance) || updateRevision !== revision) return false;
+			lastSignature = signature;
+			modelValid = true;
+			return true;
+		}
 		function applyTheme(instance) {
 			if (!optionApplied || themeApplied) return false;
+			syncListeners();
+			const revision = updateRevision + 1;
 			themeApplied = true;
-			instance.setTheme(realTheme.value || {});
-			return isCurrent(instance);
+			try {
+				return runUpdate(instance, () => instance.setTheme(realTheme.value || {}), lastSignature === void 0 ? void 0 : null);
+			} catch (error) {
+				if (updateRevision === revision) themeApplied = false;
+				throw error;
+			}
 		}
 		function applyOption(instance, option, mode, manualOptions) {
 			const manual = mode === "manual";
 			initDeferred = false;
-			const slotted = patchOption(option);
-			const patched = patchGraphicOption ? patchGraphicOption(slotted) : slotted;
-			const forceGraphic = mode === "graphic";
-			const skipPlanning = manual || forceGraphic;
-			let updateOptions;
-			let nextSignature;
-			if (skipPlanning) updateOptions = forceGraphic ? realUpdateOptions.value ?? void 0 : manualOptions;
-			else if (realUpdateOptions.value) {
-				updateOptions = realUpdateOptions.value;
-				nextSignature = null;
-			} else {
-				const planned = planUpdate(lastSignature ?? void 0, slotted);
-				updateOptions = !planned.signature.hasAction && (lastSignature === null || mode === "theme") ? {
+			const preparedSlots = prepareSlots(option);
+			const slotted = preparedSlots.option;
+			const hasGraphicSlot = Boolean(graphic && slots.graphic);
+			let updateOptions = manual ? manualOptions : realUpdateOptions.value ?? void 0;
+			let nextSignature = null;
+			const graphicOnly = mode === "graphic" && hasGraphicSlot && graphicSlotApplied && modelValid;
+			if (graphicOnly) nextSignature = lastSignature ?? null;
+			else if (!manual && !updateOptions) {
+				const source = hasGraphicSlot ? {
+					...slotted,
+					graphic: void 0
+				} : slotted;
+				const planned = planUpdate(lastSignature ?? void 0, source);
+				updateOptions = !planned.signature.hasAction && lastSignature === null ? {
 					...planned.plan,
 					notMerge: true
 				} : planned.plan;
 				nextSignature = planned.signature;
 			}
-			const hasGraphicSlot = Boolean(patchGraphicOption && slots.graphic);
-			if ((forceGraphic || graphicSlotApplied || hasGraphicSlot) && !updateOptions?.notMerge) {
-				const replaceMerge = updateOptions?.replaceMerge;
-				const replacements = typeof replaceMerge === "string" ? [replaceMerge] : replaceMerge;
-				if (!replacements?.includes("graphic")) updateOptions = {
-					...updateOptions,
-					replaceMerge: replacements ? [...replacements, "graphic"] : ["graphic"]
-				};
-			}
+			const replaceMerge = updateOptions?.replaceMerge;
+			const replacements = typeof replaceMerge === "string" ? [replaceMerge] : replaceMerge ?? [];
+			const preparedGraphic = graphic?.prepare(slotted, !modelValid || !graphicSlotApplied || Boolean(updateOptions?.notMerge) || replacements.includes("graphic") || manual);
+			let patched = preparedGraphic?.option ?? slotted;
+			if ((preparedGraphic?.replace || graphicSlotApplied && !hasGraphicSlot) && !updateOptions?.notMerge && !replacements.includes("graphic")) updateOptions = {
+				...updateOptions,
+				replaceMerge: [...replacements, "graphic"]
+			};
+			const replacesSource = replacements.some((key) => key !== "graphic");
+			if (graphicOnly && !updateOptions?.notMerge && !replacesSource) patched = { graphic: patched.graphic };
+			syncListeners();
+			if (!runUpdate(instance, () => instance.setOption(patched, updateOptions), nextSignature)) return;
+			preparedSlots.commit();
+			preparedGraphic?.commit();
 			graphicSlotApplied = hasGraphicSlot;
 			optionApplied = true;
-			if (!skipPlanning) lastSignature = nextSignature;
 			if (!manual) lastAutoOption = option;
-			instance.setOption(patched, updateOptions);
-			if (!isCurrent(instance) || mode === "theme") return;
-			if (applyTheme(instance) && !manual) applyOption(instance, option, "theme");
+			if (applyTheme(instance) && !manual) applyOption(instance, option);
+		}
+		function scheduleUpdate(reason) {
+			pendingUpdate |= reason;
+			updateRequest.value++;
 		}
-		function requestUpdate(mode) {
+		function requestUpdate(reason = 1) {
+			if (!manualUpdate.value && !initDeferred && !terminallyDisposed.value) scheduleUpdate(reason);
+		}
+		function flushUpdate() {
+			const reasons = pendingUpdate;
+			pendingUpdate = 0;
 			const instance = chart.value;
-			if (!isCurrent(instance) || manualUpdate.value || initDeferred) return;
-			const option = getAutoOption() ?? lastAutoOption;
-			if (!option) return;
-			applyOption(instance, option, mode);
+			if (!reasons || !isCurrent(instance)) return;
+			if (reasons & 8) {
+				cleanup();
+				init$1();
+				return;
+			}
+			if (initDeferred) return;
+			const option = reasons & 3 ? getAutoOption() ?? lastAutoOption : lastAutoOption;
+			const needsTheme = !themeApplied && optionApplied;
+			if (needsTheme && !applyTheme(instance)) return;
+			if (!manualUpdate.value && option) applyOption(instance, option, reasons === 2 && !needsTheme ? "graphic" : void 0);
 		}
-		if (slots.graphic && !patchGraphicOption) warn$1("Detected `#graphic` slot but no extension is registered. Import from `vue-echarts/graphic` to enable it.");
-		const stopListeners = useReactiveChartListeners(chart, attrs);
+		if (slots.graphic && !graphic) warn$1("Detected `#graphic` slot but no extension is registered. Import from `vue-echarts/graphic` to enable it.");
+		const { sync: syncListeners, stop: stopListeners } = useReactiveChartListeners(chart, attrs);
 		function cleanup() {
+			pendingUpdate = 0;
+			graphic?.cancelPendingFlush();
+			updateRevision++;
 			const instance = chart.value;
 			chart.value = void 0;
 			setSlotsReady(false);
 			lastSignature = void 0;
+			modelValid = false;
 			lastAutoOption = void 0;
 			initDeferred = false;
 			graphicSlotApplied = false;
 			instance?.dispose();
 		}
 		function init$1() {
-			initOptionsInvalidated = false;
-			manualUpdateAtInit = manualUpdate.value;
+			pendingUpdate = 0;
 			optionApplied = false;
 			const host = chartHost.value;
 			const instance = init(host, realTheme.value, realInitOptions.value);
@@ -706,8 +579,10 @@ var src_default = /* @__PURE__ */ defineComponent({
 			themeApplied = true;
 			function commit() {
 				const option = manualUpdate.value ? props.option : getAutoOption();
-				if (option) if (manualUpdate.value) applyOption(instance, option, "manual", realUpdateOptions.value ?? void 0);
-				else applyOption(instance, option);
+				if (option) {
+					if (manualUpdate.value) applyOption(instance, option, "manual", realUpdateOptions.value ?? void 0);
+					else applyOption(instance, option);
+				}
 				setSlotsReady(isCurrent(instance));
 			}
 			if (autoresize.value) {
@@ -741,46 +616,26 @@ var src_default = /* @__PURE__ */ defineComponent({
 		};
 		const stopThemeWatch = watch(realTheme, (theme, previousTheme) => {
 			if (isIgnorableWatchChange(theme, previousTheme)) return;
-			themeRevision.value++;
 			themeApplied = false;
+			scheduleUpdate(4);
 		}, {
 			deep: true,
 			flush: "sync"
 		});
 		const stopInitOptionsWatch = watch(realInitOptions, (options, previousOptions) => {
-			if (!isIgnorableWatchChange(options, previousOptions)) {
-				initOptionsInvalidated = true;
-				initOptionsRevision.value++;
-			}
+			if (!isIgnorableWatchChange(options, previousOptions)) scheduleUpdate(8);
 		}, {
 			deep: true,
 			flush: "sync"
 		});
-		const stopOptionWatch = watch(() => manualUpdate.value ? SKIP_AUTO_UPDATE : props.option, (option, previousOption) => {
-			if (option === SKIP_AUTO_UPDATE || previousOption === SKIP_AUTO_UPDATE) return;
-			const nextOption = option ?? getAutoOption();
-			if (!nextOption) return;
-			const instance = chart.value;
-			if (initOptionsInvalidated || !isCurrent(instance) || initDeferred) return;
-			if (hasNewSlots()) return;
-			applyOption(instance, nextOption);
-		}, {
-			deep: true,
-			flush: updateFlush
-		});
-		const stopReinitWatch = watch([manualUpdate, initOptionsRevision], () => {
-			if (!chart.value) return;
-			cleanup();
-			init$1();
-		});
-		const stopThemeApplyWatch = watch(themeRevision, () => {
-			const instance = chart.value;
-			if (!initOptionsInvalidated && manualUpdate.value === manualUpdateAtInit && isCurrent(instance) && !themeApplied) {
-				if (!applyTheme(instance)) return;
-				const option = lastAutoOption;
-				if (option && !manualUpdate.value && !initDeferred && !hasNewSlots()) applyOption(instance, option, "theme");
-			}
-		}, { flush: updateFlush });
+		function watchOption() {
+			return watch(() => manualUpdate.value ? SKIP_AUTO_UPDATE : props.option, (option, previousOption) => {
+				if (option !== SKIP_AUTO_UPDATE && previousOption !== SKIP_AUTO_UPDATE && (option ?? getAutoOption())) requestUpdate();
+			}, { deep: true });
+		}
+		let stopOptionWatch = watchOption();
+		const stopModeWatch = watch(manualUpdate, () => scheduleUpdate(8), { flush: "sync" });
+		const stopUpdateWatch = watch(updateRequest, flushUpdate, { flush: "post" });
 		const stopGroupWatch = watchSyncEffect(() => {
 			const instance = chart.value;
 			if (isCurrent(instance)) instance.group = props.group ?? "";
@@ -793,8 +648,8 @@ var src_default = /* @__PURE__ */ defineComponent({
 			stopThemeWatch();
 			stopInitOptionsWatch();
 			stopOptionWatch();
-			stopReinitWatch();
-			stopThemeApplyWatch();
+			stopModeWatch();
+			stopUpdateWatch();
 			stopGroupWatch();
 			stopLoading();
 			stopAutoresize();
@@ -807,14 +662,22 @@ var src_default = /* @__PURE__ */ defineComponent({
 			const instance = chart.value;
 			if (!isCurrent(instance)) return guardedClear();
 			initDeferred = false;
-			lastSignature = void 0;
-			lastAutoOption = void 0;
-			instance.clear();
+			pendingUpdate = 0;
+			graphic?.cancelPendingFlush();
+			cancelSlotUpdate();
+			stopOptionWatch();
+			stopOptionWatch = watchOption();
+			if (runUpdate(instance, () => instance.clear(), void 0)) {
+				lastAutoOption = void 0;
+				graphicSlotApplied = false;
+				optionApplied = true;
+			}
 		};
 		onMounted(() => {
 			if (!terminallyDisposed.value) init$1();
 		});
 		onBeforeUnmount(() => {
+			stopOptionWatch();
 			if (terminallyDisposed.value) return;
 			terminallyDisposed.value = true;
 			const element = root.value;
@@ -842,12 +705,10 @@ var src_default = /* @__PURE__ */ defineComponent({
 			if (!terminallyDisposed.value) {
 				const teleported = renderSlot();
 				if (teleported) children.push(teleported);
-				if (renderGraphic) {
-					const graphic = renderGraphic();
-					if (graphic) children.push(graphic);
-				}
+				const graphicContent = graphic?.render();
+				if (graphicContent) children.push(graphicContent);
 			}
-			const forwardedAttrs = rootAttrs.value;
+			const forwardedAttrs = getRootAttrs(attrs);
 			return h(TAG_NAME, {
 				...forwardedAttrs,
 				ref: root,