react-use-echarts 0.0.11 → 1.0.0

package/dist/index.es.js

@@ -1,83 +1,1096 @@
-import { useRef as v, useCallback as a, useEffect as u } from "react";
-import * as k from "echarts";
-const M = ({
-  /** Chart configuration */
-  option: f,
-  /** Theme name */
-  theme: i,
-  /** Skip merging with previous options */
-  notMerge: l = !1,
-  /** Enable lazy update mode */
-  lazyUpdate: b = !1,
-  /** Display loading animation */
-  showLoading: p = !1,
-  /** Loading animation config */
-  loadingOption: O,
-  /** Event handlers map */
-  onEvents: s
-}) => {
-  const c = v(null), n = v(void 0), C = () => n.current, d = a(
-    () => ({
-      option: f,
-      theme: i,
-      notMerge: l,
-      lazyUpdate: b,
-      showLoading: p,
-      loadingOption: O,
-      onEvents: s
-    }),
-    [f, i, l, b, p, O, s]
-  ), o = a(() => {
-    if (c.current && !n.current) {
-      const e = k.init(c.current, i);
-      n.current = e;
-      const r = d();
-      return r.onEvents && Object.entries(r.onEvents).forEach(
-        ([t, { handler: h, query: g, context: z }]) => {
-          g ? e.on(t, g, h, z) : e.on(t, h, z);
-        }
-      ), r.showLoading ? e.showLoading(r.loadingOption) : e.hideLoading(), e.setOption(r.option, {
-        notMerge: r.notMerge,
-        lazyUpdate: r.lazyUpdate
-      }), e;
-    }
-    return n.current;
-  }, [d, i]), R = a(
-    (e, r) => {
-      queueMicrotask(() => {
-        const t = n.current || o();
-        t && t.setOption(e, r);
-      });
-    },
-    [o]
-  );
-  return u(() => {
-    const e = n.current;
-    if (!e || !c.current) return;
-    let r;
-    try {
-      r = new ResizeObserver(() => {
-        e.resize();
-      }), r.observe(c.current);
-    } catch (t) {
-      console.warn("ResizeObserver not available:", t);
-    }
-    return () => {
-      r?.disconnect();
-    };
-  }, []), u(() => {
-    c.current && queueMicrotask(o);
-  }, [c, o]), u(() => () => {
-    const e = n.current;
-    e && (s && Object.entries(s).forEach(([r, { handler: t }]) => {
-      e.off(r, t);
-    }), e.dispose(), n.current = void 0);
-  }, [s]), {
-    chartRef: c,
-    setOption: R,
-    getInstance: C
-  };
-};
-export {
-  M as useEcharts
-};
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import * as echarts from "echarts";
+var __commonJSMin = (e, l) => () => (l || e((l = { exports: {} }).exports, l), l.exports), __require = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, l) => (typeof require < "u" ? require : e)[l] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function.");
+}), require_react_compiler_runtime_production = /* @__PURE__ */ __commonJSMin(((e) => {
+	var l = __require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+	e.c = function(e) {
+		return l.H.useMemoCache(e);
+	};
+})), require_react_compiler_runtime_development = /* @__PURE__ */ __commonJSMin(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		var l = __require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+		e.c = function(e) {
+			var u = l.H;
+			return u === null && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."), u.useMemoCache(e);
+		};
+	})();
+})), import_compiler_runtime = (/* @__PURE__ */ __commonJSMin(((e, l) => {
+	process.env.NODE_ENV === "production" ? l.exports = require_react_compiler_runtime_production() : l.exports = require_react_compiler_runtime_development();
+})))();
+function useLazyInit(l, f = !1) {
+	let p = f !== !1, [m, h] = useState(!p), g = useRef(f);
+	return g.current = f, useEffect(() => {
+		if (!p || m) return;
+		let e = l.current;
+		if (!e) return;
+		let u = g.current, d = {
+			root: null,
+			rootMargin: "50px",
+			threshold: .1,
+			...typeof u == "object" ? u : {}
+		}, f = new IntersectionObserver((e) => {
+			let [l] = e;
+			l.isIntersecting && (h(!0), f.disconnect());
+		}, d);
+		return f.observe(e), () => {
+			f.disconnect();
+		};
+	}, [
+		l,
+		p,
+		m
+	]), m;
+}
+var instanceCache = /* @__PURE__ */ new WeakMap(), trackedElements = /* @__PURE__ */ new Set();
+function getCachedInstance(e) {
+	return instanceCache.get(e)?.instance;
+}
+function setCachedInstance(e, l) {
+	let u = instanceCache.get(e);
+	return u ? (u.refCount += 1, u.instance) : (instanceCache.set(e, {
+		instance: l,
+		refCount: 1
+	}), trackedElements.add(e), l);
+}
+function replaceCachedInstance(e, l) {
+	let u = instanceCache.get(e);
+	return u ? (u.instance.dispose(), u.instance = l, l) : (instanceCache.set(e, {
+		instance: l,
+		refCount: 1
+	}), trackedElements.add(e), l);
+}
+function releaseCachedInstance(e) {
+	let l = instanceCache.get(e);
+	l && (--l.refCount, l.refCount <= 0 && (l.instance.dispose(), instanceCache.delete(e), trackedElements.delete(e)));
+}
+function getReferenceCount(e) {
+	return instanceCache.get(e)?.refCount ?? 0;
+}
+function clearInstanceCache() {
+	for (let e of trackedElements) instanceCache.get(e)?.instance.dispose();
+	instanceCache = /* @__PURE__ */ new WeakMap(), trackedElements.clear();
+}
+var groupRegistry = /* @__PURE__ */ new Map();
+function addToGroup(e, l) {
+	let u = groupRegistry.get(l);
+	u || (u = /* @__PURE__ */ new Set(), groupRegistry.set(l, u)), u.add(e), u.size > 1 && echarts.connect(l);
+}
+function removeFromGroup(e, l) {
+	let u = groupRegistry.get(l);
+	u && (u.delete(e), u.size === 0 ? (groupRegistry.delete(l), echarts.disconnect(l)) : u.size === 1 ? echarts.disconnect(l) : echarts.connect(l));
+}
+function updateGroup(e, l, u) {
+	l && removeFromGroup(e, l), u && addToGroup(e, u);
+}
+function getGroupInstances(e) {
+	let l = groupRegistry.get(e);
+	return l ? Array.from(l) : [];
+}
+function getInstanceGroup(e) {
+	for (let [l, u] of groupRegistry.entries()) if (u.has(e)) return l;
+}
+function isInGroup(e) {
+	return getInstanceGroup(e) !== void 0;
+}
+function clearGroups() {
+	for (let e of groupRegistry.keys()) echarts.disconnect(e);
+	groupRegistry.clear();
+}
+var themeRegistry = new Map([
+	["light", {
+		color: [
+			"#5470c6",
+			"#91cc75",
+			"#fac858",
+			"#ee6666",
+			"#73c0de",
+			"#3ba272",
+			"#fc8452",
+			"#9a60b4",
+			"#ea7ccc"
+		],
+		backgroundColor: "rgba(0,0,0,0)",
+		textStyle: {},
+		title: { textStyle: { color: "#464646" } },
+		line: {
+			itemStyle: { borderWidth: 1 },
+			lineStyle: { width: 2 },
+			symbolSize: 4,
+			symbol: "emptyCircle",
+			smooth: !1
+		},
+		radar: {
+			itemStyle: { borderWidth: 1 },
+			lineStyle: { width: 2 },
+			symbolSize: 4,
+			symbol: "emptyCircle",
+			smooth: !1
+		},
+		bar: { itemStyle: {
+			barBorderWidth: 0,
+			barBorderColor: "#ccc"
+		} },
+		pie: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		scatter: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		boxplot: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		parallel: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		sankey: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		funnel: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		gauge: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		candlestick: { itemStyle: {
+			color: "#eb5454",
+			color0: "#47b262",
+			borderColor: "#eb5454",
+			borderColor0: "#47b262",
+			borderWidth: 1
+		} },
+		graph: {
+			itemStyle: {
+				borderWidth: 0,
+				borderColor: "#ccc"
+			},
+			lineStyle: {
+				width: 1,
+				color: "#aaa"
+			},
+			symbolSize: 4,
+			symbol: "emptyCircle",
+			smooth: !1,
+			color: [
+				"#5470c6",
+				"#91cc75",
+				"#fac858",
+				"#ee6666",
+				"#73c0de",
+				"#3ba272",
+				"#fc8452",
+				"#9a60b4",
+				"#ea7ccc"
+			],
+			label: { color: "#eee" }
+		},
+		map: {
+			itemStyle: {
+				areaColor: "#eee",
+				borderColor: "#444",
+				borderWidth: .5
+			},
+			label: { color: "#000" },
+			emphasis: {
+				itemStyle: {
+					areaColor: "rgba(255,215,0,0.8)",
+					borderColor: "#444",
+					borderWidth: 1
+				},
+				label: { color: "rgb(100,0,0)" }
+			}
+		},
+		geo: {
+			itemStyle: {
+				areaColor: "#eee",
+				borderColor: "#444",
+				borderWidth: .5
+			},
+			label: { color: "#000" },
+			emphasis: {
+				itemStyle: {
+					areaColor: "rgba(255,215,0,0.8)",
+					borderColor: "#444",
+					borderWidth: 1
+				},
+				label: { color: "rgb(100,0,0)" }
+			}
+		},
+		categoryAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !1,
+				lineStyle: { color: ["#ccc"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		valueAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#ccc"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		logAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#ccc"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		timeAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#ccc"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		toolbox: {
+			iconStyle: { borderColor: "#999" },
+			emphasis: { iconStyle: { borderColor: "#666" } }
+		},
+		legend: { textStyle: { color: "#333" } },
+		tooltip: { axisPointer: {
+			lineStyle: {
+				color: "#ccc",
+				width: 1
+			},
+			crossStyle: {
+				color: "#ccc",
+				width: 1
+			}
+		} },
+		timeline: {
+			lineStyle: {
+				color: "#293c55",
+				width: 1
+			},
+			itemStyle: {
+				color: "#293c55",
+				borderWidth: 1
+			},
+			controlStyle: {
+				color: "#293c55",
+				borderColor: "#293c55",
+				borderWidth: .5
+			},
+			checkpointStyle: {
+				color: "#e43c59",
+				borderColor: "#c23531"
+			},
+			label: { color: "#293c55" },
+			emphasis: {
+				itemStyle: { color: "#a9334c" },
+				controlStyle: {
+					color: "#293c55",
+					borderColor: "#293c55",
+					borderWidth: .5
+				},
+				label: { color: "#293c55" }
+			}
+		},
+		visualMap: { color: [
+			"#bf444c",
+			"#d88273",
+			"#f6efa6"
+		] },
+		dataZoom: {
+			backgroundColor: "rgba(47,69,84,0)",
+			dataBackgroundColor: "rgba(255,255,255,0.3)",
+			fillerColor: "rgba(167,183,204,0.4)",
+			handleColor: "#a7b7cc",
+			handleSize: "100%",
+			textStyle: { color: "#333" }
+		},
+		markPoint: {
+			label: { color: "#eee" },
+			emphasis: { label: { color: "#eee" } }
+		}
+	}],
+	["dark", {
+		color: [
+			"#4992ff",
+			"#7cffb2",
+			"#fddd60",
+			"#ff6e76",
+			"#58d9f9",
+			"#05c091",
+			"#ff8a45",
+			"#8d4eda",
+			"#dd79ff"
+		],
+		backgroundColor: "rgba(0,0,0,0)",
+		textStyle: {},
+		title: { textStyle: { color: "#cccccc" } },
+		line: {
+			itemStyle: { borderWidth: 1 },
+			lineStyle: { width: 2 },
+			symbolSize: 4,
+			symbol: "emptyCircle",
+			smooth: !1
+		},
+		radar: {
+			itemStyle: { borderWidth: 1 },
+			lineStyle: { width: 2 },
+			symbolSize: 4,
+			symbol: "emptyCircle",
+			smooth: !1
+		},
+		bar: { itemStyle: {
+			barBorderWidth: 0,
+			barBorderColor: "#cccccc"
+		} },
+		pie: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		scatter: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		boxplot: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		parallel: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		sankey: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		funnel: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		gauge: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#cccccc"
+		} },
+		candlestick: { itemStyle: {
+			color: "#eb5454",
+			color0: "#47b262",
+			borderColor: "#eb5454",
+			borderColor0: "#47b262",
+			borderWidth: 1
+		} },
+		graph: {
+			itemStyle: {
+				borderWidth: 0,
+				borderColor: "#cccccc"
+			},
+			lineStyle: {
+				width: 1,
+				color: "#aaaaaa"
+			},
+			symbolSize: 4,
+			symbol: "emptyCircle",
+			smooth: !1,
+			color: [
+				"#4992ff",
+				"#7cffb2",
+				"#fddd60",
+				"#ff6e76",
+				"#58d9f9",
+				"#05c091",
+				"#ff8a45",
+				"#8d4eda",
+				"#dd79ff"
+			],
+			label: { color: "#cccccc" }
+		},
+		map: {
+			itemStyle: {
+				areaColor: "#2a2a2a",
+				borderColor: "#444444",
+				borderWidth: .5
+			},
+			label: { color: "#cccccc" },
+			emphasis: {
+				itemStyle: {
+					areaColor: "rgba(255,215,0,0.8)",
+					borderColor: "#444444",
+					borderWidth: 1
+				},
+				label: { color: "rgb(100,0,0)" }
+			}
+		},
+		geo: {
+			itemStyle: {
+				areaColor: "#2a2a2a",
+				borderColor: "#444444",
+				borderWidth: .5
+			},
+			label: { color: "#cccccc" },
+			emphasis: {
+				itemStyle: {
+					areaColor: "rgba(255,215,0,0.8)",
+					borderColor: "#444444",
+					borderWidth: 1
+				},
+				label: { color: "rgb(100,0,0)" }
+			}
+		},
+		categoryAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#cccccc"
+			},
+			splitLine: {
+				show: !1,
+				lineStyle: { color: ["#444444"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(255,255,255,0.05)", "rgba(255,255,255,0.1)"] }
+			}
+		},
+		valueAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#cccccc"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#444444"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(255,255,255,0.05)", "rgba(255,255,255,0.1)"] }
+			}
+		},
+		logAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#cccccc"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#444444"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(255,255,255,0.05)", "rgba(255,255,255,0.1)"] }
+			}
+		},
+		timeAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#cccccc" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#cccccc"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#444444"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(255,255,255,0.05)", "rgba(255,255,255,0.1)"] }
+			}
+		},
+		toolbox: {
+			iconStyle: { borderColor: "#cccccc" },
+			emphasis: { iconStyle: { borderColor: "#ffffff" } }
+		},
+		legend: { textStyle: { color: "#cccccc" } },
+		tooltip: { axisPointer: {
+			lineStyle: {
+				color: "#cccccc",
+				width: 1
+			},
+			crossStyle: {
+				color: "#cccccc",
+				width: 1
+			}
+		} },
+		timeline: {
+			lineStyle: {
+				color: "#cccccc",
+				width: 1
+			},
+			itemStyle: {
+				color: "#cccccc",
+				borderWidth: 1
+			},
+			controlStyle: {
+				color: "#cccccc",
+				borderColor: "#cccccc",
+				borderWidth: .5
+			},
+			checkpointStyle: {
+				color: "#e43c59",
+				borderColor: "#c23531"
+			},
+			label: { color: "#cccccc" },
+			emphasis: {
+				itemStyle: { color: "#a9334c" },
+				controlStyle: {
+					color: "#cccccc",
+					borderColor: "#cccccc",
+					borderWidth: .5
+				},
+				label: { color: "#cccccc" }
+			}
+		},
+		visualMap: { color: [
+			"#ff6e76",
+			"#fddd60",
+			"#7cffb2"
+		] },
+		dataZoom: {
+			backgroundColor: "rgba(47,69,84,0)",
+			dataBackgroundColor: "rgba(255,255,255,0.3)",
+			fillerColor: "rgba(167,183,204,0.4)",
+			handleColor: "#a7b7cc",
+			handleSize: "100%",
+			textStyle: { color: "#cccccc" }
+		},
+		markPoint: {
+			label: { color: "#cccccc" },
+			emphasis: { label: { color: "#cccccc" } }
+		}
+	}],
+	["macarons", {
+		color: [
+			"#2ec7c9",
+			"#b6a2de",
+			"#5ab1ef",
+			"#ffb980",
+			"#d87a80",
+			"#8d98b3",
+			"#e5cf0d",
+			"#97b552",
+			"#95706d",
+			"#dc69aa",
+			"#07a2a4",
+			"#9a7fd1",
+			"#588dd5",
+			"#f5994e",
+			"#c05050",
+			"#59678c",
+			"#c9ab00",
+			"#7eb00a",
+			"#6f5553",
+			"#c14089"
+		],
+		backgroundColor: "rgba(0,0,0,0)",
+		textStyle: {},
+		title: { textStyle: { color: "#008acd" } },
+		line: {
+			itemStyle: { borderWidth: 1 },
+			lineStyle: { width: 2 },
+			symbolSize: 3,
+			symbol: "emptyCircle",
+			smooth: !0
+		},
+		radar: {
+			itemStyle: { borderWidth: 1 },
+			lineStyle: { width: 2 },
+			symbolSize: 3,
+			symbol: "emptyCircle",
+			smooth: !0
+		},
+		bar: { itemStyle: {
+			barBorderWidth: 0,
+			barBorderColor: "#ccc"
+		} },
+		pie: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		scatter: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		boxplot: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		parallel: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		sankey: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		funnel: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		gauge: { itemStyle: {
+			borderWidth: 0,
+			borderColor: "#ccc"
+		} },
+		candlestick: { itemStyle: {
+			color: "#d87a80",
+			color0: "#2ec7c9",
+			borderColor: "#d87a80",
+			borderColor0: "#2ec7c9",
+			borderWidth: 1
+		} },
+		graph: {
+			itemStyle: {
+				borderWidth: 0,
+				borderColor: "#ccc"
+			},
+			lineStyle: {
+				width: 1,
+				color: "#aaa"
+			},
+			symbolSize: 3,
+			symbol: "emptyCircle",
+			smooth: !0,
+			color: [
+				"#2ec7c9",
+				"#b6a2de",
+				"#5ab1ef",
+				"#ffb980",
+				"#d87a80",
+				"#8d98b3",
+				"#e5cf0d",
+				"#97b552",
+				"#95706d",
+				"#dc69aa",
+				"#07a2a4",
+				"#9a7fd1",
+				"#588dd5",
+				"#f5994e",
+				"#c05050",
+				"#59678c",
+				"#c9ab00",
+				"#7eb00a",
+				"#6f5553",
+				"#c14089"
+			],
+			label: { color: "#eee" }
+		},
+		map: {
+			itemStyle: {
+				areaColor: "#dddddd",
+				borderColor: "#eeeeee",
+				borderWidth: .5
+			},
+			label: { color: "#d87a80" },
+			emphasis: {
+				itemStyle: {
+					areaColor: "rgba(254,153,78,1)",
+					borderColor: "#444",
+					borderWidth: 1
+				},
+				label: { color: "rgb(100,0,0)" }
+			}
+		},
+		geo: {
+			itemStyle: {
+				areaColor: "#dddddd",
+				borderColor: "#eeeeee",
+				borderWidth: .5
+			},
+			label: { color: "#d87a80" },
+			emphasis: {
+				itemStyle: {
+					areaColor: "rgba(254,153,78,1)",
+					borderColor: "#444",
+					borderWidth: 1
+				},
+				label: { color: "rgb(100,0,0)" }
+			}
+		},
+		categoryAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#008acd" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !1,
+				lineStyle: { color: ["#eee"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		valueAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#008acd" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#eee"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		logAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#008acd" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#eee"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		timeAxis: {
+			axisLine: {
+				show: !0,
+				lineStyle: { color: "#008acd" }
+			},
+			axisTick: {
+				show: !0,
+				lineStyle: { color: "#333" }
+			},
+			axisLabel: {
+				show: !0,
+				color: "#333"
+			},
+			splitLine: {
+				show: !0,
+				lineStyle: { color: ["#eee"] }
+			},
+			splitArea: {
+				show: !1,
+				areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }
+			}
+		},
+		toolbox: {
+			iconStyle: { borderColor: "#2ec7c9" },
+			emphasis: { iconStyle: { borderColor: "#18a4a6" } }
+		},
+		legend: { textStyle: { color: "#333333" } },
+		tooltip: { axisPointer: {
+			lineStyle: {
+				color: "#008acd",
+				width: "1"
+			},
+			crossStyle: {
+				color: "#008acd",
+				width: "1"
+			}
+		} },
+		timeline: {
+			lineStyle: {
+				color: "#008acd",
+				width: 1
+			},
+			itemStyle: {
+				color: "#008acd",
+				borderWidth: 1
+			},
+			controlStyle: {
+				color: "#008acd",
+				borderColor: "#008acd",
+				borderWidth: .5
+			},
+			checkpointStyle: {
+				color: "#2ec7c9",
+				borderColor: "#2ec7c9"
+			},
+			label: { color: "#008acd" },
+			emphasis: {
+				itemStyle: { color: "#a9334c" },
+				controlStyle: {
+					color: "#008acd",
+					borderColor: "#008acd",
+					borderWidth: .5
+				},
+				label: { color: "#008acd" }
+			}
+		},
+		visualMap: { color: ["#5ab1ef", "#e0ffff"] },
+		dataZoom: {
+			backgroundColor: "rgba(47,69,84,0)",
+			dataBackgroundColor: "rgba(239,239,255,0.3)",
+			fillerColor: "rgba(182,162,222,0.2)",
+			handleColor: "#008acd",
+			handleSize: "100%",
+			textStyle: { color: "#333333" }
+		},
+		markPoint: {
+			label: { color: "#eeeeee" },
+			emphasis: { label: { color: "#eeeeee" } }
+		}
+	}]
+]), customThemeCache = /* @__PURE__ */ new WeakMap(), customThemeCounter = 0;
+function registerBuiltinThemes() {
+	for (let [e, l] of themeRegistry.entries()) echarts.registerTheme(e, l);
+}
+function getBuiltinTheme(e) {
+	return themeRegistry.get(e) || null;
+}
+function isBuiltinTheme(e) {
+	return themeRegistry.has(e);
+}
+function registerCustomTheme(e, l) {
+	echarts.registerTheme(e, l);
+}
+function getOrRegisterCustomTheme(e) {
+	let l = customThemeCache.get(e);
+	if (l) return l;
+	let u = `__custom_theme_${customThemeCounter++}`;
+	return echarts.registerTheme(u, e), customThemeCache.set(e, u), u;
+}
+function getAvailableThemes() {
+	return Array.from(themeRegistry.keys());
+}
+registerBuiltinThemes();
+function resolveThemeName(e) {
+	return e == null ? null : typeof e == "string" && isBuiltinTheme(e) ? e : typeof e == "object" ? getOrRegisterCustomTheme(e) : null;
+}
+function bindEvents(e, l) {
+	if (l) for (let [u, { handler: d, query: f, context: p }] of Object.entries(l)) f ? e.on(u, f, d, p) : e.on(u, d, p);
+}
+function unbindEvents(e, l) {
+	if (l) for (let [u, { handler: d }] of Object.entries(l)) e.off(u, d);
+}
+function useEcharts(d, p) {
+	let m = (0, import_compiler_runtime.c)(53), { option: h, theme: g, renderer: _, lazyInit: v, group: y, setOptionOpts: b, showLoading: x, loadingOption: S, onEvents: C } = p, w = _ === void 0 ? "canvas" : _, T = v === void 0 ? !1 : v, E = x === void 0 ? !1 : x, D = useRef(void 0), O = useRef(void 0), k = useRef(C), A, j;
+	m[0] === C ? (A = m[1], j = m[2]) : (A = () => {
+		k.current = C;
+	}, j = [C], m[0] = C, m[1] = A, m[2] = j), useEffect(A, j);
+	let M = useLazyInit(d, T), N;
+	m[3] === d ? N = m[4] : (N = () => {
+		if (d.current) return getCachedInstance(d.current);
+	}, m[3] = d, m[4] = N);
+	let P = N, F;
+	m[5] !== d || m[6] !== w || m[7] !== M || m[8] !== g ? (F = () => {
+		let e = d.current;
+		if (!e || !M) return;
+		let l = getCachedInstance(e);
+		if (!l) {
+			let u = resolveThemeName(g);
+			l = echarts.init(e, u, { renderer: w }), setCachedInstance(e, l), O.current = g;
+		}
+		return l;
+	}, m[5] = d, m[6] = w, m[7] = M, m[8] = g, m[9] = F) : F = m[9];
+	let I = F, L;
+	m[10] !== P || m[11] !== I || m[12] !== b ? (L = (e, l) => {
+		queueMicrotask(() => {
+			let u = P() || I();
+			if (u) {
+				let d = {
+					...b,
+					...l
+				};
+				u.setOption(e, d);
+			}
+		});
+	}, m[10] = P, m[11] = I, m[12] = b, m[13] = L) : L = m[13];
+	let R = L, z;
+	m[14] === P ? z = m[15] : (z = () => {
+		P()?.resize();
+	}, m[14] = P, m[15] = z);
+	let B = z, V, H;
+	m[16] !== I || m[17] !== S || m[18] !== h || m[19] !== d || m[20] !== b || m[21] !== M || m[22] !== E ? (H = () => {
+		if (!M) return;
+		let e = d.current;
+		if (!e) return;
+		let l = I();
+		if (l) return l.setOption(h, b), E && l.showLoading(S), bindEvents(l, k.current), () => {
+			let l = getCachedInstance(e);
+			if (!l) return;
+			let u = D.current;
+			u && updateGroup(l, u, void 0), unbindEvents(l, k.current), releaseCachedInstance(e);
+		};
+	}, V = [
+		M,
+		I,
+		h,
+		b,
+		E,
+		S,
+		d
+	], m[16] = I, m[17] = S, m[18] = h, m[19] = d, m[20] = b, m[21] = M, m[22] = E, m[23] = V, m[24] = H) : (V = m[23], H = m[24]), useLayoutEffect(H, V);
+	let U, W;
+	m[25] !== P || m[26] !== h || m[27] !== b ? (U = () => {
+		let e = P();
+		e && e.setOption(h, b);
+	}, W = [
+		P,
+		h,
+		b
+	], m[25] = P, m[26] = h, m[27] = b, m[28] = U, m[29] = W) : (U = m[28], W = m[29]), useEffect(U, W);
+	let G, K;
+	m[30] !== h || m[31] !== d || m[32] !== w || m[33] !== b || m[34] !== g ? (G = () => {
+		let e = d.current;
+		if (!e || !getCachedInstance(e) || O.current === g) return;
+		let l = resolveThemeName(g), u = echarts.init(e, l, { renderer: w });
+		replaceCachedInstance(e, u), O.current = g, u.setOption(h, b), bindEvents(u, k.current);
+	}, K = [
+		d,
+		g,
+		w,
+		h,
+		b
+	], m[30] = h, m[31] = d, m[32] = w, m[33] = b, m[34] = g, m[35] = G, m[36] = K) : (G = m[35], K = m[36]), useEffect(G, K);
+	let q, J;
+	m[37] !== P || m[38] !== S || m[39] !== E ? (q = () => {
+		let e = P();
+		e && (E ? e.showLoading(S) : e.hideLoading());
+	}, J = [
+		P,
+		E,
+		S
+	], m[37] = P, m[38] = S, m[39] = E, m[40] = q, m[41] = J) : (q = m[40], J = m[41]), useEffect(q, J);
+	let Y, X;
+	m[42] !== P || m[43] !== y ? (Y = () => {
+		let e = P();
+		e && (updateGroup(e, D.current, y), D.current = y);
+	}, X = [P, y], m[42] = P, m[43] = y, m[44] = Y, m[45] = X) : (Y = m[44], X = m[45]), useEffect(Y, X);
+	let Z, Q;
+	m[46] === d ? (Z = m[47], Q = m[48]) : (Z = () => {
+		let e = d.current;
+		if (!e) return;
+		let l;
+		try {
+			l = new ResizeObserver(() => {
+				getCachedInstance(e)?.resize();
+			}), l.observe(e);
+		} catch (e) {
+			let l = e;
+			console.warn("ResizeObserver not available:", l);
+		}
+		return () => {
+			l?.disconnect();
+		};
+	}, Q = [d], m[46] = d, m[47] = Z, m[48] = Q), useEffect(Z, Q);
+	let $;
+	return m[49] !== P || m[50] !== B || m[51] !== R ? ($ = {
+		setOption: R,
+		getInstance: P,
+		resize: B
+	}, m[49] = P, m[50] = B, m[51] = R, m[52] = $) : $ = m[52], $;
+}
+var use_echarts_default = useEcharts;
+export { addToGroup, clearGroups, clearInstanceCache, getAvailableThemes, getBuiltinTheme, getCachedInstance, getGroupInstances, getInstanceGroup, getReferenceCount, isBuiltinTheme, isInGroup, registerBuiltinThemes, registerCustomTheme, releaseCachedInstance, removeFromGroup, replaceCachedInstance, setCachedInstance, updateGroup, use_echarts_default as useEcharts, useLazyInit };