From 34e04a7b9877c136b98993f2f8e85c027107df4c Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Mon, 2 Jun 2025 21:33:25 +0800
Subject: [PATCH 01/27] feat: experimental component rendered tooltip

---
 demo/Demo.vue               |   2 +
 demo/examples/LineChart.vue | 106 ++++++++++++++++++++++++++++++++++++
 src/ECharts.ts              |  37 ++++++++++---
 3 files changed, 137 insertions(+), 8 deletions(-)
 create mode 100644 demo/examples/LineChart.vue

diff --git a/demo/Demo.vue b/demo/Demo.vue
index 9270f02..9e33e98 100644
--- a/demo/Demo.vue
+++ b/demo/Demo.vue
@@ -8,6 +8,7 @@ import { track } from "@vercel/analytics";
 
 import LogoChart from "./examples/LogoChart.vue";
 import BarChart from "./examples/BarChart.vue";
+import LineChart from "./examples/LineChart.vue";
 import PieChart from "./examples/PieChart.vue";
 import PolarChart from "./examples/PolarChart.vue";
 import ScatterChart from "./examples/ScatterChart.vue";
@@ -74,6 +75,7 @@ watch(codeOpen, (open) => {
     </p>
 
     <bar-chart />
+    <line-chart />
     <pie-chart />
     <polar-chart />
     <scatter-chart />
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
new file mode 100644
index 0000000..c60ba6d
--- /dev/null
+++ b/demo/examples/LineChart.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  DatasetComponent,
+  LegendComponent,
+  TooltipComponent,
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
+
+use([
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  TooltipComponent,
+]);
+
+const option = shallowRef({
+  legend: { top: 20 },
+  tooltip: {
+    trigger: "axis",
+    showContent: false,
+  },
+  dataset: {
+    source: [
+      ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
+      ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+      ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+      ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+      ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
+    ],
+  },
+  xAxis: { type: "category" },
+  yAxis: {},
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      seriesLayoutBy: "row",
+      emphasis: { focus: "series" },
+    },
+    {
+      type: "line",
+      smooth: true,
+      seriesLayoutBy: "row",
+      emphasis: { focus: "series" },
+    },
+    {
+      type: "line",
+      smooth: true,
+      seriesLayoutBy: "row",
+      emphasis: { focus: "series" },
+    },
+    {
+      type: "line",
+      smooth: true,
+      seriesLayoutBy: "row",
+      emphasis: { focus: "series" },
+    },
+  ],
+});
+</script>
+
+<template>
+  <v-example
+    id="line"
+    title="Line chart"
+    desc="(with component rendered tooltip)"
+  >
+    <v-chart :option="option" autoresize>
+      <template #tooltip="{ params, show }">
+        <div
+          v-if="show"
+          :style="{
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            transform: `translate3d(${params.x + 20}px, ${params.y + 20}px, 0px)`,
+            zIndex: 1000,
+            pointerEvents: 'none',
+            transition:
+              'opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)',
+          }"
+        >
+          <div
+            style="
+              background: rgba(255, 255, 255, 0.2);
+              padding: 10px;
+              border-radius: 4px;
+              border: 1px solid rgb(102, 102, 102);
+              will-change: transform;
+              backdrop-filter: blur(8px);
+              box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
+            "
+          >
+            {{ params }}
+          </div>
+        </div>
+      </template>
+    </v-chart>
+  </v-example>
+</template>
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 66e2646..b87ac6e 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -24,7 +24,7 @@ import {
 import { isOn, omitOn, toValue } from "./utils";
 import { register, TAG_NAME } from "./wc";
 
-import type { PropType, InjectionKey } from "vue";
+import type { PropType, InjectionKey, SlotsType } from "vue";
 import type {
   EChartsType,
   SetOptionType,
@@ -65,7 +65,10 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   inheritAttrs: false,
-  setup(props, { attrs, expose }) {
+  slots: Object as SlotsType<{
+    tooltip: { params: any; show: boolean };
+  }>,
+  setup(props, { attrs, expose, slots }) {
     const root = shallowRef<EChartsElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
@@ -93,6 +96,9 @@ export default defineComponent({
     const listeners: Map<{ event: string; once?: boolean; zr?: boolean }, any> =
       new Map();
 
+    const tooltipShow = shallowRef(false);
+    const tooltipParams = shallowRef<any>(null);
+
     // We are converting all `on<Event>` props and collect them into `listeners` so that
     // we can bind them to the chart instance later.
     // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
@@ -178,6 +184,14 @@ export default defineComponent({
         }
       }
 
+      instance.on("showTip", (params) => {
+        tooltipShow.value = true;
+        tooltipParams.value = params;
+      });
+      instance.on("hideTip", () => {
+        tooltipShow.value = false;
+      });
+
       if (autoresize.value) {
         // Try to make chart fit to container in case container size
         // is changed synchronously or in already queued microtasks
@@ -302,11 +316,18 @@ export default defineComponent({
     // This type casting ensures TypeScript correctly types the exposed members
     // that will be available when using this component.
     return (() =>
-      h(TAG_NAME, {
-        ...nonEventAttrs.value,
-        ...nativeListeners,
-        ref: root,
-        class: ["echarts", ...(nonEventAttrs.value.class || [])],
-      })) as unknown as typeof exposed & PublicMethods;
+      h(
+        TAG_NAME,
+        {
+          ...nonEventAttrs.value,
+          ...nativeListeners,
+          ref: root,
+          class: ["echarts", ...(nonEventAttrs.value.class || [])],
+        },
+        slots.tooltip?.({
+          params: tooltipParams.value,
+          show: tooltipShow.value,
+        }),
+      )) as unknown as typeof exposed & PublicMethods;
   },
 });

From 79a1d7d299a4bfe82bac763bb453ea3bb041d9d0 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sat, 7 Jun 2025 16:59:28 +0800
Subject: [PATCH 02/27] revert slot in VChart

---
 demo/examples/LineChart.vue | 32 +-------------------------------
 src/ECharts.ts              | 37 ++++++++-----------------------------
 2 files changed, 9 insertions(+), 60 deletions(-)

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index c60ba6d..b43c2e3 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -71,36 +71,6 @@ const option = shallowRef({
     title="Line chart"
     desc="(with component rendered tooltip)"
   >
-    <v-chart :option="option" autoresize>
-      <template #tooltip="{ params, show }">
-        <div
-          v-if="show"
-          :style="{
-            position: 'absolute',
-            top: '0px',
-            left: '0px',
-            transform: `translate3d(${params.x + 20}px, ${params.y + 20}px, 0px)`,
-            zIndex: 1000,
-            pointerEvents: 'none',
-            transition:
-              'opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)',
-          }"
-        >
-          <div
-            style="
-              background: rgba(255, 255, 255, 0.2);
-              padding: 10px;
-              border-radius: 4px;
-              border: 1px solid rgb(102, 102, 102);
-              will-change: transform;
-              backdrop-filter: blur(8px);
-              box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
-            "
-          >
-            {{ params }}
-          </div>
-        </div>
-      </template>
-    </v-chart>
+    <v-chart :option="option" autoresize />
   </v-example>
 </template>
diff --git a/src/ECharts.ts b/src/ECharts.ts
index b87ac6e..66e2646 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -24,7 +24,7 @@ import {
 import { isOn, omitOn, toValue } from "./utils";
 import { register, TAG_NAME } from "./wc";
 
-import type { PropType, InjectionKey, SlotsType } from "vue";
+import type { PropType, InjectionKey } from "vue";
 import type {
   EChartsType,
   SetOptionType,
@@ -65,10 +65,7 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   inheritAttrs: false,
-  slots: Object as SlotsType<{
-    tooltip: { params: any; show: boolean };
-  }>,
-  setup(props, { attrs, expose, slots }) {
+  setup(props, { attrs, expose }) {
     const root = shallowRef<EChartsElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
@@ -96,9 +93,6 @@ export default defineComponent({
     const listeners: Map<{ event: string; once?: boolean; zr?: boolean }, any> =
       new Map();
 
-    const tooltipShow = shallowRef(false);
-    const tooltipParams = shallowRef<any>(null);
-
     // We are converting all `on<Event>` props and collect them into `listeners` so that
     // we can bind them to the chart instance later.
     // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
@@ -184,14 +178,6 @@ export default defineComponent({
         }
       }
 
-      instance.on("showTip", (params) => {
-        tooltipShow.value = true;
-        tooltipParams.value = params;
-      });
-      instance.on("hideTip", () => {
-        tooltipShow.value = false;
-      });
-
       if (autoresize.value) {
         // Try to make chart fit to container in case container size
         // is changed synchronously or in already queued microtasks
@@ -316,18 +302,11 @@ export default defineComponent({
     // This type casting ensures TypeScript correctly types the exposed members
     // that will be available when using this component.
     return (() =>
-      h(
-        TAG_NAME,
-        {
-          ...nonEventAttrs.value,
-          ...nativeListeners,
-          ref: root,
-          class: ["echarts", ...(nonEventAttrs.value.class || [])],
-        },
-        slots.tooltip?.({
-          params: tooltipParams.value,
-          show: tooltipShow.value,
-        }),
-      )) as unknown as typeof exposed & PublicMethods;
+      h(TAG_NAME, {
+        ...nonEventAttrs.value,
+        ...nativeListeners,
+        ref: root,
+        class: ["echarts", ...(nonEventAttrs.value.class || [])],
+      })) as unknown as typeof exposed & PublicMethods;
   },
 });

From 42c3569d8a9365b794aa3ec1739e4692cc2ffe55 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sat, 7 Jun 2025 17:49:36 +0800
Subject: [PATCH 03/27] feat: use tooltip composable

---
 demo/examples/LineChart.vue | 34 ++++++++++++++++++++++++++++--
 src/composables/tooltip.ts  | 41 +++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/composables/tooltip.ts

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index b43c2e3..4fdd294 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { LineChart } from "echarts/charts";
 import {
@@ -9,6 +9,7 @@ import {
 } from "echarts/components";
 import { shallowRef } from "vue";
 import VChart from "../../src/ECharts";
+import { createTooltipTemplate } from "../../src/composables/tooltip";
 import VExample from "./Example.vue";
 
 use([
@@ -19,11 +20,19 @@ use([
   TooltipComponent,
 ]);
 
+type MyParams = {
+  seriesName: string;
+  seriesIndex: number;
+  data: number[];
+  marker: string;
+}[];
+const { define: DefineTooltip, formatter } = createTooltipTemplate<MyParams>();
+
 const option = shallowRef({
   legend: { top: 20 },
   tooltip: {
     trigger: "axis",
-    showContent: false,
+    formatter,
   },
   dataset: {
     source: [
@@ -72,5 +81,26 @@ const option = shallowRef({
     desc="(with component rendered tooltip)"
   >
     <v-chart :option="option" autoresize />
+    <!-- TODO: use a Pie Chart as tooltip -->
+    <define-tooltip v-slot="params">
+      <b>Custom Tooltip</b>
+      <table>
+        <thead>
+          <tr>
+            <th>Product</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in params" :key="i">
+            <td>
+              <span v-html="item.marker" />
+              {{ item.seriesName }}
+            </td>
+            <td>{{ item.data[i + 1] }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </define-tooltip>
   </v-example>
 </template>
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
new file mode 100644
index 0000000..e3a9e4e
--- /dev/null
+++ b/src/composables/tooltip.ts
@@ -0,0 +1,41 @@
+import {
+  h,
+  render,
+  defineComponent,
+  Slot,
+  Fragment,
+  type DefineComponent,
+} from "vue";
+
+export function createTooltipTemplate<Params extends object>() {
+  let slot: Slot | undefined;
+
+  const define = defineComponent({
+    setup(_, { slots }) {
+      return () => {
+        slot = slots.default;
+      };
+    },
+  }) as DefineComponent & {
+    new (): { $slots: { default(_: Params): any } };
+  };
+
+  const formatter = (params: Params): HTMLElement[] => {
+    if (!slot) {
+      throw new Error(
+        `[vue-echarts] Failed to find the definition of tooltip template`,
+      );
+    }
+
+    const container = document.createElement("div");
+
+    const vnode = h(Fragment, null, slot(params));
+    // console.log(params);
+
+    render(vnode, container);
+
+    return Array.from(container.children) as HTMLElement[];
+  };
+
+  return { define, formatter };
+}

From 978317eef9c50a3b84d734455ea14bbae09f786d Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sat, 7 Jun 2025 21:16:57 +0800
Subject: [PATCH 04/27] feat: try createApp

---
 src/composables/tooltip.ts | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index e3a9e4e..63eaac1 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -1,14 +1,17 @@
 import {
-  h,
-  render,
   defineComponent,
   Slot,
-  Fragment,
+  shallowRef,
+  createApp,
+  onUnmounted,
+  type App,
   type DefineComponent,
 } from "vue";
 
 export function createTooltipTemplate<Params extends object>() {
   let slot: Slot | undefined;
+  let app: App<Element> | undefined;
+  const props = shallowRef<Params>();
 
   const define = defineComponent({
     setup(_, { slots }) {
@@ -20,22 +23,33 @@ export function createTooltipTemplate<Params extends object>() {
     new (): { $slots: { default(_: Params): any } };
   };
 
-  const formatter = (params: Params): HTMLElement[] => {
+  const formatter = (params: Params) => {
+    props.value = params;
+
     if (!slot) {
       throw new Error(
         `[vue-echarts] Failed to find the definition of tooltip template`,
       );
     }
 
-    const container = document.createElement("div");
-
-    const vnode = h(Fragment, null, slot(params));
-    // console.log(params);
-
-    render(vnode, container);
+    if (!app) {
+      app = createApp({
+        // root component is just a render function
+        render() {
+          // call the slot function with your props
+          // return slot!(props);
+          return slot!(props.value);
+        },
+      });
+      app.mount(document.createElement("div"));
+    }
 
-    return Array.from(container.children) as HTMLElement[];
+    return app._container!.innerHTML;
   };
 
+  onUnmounted(() => {
+    app?.unmount();
+  });
+
   return { define, formatter };
 }

From 89743cf67389799fea48b7f906acfa1274098955 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sun, 8 Jun 2025 22:26:10 +0800
Subject: [PATCH 05/27] feat: use pie chart as tooltip

---
 demo/examples/Example.vue   |  2 +-
 demo/examples/LineChart.vue | 65 ++++++++++++++++++++-----------------
 package.json                |  2 +-
 src/composables/tooltip.ts  |  5 +--
 4 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/demo/examples/Example.vue b/demo/examples/Example.vue
index 88fa11e..3e36779 100644
--- a/demo/examples/Example.vue
+++ b/demo/examples/Example.vue
@@ -43,7 +43,7 @@ defineProps({
   width: fit-content;
   margin: 2em auto;
 
-  .echarts {
+  > .echarts {
     width: calc(60vw + 4em);
     height: 360px;
     max-width: 720px;
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 4fdd294..9febc2b 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -1,6 +1,6 @@
-<script setup lang="ts">
+<script setup>
 import { use } from "echarts/core";
-import { LineChart } from "echarts/charts";
+import { LineChart, PieChart } from "echarts/charts";
 import {
   GridComponent,
   DatasetComponent,
@@ -18,21 +18,22 @@ use([
   LegendComponent,
   LineChart,
   TooltipComponent,
+  PieChart,
 ]);
 
-type MyParams = {
-  seriesName: string;
-  seriesIndex: number;
-  data: number[];
-  marker: string;
-}[];
-const { define: DefineTooltip, formatter } = createTooltipTemplate<MyParams>();
+const { define: DefineTooltip, formatter } = createTooltipTemplate();
 
 const option = shallowRef({
   legend: { top: 20 },
   tooltip: {
     trigger: "axis",
-    formatter,
+    formatter: (params) => {
+      const source = [params[0].dimensionNames, params[0].data];
+      const dataset = { source };
+      const option = { ...pieOption, dataset };
+      option.series[0].label.formatter = params[0].name;
+      return formatter(option);
+    },
   },
   dataset: {
     source: [
@@ -72,6 +73,23 @@ const option = shallowRef({
     },
   ],
 });
+
+const pieOption = {
+  animation: false,
+  series: [
+    {
+      type: "pie",
+      radius: ["60%", "100%"],
+      seriesLayoutBy: "row",
+      itemStyle: {
+        borderRadius: 5,
+        borderColor: "#fff",
+        borderWidth: 2,
+      },
+      label: { position: "center" },
+    },
+  ],
+};
 </script>
 
 <template>
@@ -81,26 +99,13 @@ const option = shallowRef({
     desc="(with component rendered tooltip)"
   >
     <v-chart :option="option" autoresize />
-    <!-- TODO: use a Pie Chart as tooltip -->
-    <define-tooltip v-slot="params">
-      <b>Custom Tooltip</b>
-      <table>
-        <thead>
-          <tr>
-            <th>Product</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in params" :key="i">
-            <td>
-              <span v-html="item.marker" />
-              {{ item.seriesName }}
-            </td>
-            <td>{{ item.data[i + 1] }}</td>
-          </tr>
-        </tbody>
-      </table>
+    <define-tooltip v-slot="opt">
+      <v-chart
+        :style="{ width: '100px', height: '100px' }"
+        :option="opt"
+        :update-options="{ notMerge: false }"
+        autoresize
+      />
     </define-tooltip>
   </v-example>
 </template>
diff --git a/package.json b/package.json
index e11bc79..69142bd 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "docs": "node ./scripts/docs.mjs",
     "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
-  "packageManager": "pnpm@10.11.0",
+  "packageManager": "pnpm@10.11.1",
   "type": "module",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 63eaac1..bc3a804 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -34,17 +34,14 @@ export function createTooltipTemplate<Params extends object>() {
 
     if (!app) {
       app = createApp({
-        // root component is just a render function
         render() {
-          // call the slot function with your props
-          // return slot!(props);
           return slot!(props.value);
         },
       });
       app.mount(document.createElement("div"));
     }
 
-    return app._container!.innerHTML;
+    return app._container!;
   };
 
   onUnmounted(() => {

From 585279ef50bd3efb74132a348e62ccab72acd04c Mon Sep 17 00:00:00 2001
From: Yue JIN <yjin@nustarnuclear.com>
Date: Mon, 9 Jun 2025 15:06:48 +0800
Subject: [PATCH 06/27] feat: switch to createVNode

The limitation is that the tooltip detached from the current component tree, not provide/inject

will try teleport next
---
 demo/examples/LineChart.vue |  1 -
 src/composables/tooltip.ts  | 36 ++++++++++++++++++++++++++----------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 9febc2b..74c388f 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -75,7 +75,6 @@ const option = shallowRef({
 });
 
 const pieOption = {
-  animation: false,
   series: [
     {
       type: "pie",
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index bc3a804..3e438bd 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -2,16 +2,25 @@ import {
   defineComponent,
   Slot,
   shallowRef,
-  createApp,
+  createVNode,
+  render,
   onUnmounted,
-  type App,
+  getCurrentInstance,
   type DefineComponent,
 } from "vue";
 
 export function createTooltipTemplate<Params extends object>() {
   let slot: Slot | undefined;
-  let app: App<Element> | undefined;
+  let container: HTMLElement | undefined;
   const props = shallowRef<Params>();
+  const internal = getCurrentInstance();
+
+  if (!internal) {
+    throw new Error(
+      `[vue-echarts] createTooltipTemplate must be used in a setup function`,
+    );
+  }
+  const { appContext } = internal;
 
   const define = defineComponent({
     setup(_, { slots }) {
@@ -32,20 +41,27 @@ export function createTooltipTemplate<Params extends object>() {
       );
     }
 
-    if (!app) {
-      app = createApp({
-        render() {
-          return slot!(props.value);
+    if (!container) {
+      const component = defineComponent({
+        setup() {
+          return () => slot!(props.value);
         },
       });
-      app.mount(document.createElement("div"));
+      const vnode = createVNode(component);
+      vnode.appContext = appContext;
+
+      container = document.createElement("div");
+      render(vnode, container);
     }
 
-    return app._container!;
+    return container;
   };
 
   onUnmounted(() => {
-    app?.unmount();
+    if (container) {
+      render(null, container);
+      container.remove();
+    }
   });
 
   return { define, formatter };

From c6bab0d892c9a339e491ff70482946d884a852d7 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Mon, 9 Jun 2025 23:00:31 +0800
Subject: [PATCH 07/27] feat: try component with teleport

---
 demo/examples/LineChart.vue | 14 ++++----
 package.json                |  2 +-
 src/ECharts.ts              |  1 +
 src/EChartsTooltip.ts       | 30 ++++++++++++++++
 src/composables/tooltip.ts  | 68 -------------------------------------
 5 files changed, 38 insertions(+), 77 deletions(-)
 create mode 100644 src/EChartsTooltip.ts
 delete mode 100644 src/composables/tooltip.ts

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 74c388f..4738daf 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -7,9 +7,8 @@ import {
   LegendComponent,
   TooltipComponent,
 } from "echarts/components";
-import { shallowRef } from "vue";
-import VChart from "../../src/ECharts";
-import { createTooltipTemplate } from "../../src/composables/tooltip";
+import { useTemplateRef, shallowRef } from "vue";
+import VChart, { EChartsTooltip as VChartTooltip } from "../../src/ECharts";
 import VExample from "./Example.vue";
 
 use([
@@ -21,7 +20,7 @@ use([
   PieChart,
 ]);
 
-const { define: DefineTooltip, formatter } = createTooltipTemplate();
+const tooltipRef = useTemplateRef("tooltipRef");
 
 const option = shallowRef({
   legend: { top: 20 },
@@ -32,7 +31,7 @@ const option = shallowRef({
       const dataset = { source };
       const option = { ...pieOption, dataset };
       option.series[0].label.formatter = params[0].name;
-      return formatter(option);
+      return tooltipRef.value?.formatter(option);
     },
   },
   dataset: {
@@ -98,13 +97,12 @@ const pieOption = {
     desc="(with component rendered tooltip)"
   >
     <v-chart :option="option" autoresize />
-    <define-tooltip v-slot="opt">
+    <v-chart-tooltip ref="tooltipRef" v-slot="opt">
       <v-chart
         :style="{ width: '100px', height: '100px' }"
         :option="opt"
-        :update-options="{ notMerge: false }"
         autoresize
       />
-    </define-tooltip>
+    </v-chart-tooltip>
   </v-example>
 </template>
diff --git a/package.json b/package.json
index 69142bd..d3c2944 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "docs": "node ./scripts/docs.mjs",
     "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
-  "packageManager": "pnpm@10.11.1",
+  "packageManager": "pnpm@10.12.1",
   "type": "module",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 66e2646..97b0ecc 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -48,6 +48,7 @@ export const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection> = Symbol();
 export const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection> =
   Symbol();
 export { LOADING_OPTIONS_KEY } from "./composables";
+export { default as EChartsTooltip } from "./EChartsTooltip";
 
 export default defineComponent({
   name: "echarts",
diff --git a/src/EChartsTooltip.ts b/src/EChartsTooltip.ts
new file mode 100644
index 0000000..932e3ce
--- /dev/null
+++ b/src/EChartsTooltip.ts
@@ -0,0 +1,30 @@
+import { defineComponent, shallowRef, onBeforeUnmount, h, Teleport } from "vue";
+
+export default defineComponent({
+  name: "VChartTooltip",
+  methods: {} as { formatter: (params: any) => HTMLDivElement | undefined },
+  setup(_, { slots, expose }) {
+    const container = document?.createElement("div");
+    const initialized = shallowRef(false);
+    const state = shallowRef<any>();
+
+    function formatter(params: any) {
+      initialized.value = true;
+      state.value = params;
+      return container;
+    }
+
+    onBeforeUnmount(() => {
+      container?.remove();
+    });
+
+    expose({ formatter });
+
+    return () => {
+      const slotContent = initialized.value
+        ? slots.default?.(state.value)
+        : undefined;
+      return h(Teleport as any, { to: container }, slotContent);
+    };
+  },
+});
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
deleted file mode 100644
index 3e438bd..0000000
--- a/src/composables/tooltip.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import {
-  defineComponent,
-  Slot,
-  shallowRef,
-  createVNode,
-  render,
-  onUnmounted,
-  getCurrentInstance,
-  type DefineComponent,
-} from "vue";
-
-export function createTooltipTemplate<Params extends object>() {
-  let slot: Slot | undefined;
-  let container: HTMLElement | undefined;
-  const props = shallowRef<Params>();
-  const internal = getCurrentInstance();
-
-  if (!internal) {
-    throw new Error(
-      `[vue-echarts] createTooltipTemplate must be used in a setup function`,
-    );
-  }
-  const { appContext } = internal;
-
-  const define = defineComponent({
-    setup(_, { slots }) {
-      return () => {
-        slot = slots.default;
-      };
-    },
-  }) as DefineComponent & {
-    new (): { $slots: { default(_: Params): any } };
-  };
-
-  const formatter = (params: Params) => {
-    props.value = params;
-
-    if (!slot) {
-      throw new Error(
-        `[vue-echarts] Failed to find the definition of tooltip template`,
-      );
-    }
-
-    if (!container) {
-      const component = defineComponent({
-        setup() {
-          return () => slot!(props.value);
-        },
-      });
-      const vnode = createVNode(component);
-      vnode.appContext = appContext;
-
-      container = document.createElement("div");
-      render(vnode, container);
-    }
-
-    return container;
-  };
-
-  onUnmounted(() => {
-    if (container) {
-      render(null, container);
-      container.remove();
-    }
-  });
-
-  return { define, formatter };
-}

From 2072c3b1841ebf46d6b70e1f9b014ea0b955b775 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sat, 21 Jun 2025 23:25:32 +0800
Subject: [PATCH 08/27] wip

---
 demo/data/line.js           |  49 +++++++++++++++++
 demo/examples/LineChart.vue | 107 +++++++++++-------------------------
 src/ECharts.ts              |  25 ++++++---
 src/EChartsTooltip.ts       |  30 ----------
 src/composables/tooltip.ts  |  71 ++++++++++++++++++++++++
 src/utils.ts                |   6 ++
 6 files changed, 174 insertions(+), 114 deletions(-)
 create mode 100644 demo/data/line.js
 delete mode 100644 src/EChartsTooltip.ts
 create mode 100644 src/composables/tooltip.ts

diff --git a/demo/data/line.js b/demo/data/line.js
new file mode 100644
index 0000000..631dec4
--- /dev/null
+++ b/demo/data/line.js
@@ -0,0 +1,49 @@
+export default function getData() {
+  return {
+    legend: { top: 20 },
+    tooltip: {
+      trigger: "axis",
+    },
+    dataset: {
+      source: [
+        ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
+        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
+      ],
+    },
+    xAxis: {
+      type: "category",
+      triggerEvent: true,
+      tooltip: { show: true },
+    },
+    yAxis: {},
+    series: [
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+    ],
+  };
+}
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 4738daf..acf7242 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -7,9 +7,10 @@ import {
   LegendComponent,
   TooltipComponent,
 } from "echarts/components";
-import { useTemplateRef, shallowRef } from "vue";
-import VChart, { EChartsTooltip as VChartTooltip } from "../../src/ECharts";
+import { shallowRef } from "vue";
+import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
+import getData from "../data/line";
 
 use([
   DatasetComponent,
@@ -20,74 +21,27 @@ use([
   PieChart,
 ]);
 
-const tooltipRef = useTemplateRef("tooltipRef");
+const option = shallowRef(getData());
 
-const option = shallowRef({
-  legend: { top: 20 },
-  tooltip: {
-    trigger: "axis",
-    formatter: (params) => {
-      const source = [params[0].dimensionNames, params[0].data];
-      const dataset = { source };
-      const option = { ...pieOption, dataset };
-      option.series[0].label.formatter = params[0].name;
-      return tooltipRef.value?.formatter(option);
-    },
-  },
-  dataset: {
-    source: [
-      ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
-      ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
-      ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
-      ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
-      ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
-    ],
-  },
-  xAxis: { type: "category" },
-  yAxis: {},
-  series: [
-    {
-      type: "line",
-      smooth: true,
-      seriesLayoutBy: "row",
-      emphasis: { focus: "series" },
-    },
-    {
-      type: "line",
-      smooth: true,
-      seriesLayoutBy: "row",
-      emphasis: { focus: "series" },
-    },
-    {
-      type: "line",
-      smooth: true,
-      seriesLayoutBy: "row",
-      emphasis: { focus: "series" },
-    },
-    {
-      type: "line",
-      smooth: true,
-      seriesLayoutBy: "row",
-      emphasis: { focus: "series" },
-    },
-  ],
-});
-
-const pieOption = {
-  series: [
-    {
-      type: "pie",
-      radius: ["60%", "100%"],
-      seriesLayoutBy: "row",
-      itemStyle: {
-        borderRadius: 5,
-        borderColor: "#fff",
-        borderWidth: 2,
+function getPieOption(params) {
+  const option = {
+    dataset: { source: [params[0].dimensionNames, params[0].data] },
+    series: [
+      {
+        type: "pie",
+        radius: ["60%", "100%"],
+        seriesLayoutBy: "row",
+        itemStyle: {
+          borderRadius: 5,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: { position: "center", formatter: params[0].name },
       },
-      label: { position: "center" },
-    },
-  ],
-};
+    ],
+  };
+  return option;
+}
 </script>
 
 <template>
@@ -96,13 +50,14 @@ const pieOption = {
     title="Line chart"
     desc="(with component rendered tooltip)"
   >
-    <v-chart :option="option" autoresize />
-    <v-chart-tooltip ref="tooltipRef" v-slot="opt">
-      <v-chart
-        :style="{ width: '100px', height: '100px' }"
-        :option="opt"
-        autoresize
-      />
-    </v-chart-tooltip>
+    <v-chart :option="option" autoresize>
+      <template #tooltip="{ params }">
+        <v-chart
+          :style="{ width: '100px', height: '100px' }"
+          :option="getPieOption(params)"
+          autoresize
+        />
+      </template>
+    </v-chart>
   </v-example>
 </template>
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 97b0ecc..cb79ef6 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -40,6 +40,7 @@ import type {
 import type { EChartsElement } from "./wc";
 
 import "./style.css";
+import { useTooltip } from "./composables/tooltip";
 
 const wcRegistered = register();
 
@@ -48,7 +49,6 @@ export const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection> = Symbol();
 export const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection> =
   Symbol();
 export { LOADING_OPTIONS_KEY } from "./composables";
-export { default as EChartsTooltip } from "./EChartsTooltip";
 
 export default defineComponent({
   name: "echarts",
@@ -66,7 +66,7 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   inheritAttrs: false,
-  setup(props, { attrs, expose }) {
+  setup(props, { attrs, expose, slots }) {
     const root = shallowRef<EChartsElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
@@ -175,6 +175,7 @@ export default defineComponent({
       function commit() {
         const opt = option || realOption.value;
         if (opt) {
+          mutateOption(opt);
           instance.setOption(opt, realUpdateOptions.value);
         }
       }
@@ -205,6 +206,7 @@ export default defineComponent({
       if (!chart.value) {
         init(option);
       } else {
+        mutateOption(option);
         chart.value.setOption(option, updateOptions || {});
       }
     };
@@ -235,6 +237,7 @@ export default defineComponent({
               if (!chart.value) {
                 init();
               } else {
+                mutateOption(option);
                 chart.value.setOption(option, {
                   // mutating `option` will lead to `notMerge: false` and
                   // replacing it with new reference will lead to `notMerge: true`
@@ -275,6 +278,8 @@ export default defineComponent({
 
     useAutoresize(chart, autoresize, root);
 
+    const { teleportedSlots, mutateOption } = useTooltip(slots);
+
     onMounted(() => {
       init();
     });
@@ -303,11 +308,15 @@ export default defineComponent({
     // This type casting ensures TypeScript correctly types the exposed members
     // that will be available when using this component.
     return (() =>
-      h(TAG_NAME, {
-        ...nonEventAttrs.value,
-        ...nativeListeners,
-        ref: root,
-        class: ["echarts", ...(nonEventAttrs.value.class || [])],
-      })) as unknown as typeof exposed & PublicMethods;
+      h(
+        TAG_NAME,
+        {
+          ...nonEventAttrs.value,
+          ...nativeListeners,
+          ref: root,
+          class: ["echarts", nonEventAttrs.value.class],
+        },
+        teleportedSlots(),
+      )) as unknown as typeof exposed & PublicMethods;
   },
 });
diff --git a/src/EChartsTooltip.ts b/src/EChartsTooltip.ts
deleted file mode 100644
index 932e3ce..0000000
--- a/src/EChartsTooltip.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { defineComponent, shallowRef, onBeforeUnmount, h, Teleport } from "vue";
-
-export default defineComponent({
-  name: "VChartTooltip",
-  methods: {} as { formatter: (params: any) => HTMLDivElement | undefined },
-  setup(_, { slots, expose }) {
-    const container = document?.createElement("div");
-    const initialized = shallowRef(false);
-    const state = shallowRef<any>();
-
-    function formatter(params: any) {
-      initialized.value = true;
-      state.value = params;
-      return container;
-    }
-
-    onBeforeUnmount(() => {
-      container?.remove();
-    });
-
-    expose({ formatter });
-
-    return () => {
-      const slotContent = initialized.value
-        ? slots.default?.(state.value)
-        : undefined;
-      return h(Teleport as any, { to: container }, slotContent);
-    };
-  },
-});
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
new file mode 100644
index 0000000..1540c07
--- /dev/null
+++ b/src/composables/tooltip.ts
@@ -0,0 +1,71 @@
+import {
+  type ShallowRef,
+  Slots,
+  Teleport,
+  h,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { parseProperties } from "../utils";
+import { Option } from "src/types";
+
+export function useTooltip(slots: Slots) {
+  const tooltipSlots = Object.fromEntries(
+    Object.entries(slots).filter(
+      ([key]) => key === "tooltip" || key.startsWith("tooltip:"),
+    ),
+  );
+  const initialized: Record<string, ShallowRef<boolean>> = {};
+  const params: Record<string, ShallowRef<any>> = {};
+  const containers: Record<string, HTMLElement> = {};
+  const properties: Record<string, string[]> = {};
+
+  Object.keys(tooltipSlots).forEach((key) => {
+    initialized[key] = shallowRef(false);
+    params[key] = shallowRef(null);
+    properties[key] =
+      key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", ""));
+    containers[key] = document?.createElement("div");
+  });
+
+  const teleportedSlots = () =>
+    Object.keys(tooltipSlots).map((key) => {
+      const slot = tooltipSlots[key];
+      const slotContent = initialized[key].value
+        ? slot?.({ params: params[key].value })
+        : undefined;
+      return h(Teleport as any, { to: containers[key] }, slotContent);
+    });
+
+  function mutateOption(option: Option) {
+    Object.keys(tooltipSlots).forEach((key) => {
+      let current: any = option;
+      if (key !== "tooltip") {
+        for (const prop of properties[key]) {
+          current = current[prop];
+          if (current == null) {
+            console.warn(`[vue-echarts] "option.${key}" is not defined`);
+            return;
+          }
+        }
+      }
+      current.tooltip ??= {};
+      current.tooltip.formatter = (p: any) => {
+        initialized[key].value = true;
+        params[key].value = p;
+        return containers[key];
+      };
+    });
+  }
+
+  onBeforeUnmount(() => {
+    Object.values(containers).forEach((container) => {
+      container?.remove();
+    });
+  });
+
+  return {
+    teleportedSlots,
+    mutateOption,
+  };
+}
diff --git a/src/utils.ts b/src/utils.ts
index 6dec3f5..bdb01cb 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -29,3 +29,9 @@ const isFunction = (val: unknown): val is Function => typeof val === "function";
 export function toValue<T>(source: MaybeRefOrGetter<T>): T {
   return isFunction(source) ? source() : unref(source);
 }
+
+export function parseProperties(path: string) {
+  // Convert bracket notation to dot notation and split the path
+  // "[2].series[0].data" -> ["2", "series", "0", "data"]
+  return path.replace(/\[(\w+)\]/g, ".$1").split(".");
+}

From 177e875a7d39c11094c77aff56a2d3abf09887da Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sun, 22 Jun 2025 12:09:37 +0800
Subject: [PATCH 09/27] add xAxis example

---
 demo/examples/LineChart.vue |  3 +++
 package.json                |  2 +-
 pnpm-lock.yaml              | 31 +++++++++++++++++++------------
 src/ECharts.ts              |  5 ++++-
 src/composables/tooltip.ts  | 26 +++++++++++++-------------
 5 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index acf7242..530c42f 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -58,6 +58,9 @@ function getPieOption(params) {
           autoresize
         />
       </template>
+      <template #tooltip:xAxis="{ params }">
+        Year: <b>{{ params.name }}</b>
+      </template>
     </v-chart>
   </v-example>
 </template>
diff --git a/package.json b/package.json
index d3c2944..a45bddd 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@vue/tsconfig": "^0.7.0",
     "@vueuse/core": "^13.1.0",
     "comment-mark": "^2.0.1",
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "esbuild-wasm": "^0.23.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 192fa13..64e3b65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,14 +39,14 @@ importers:
         specifier: ^2.0.1
         version: 2.0.1
       echarts:
-        specifier: ^5.5.1
-        version: 5.5.1
+        specifier: ^5.6.0
+        version: 5.6.0
       echarts-gl:
         specifier: ^2.0.9
-        version: 2.0.9(echarts@5.5.1)
+        version: 2.0.9(echarts@5.6.0)
       echarts-liquidfill:
         specifier: ^3.1.0
-        version: 3.1.0(echarts@5.5.1)
+        version: 3.1.0(echarts@5.6.0)
       esbuild-wasm:
         specifier: ^0.23.0
         version: 0.23.0
@@ -820,8 +820,8 @@ packages:
     peerDependencies:
       echarts: ^5.0.1
 
-  echarts@5.5.1:
-    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1511,6 +1511,9 @@ packages:
   zrender@5.6.0:
     resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
 
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
 snapshots:
 
   '@aashutoshrathi/word-wrap@1.2.6': {}
@@ -2134,20 +2137,20 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  echarts-gl@2.0.9(echarts@5.5.1):
+  echarts-gl@2.0.9(echarts@5.6.0):
     dependencies:
       claygl: 1.3.0
-      echarts: 5.5.1
+      echarts: 5.6.0
       zrender: 5.6.0
 
-  echarts-liquidfill@3.1.0(echarts@5.5.1):
+  echarts-liquidfill@3.1.0(echarts@5.6.0):
     dependencies:
-      echarts: 5.5.1
+      echarts: 5.6.0
 
-  echarts@5.5.1:
+  echarts@5.6.0:
     dependencies:
       tslib: 2.3.0
-      zrender: 5.6.0
+      zrender: 5.6.1
 
   emoji-regex@8.0.0: {}
 
@@ -2819,3 +2822,7 @@ snapshots:
   zrender@5.6.0:
     dependencies:
       tslib: 2.3.0
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0
diff --git a/src/ECharts.ts b/src/ECharts.ts
index cb79ef6..9dda1c9 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -24,7 +24,7 @@ import {
 import { isOn, omitOn, toValue } from "./utils";
 import { register, TAG_NAME } from "./wc";
 
-import type { PropType, InjectionKey } from "vue";
+import type { PropType, InjectionKey, SlotsType } from "vue";
 import type {
   EChartsType,
   SetOptionType,
@@ -65,6 +65,9 @@ export default defineComponent({
     ...loadingProps,
   },
   emits: {} as unknown as Emits,
+  slots: Object as SlotsType<
+    Record<"tooltip" | `tooltip:${string}`, { params: any }>
+  >,
   inheritAttrs: false,
   setup(props, { attrs, expose, slots }) {
     const root = shallowRef<EChartsElement>();
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 1540c07..8c28c85 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -1,13 +1,13 @@
 import {
-  type ShallowRef,
-  Slots,
-  Teleport,
   h,
-  onBeforeUnmount,
+  Teleport,
+  onUnmounted,
   shallowRef,
+  type ShallowRef,
+  type Slots,
 } from "vue";
 import { parseProperties } from "../utils";
-import { Option } from "src/types";
+import type { Option } from "src/types";
 
 export function useTooltip(slots: Slots) {
   const tooltipSlots = Object.fromEntries(
@@ -40,13 +40,13 @@ export function useTooltip(slots: Slots) {
   function mutateOption(option: Option) {
     Object.keys(tooltipSlots).forEach((key) => {
       let current: any = option;
-      if (key !== "tooltip") {
-        for (const prop of properties[key]) {
-          current = current[prop];
-          if (current == null) {
-            console.warn(`[vue-echarts] "option.${key}" is not defined`);
-            return;
-          }
+      for (const prop of properties[key]) {
+        current = current[prop];
+        if (current == null) {
+          console.warn(
+            `[vue-echarts] "option.${key.replace("tooltip:", "")}" is not defined`,
+          );
+          return;
         }
       }
       current.tooltip ??= {};
@@ -58,7 +58,7 @@ export function useTooltip(slots: Slots) {
     });
   }
 
-  onBeforeUnmount(() => {
+  onUnmounted(() => {
     Object.values(containers).forEach((container) => {
       container?.remove();
     });

From 117df61ddee9f86c740c95337605fc684f805a9a Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sun, 22 Jun 2025 19:46:37 +0800
Subject: [PATCH 10/27] refactor with shallowReactive

---
 src/composables/tooltip.ts | 64 ++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 8c28c85..3623f80 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -1,11 +1,4 @@
-import {
-  h,
-  Teleport,
-  onUnmounted,
-  shallowRef,
-  type ShallowRef,
-  type Slots,
-} from "vue";
+import { h, Teleport, onUnmounted, shallowReactive, type Slots } from "vue";
 import { parseProperties } from "../utils";
 import type { Option } from "src/types";
 
@@ -15,27 +8,34 @@ export function useTooltip(slots: Slots) {
       ([key]) => key === "tooltip" || key.startsWith("tooltip:"),
     ),
   );
-  const initialized: Record<string, ShallowRef<boolean>> = {};
-  const params: Record<string, ShallowRef<any>> = {};
-  const containers: Record<string, HTMLElement> = {};
-  const properties: Record<string, string[]> = {};
-
-  Object.keys(tooltipSlots).forEach((key) => {
-    initialized[key] = shallowRef(false);
-    params[key] = shallowRef(null);
-    properties[key] =
-      key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", ""));
-    containers[key] = document?.createElement("div");
-  });
+  const detachedRoot = document?.createElement("div");
+  const containers = shallowReactive<Record<string, HTMLElement>>({});
+  const initialized = shallowReactive<Record<string, boolean>>({});
+  const params = shallowReactive<Record<string, any>>({});
+  const properties = Object.fromEntries(
+    Object.keys(tooltipSlots).map((key) => [
+      key,
+      key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", "")),
+    ]),
+  );
 
-  const teleportedSlots = () =>
-    Object.keys(tooltipSlots).map((key) => {
-      const slot = tooltipSlots[key];
-      const slotContent = initialized[key].value
-        ? slot?.({ params: params[key].value })
-        : undefined;
-      return h(Teleport as any, { to: containers[key] }, slotContent);
-    });
+  const teleportedSlots = () => {
+    return h(
+      Teleport as any,
+      { to: detachedRoot },
+      Object.keys(tooltipSlots).map((key) => {
+        const slot = tooltipSlots[key];
+        const slotContent = initialized[key]
+          ? slot?.({ params: params[key] })
+          : undefined;
+        return h(
+          "div",
+          { ref: (el) => (containers[key] = el as HTMLElement) },
+          slotContent,
+        );
+      }),
+    );
+  };
 
   function mutateOption(option: Option) {
     Object.keys(tooltipSlots).forEach((key) => {
@@ -51,17 +51,15 @@ export function useTooltip(slots: Slots) {
       }
       current.tooltip ??= {};
       current.tooltip.formatter = (p: any) => {
-        initialized[key].value = true;
-        params[key].value = p;
+        initialized[key] = true;
+        params[key] = p;
         return containers[key];
       };
     });
   }
 
   onUnmounted(() => {
-    Object.values(containers).forEach((container) => {
-      container?.remove();
-    });
+    detachedRoot?.remove();
   });
 
   return {

From 2dccfdb80ab99cef575c4a8d7b7c808ac27582ac Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Mon, 23 Jun 2025 23:27:43 +0800
Subject: [PATCH 11/27] Support dynamic slot

---
 demo/data/line.js           |   7 ++-
 demo/examples/LineChart.vue |  15 ++++-
 src/ECharts.ts              |  47 +++++++++++++--
 src/composables/tooltip.ts  | 117 ++++++++++++++++++++++--------------
 4 files changed, 132 insertions(+), 54 deletions(-)

diff --git a/demo/data/line.js b/demo/data/line.js
index 631dec4..64371c5 100644
--- a/demo/data/line.js
+++ b/demo/data/line.js
@@ -16,9 +16,12 @@ export default function getData() {
     xAxis: {
       type: "category",
       triggerEvent: true,
-      tooltip: { show: true },
+      tooltip: { show: true, formatter: "" },
+    },
+    yAxis: {
+      triggerEvent: true,
+      tooltip: { show: true, formatter: "" },
     },
-    yAxis: {},
     series: [
       {
         type: "line",
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 530c42f..b1404a5 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -22,6 +22,7 @@ use([
 ]);
 
 const option = shallowRef(getData());
+const axis = shallowRef("xAxis");
 
 function getPieOption(params) {
   const option = {
@@ -58,9 +59,19 @@ function getPieOption(params) {
           autoresize
         />
       </template>
-      <template #tooltip:xAxis="{ params }">
-        Year: <b>{{ params.name }}</b>
+      <template #[`tooltip:${axis}`]="{ params }">
+        {{ axis === "xAxis" ? "Year" : "Value" }}:
+        <b>{{ params.name }}</b>
       </template>
     </v-chart>
+    <template #extra>
+      <p class="actions">
+        Custom tooltip on
+        <select v-model="axis">
+          <option value="xAxis">X Axis</option>
+          <option value="yAxis">Y Axis</option>
+        </select>
+      </p>
+    </template>
   </v-example>
 </template>
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 9dda1c9..743f7a9 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -178,8 +178,16 @@ export default defineComponent({
       function commit() {
         const opt = option || realOption.value;
         if (opt) {
-          mutateOption(opt);
-          instance.setOption(opt, realUpdateOptions.value);
+          const tooltipOption = createTooltipOption();
+          instance.setOption(opt, {
+            ...realUpdateOptions.value,
+            lazyUpdate: true,
+          });
+          instance.setOption(tooltipOption, {
+            ...realUpdateOptions.value,
+            notMerge: false,
+            silent: true,
+          });
         }
       }
 
@@ -209,8 +217,16 @@ export default defineComponent({
       if (!chart.value) {
         init(option);
       } else {
-        mutateOption(option);
-        chart.value.setOption(option, updateOptions || {});
+        const tooltipOption = createTooltipOption();
+        chart.value.setOption(option, {
+          ...(updateOptions || {}),
+          lazyUpdate: true,
+        });
+        chart.value.setOption(tooltipOption, {
+          ...(updateOptions || {}),
+          notMerge: false,
+          silent: true,
+        });
       }
     };
 
@@ -240,12 +256,18 @@ export default defineComponent({
               if (!chart.value) {
                 init();
               } else {
-                mutateOption(option);
+                const tooltipOption = createTooltipOption();
                 chart.value.setOption(option, {
                   // mutating `option` will lead to `notMerge: false` and
                   // replacing it with new reference will lead to `notMerge: true`
                   notMerge: option !== oldOption,
                   ...realUpdateOptions.value,
+                  lazyUpdate: true,
+                });
+                chart.value.setOption(tooltipOption, {
+                  ...realUpdateOptions.value,
+                  notMerge: false,
+                  silent: true,
                 });
               }
             },
@@ -281,7 +303,20 @@ export default defineComponent({
 
     useAutoresize(chart, autoresize, root);
 
-    const { teleportedSlots, mutateOption } = useTooltip(slots);
+    const { teleportedSlots, createTooltipOption } = useTooltip(slots, () => {
+      if (!manualUpdate.value && props.option && chart.value) {
+        const tooltipOption = createTooltipOption();
+        chart.value.setOption(props.option, {
+          ...realUpdateOptions.value,
+          lazyUpdate: true,
+        });
+        chart.value.setOption(tooltipOption, {
+          ...realUpdateOptions.value,
+          notMerge: false,
+          silent: true,
+        });
+      }
+    });
 
     onMounted(() => {
       init();
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 3623f80..5724cb2 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -1,69 +1,98 @@
-import { h, Teleport, onUnmounted, shallowReactive, type Slots } from "vue";
+import {
+  h,
+  Teleport,
+  onUpdated,
+  onUnmounted,
+  shallowReactive,
+  type Slots,
+} from "vue";
 import { parseProperties } from "../utils";
 import type { Option } from "src/types";
 
-export function useTooltip(slots: Slots) {
-  const tooltipSlots = Object.fromEntries(
-    Object.entries(slots).filter(
-      ([key]) => key === "tooltip" || key.startsWith("tooltip:"),
-    ),
-  );
+function isTooltipSlot(key: string) {
+  return key === "tooltip" || key.startsWith("tooltip:");
+}
+
+export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
   const detachedRoot = document?.createElement("div");
   const containers = shallowReactive<Record<string, HTMLElement>>({});
   const initialized = shallowReactive<Record<string, boolean>>({});
   const params = shallowReactive<Record<string, any>>({});
-  const properties = Object.fromEntries(
-    Object.keys(tooltipSlots).map((key) => [
-      key,
-      key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", "")),
-    ]),
-  );
 
+  // Teleport the tooltip slots to a detached root
   const teleportedSlots = () => {
     return h(
       Teleport as any,
       { to: detachedRoot },
-      Object.keys(tooltipSlots).map((key) => {
-        const slot = tooltipSlots[key];
-        const slotContent = initialized[key]
-          ? slot?.({ params: params[key] })
-          : undefined;
-        return h(
-          "div",
-          { ref: (el) => (containers[key] = el as HTMLElement) },
-          slotContent,
-        );
-      }),
+      Object.entries(slots)
+        .filter(([key]) => isTooltipSlot(key))
+        .map(([key, slot]) => {
+          const slotContent = initialized[key]
+            ? slot?.({ params: params[key] })
+            : undefined;
+          return h(
+            "div",
+            { ref: (el) => (containers[key] = el as HTMLElement), name: key },
+            slotContent,
+          );
+        }),
     );
   };
 
-  function mutateOption(option: Option) {
-    Object.keys(tooltipSlots).forEach((key) => {
-      let current: any = option;
-      for (const prop of properties[key]) {
-        current = current[prop];
-        if (current == null) {
-          console.warn(
-            `[vue-echarts] "option.${key.replace("tooltip:", "")}" is not defined`,
-          );
-          return;
-        }
-      }
-      current.tooltip ??= {};
-      current.tooltip.formatter = (p: any) => {
-        initialized[key] = true;
-        params[key] = p;
-        return containers[key];
-      };
-    });
+  // Create a minimal option with component rendered tooltip formatter
+  function createTooltipOption(): Option {
+    const option: any = {};
+
+    Object.keys(slots)
+      .filter((key) => isTooltipSlot(key))
+      .forEach((key) => {
+        const path =
+          key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", ""));
+        let current = option;
+        path.forEach((k) => {
+          if (!(k in current)) {
+            // If the key is a number, create an array, otherwise create an object
+            current[k] = isNaN(Number(k)) ? {} : [];
+          }
+          current = current[k];
+        });
+        current.tooltip = {
+          formatter(p: any) {
+            initialized[key] = true;
+            params[key] = p;
+            return containers[key];
+          },
+        };
+      });
+
+    return option;
   }
 
+  // `slots` is not reactive and cannot be watched
+  // so we need to watch it manually
+  let slotNames = Object.keys(slots).filter((key) => isTooltipSlot(key));
+  onUpdated(() => {
+    const newSlotNames = Object.keys(slots).filter((key) => isTooltipSlot(key));
+    if (newSlotNames.join() !== slotNames.join()) {
+      // Clean up params and initialized for removed slots
+      slotNames.forEach((key) => {
+        if (!(key in slots)) {
+          delete params[key];
+          delete initialized[key];
+          delete containers[key];
+        }
+      });
+      slotNames = newSlotNames;
+      onSlotsChange?.();
+    }
+  });
+
   onUnmounted(() => {
     detachedRoot?.remove();
   });
 
   return {
     teleportedSlots,
-    mutateOption,
+    createTooltipOption,
   };
 }

From 322fda4711b28cf897bc31c0bf102c10c82d73aa Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 24 Jun 2025 11:17:19 +0800
Subject: [PATCH 12/27] fix: fill empty elements with object in array

---
 src/composables/tooltip.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 5724cb2..ed513be 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -49,10 +49,18 @@ export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
         const path =
           key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", ""));
         let current = option;
-        path.forEach((k) => {
+        path.forEach((k, index, arr) => {
           if (!(k in current)) {
-            // If the key is a number, create an array, otherwise create an object
-            current[k] = isNaN(Number(k)) ? {} : [];
+            // If the next key is a number, create an array, otherwise create an object
+            current[k] = isNaN(Number(arr[index + 1])) ? {} : [];
+            // fill the non-existent elements with empty objects
+            if (Array.isArray(current) && !isNaN(Number(k))) {
+              for (let i = 0; i < Number(k); i++) {
+                if (current[i] == undefined) {
+                  current[i] = {};
+                }
+              }
+            }
           }
           current = current[k];
         });

From 49ad09b8096a86a73eea88755ab269d1641017ed Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 1 Jul 2025 11:32:14 +0800
Subject: [PATCH 13/27] shallow copy option along the path

---
 demo/examples/LineChart.vue |  2 +-
 src/ECharts.ts              | 47 +++++--------------------
 src/composables/tooltip.ts  | 69 ++++++++++++++++++++-----------------
 src/utils.ts                |  7 ++--
 4 files changed, 49 insertions(+), 76 deletions(-)

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index b1404a5..039e060 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -59,7 +59,7 @@ function getPieOption(params) {
           autoresize
         />
       </template>
-      <template #[`tooltip:${axis}`]="{ params }">
+      <template #[`tooltip-${axis}`]="{ params }">
         {{ axis === "xAxis" ? "Year" : "Value" }}:
         <b>{{ params.name }}</b>
       </template>
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 743f7a9..a33b504 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -178,16 +178,7 @@ export default defineComponent({
       function commit() {
         const opt = option || realOption.value;
         if (opt) {
-          const tooltipOption = createTooltipOption();
-          instance.setOption(opt, {
-            ...realUpdateOptions.value,
-            lazyUpdate: true,
-          });
-          instance.setOption(tooltipOption, {
-            ...realUpdateOptions.value,
-            notMerge: false,
-            silent: true,
-          });
+          instance.setOption(patchOption(opt), realUpdateOptions.value);
         }
       }
 
@@ -217,16 +208,7 @@ export default defineComponent({
       if (!chart.value) {
         init(option);
       } else {
-        const tooltipOption = createTooltipOption();
-        chart.value.setOption(option, {
-          ...(updateOptions || {}),
-          lazyUpdate: true,
-        });
-        chart.value.setOption(tooltipOption, {
-          ...(updateOptions || {}),
-          notMerge: false,
-          silent: true,
-        });
+        chart.value.setOption(patchOption(option), updateOptions);
       }
     };
 
@@ -256,18 +238,11 @@ export default defineComponent({
               if (!chart.value) {
                 init();
               } else {
-                const tooltipOption = createTooltipOption();
-                chart.value.setOption(option, {
+                chart.value.setOption(patchOption(option), {
                   // mutating `option` will lead to `notMerge: false` and
                   // replacing it with new reference will lead to `notMerge: true`
                   notMerge: option !== oldOption,
                   ...realUpdateOptions.value,
-                  lazyUpdate: true,
-                });
-                chart.value.setOption(tooltipOption, {
-                  ...realUpdateOptions.value,
-                  notMerge: false,
-                  silent: true,
                 });
               }
             },
@@ -303,18 +278,12 @@ export default defineComponent({
 
     useAutoresize(chart, autoresize, root);
 
-    const { teleportedSlots, createTooltipOption } = useTooltip(slots, () => {
+    const { teleportedSlots, patchOption } = useTooltip(slots, () => {
       if (!manualUpdate.value && props.option && chart.value) {
-        const tooltipOption = createTooltipOption();
-        chart.value.setOption(props.option, {
-          ...realUpdateOptions.value,
-          lazyUpdate: true,
-        });
-        chart.value.setOption(tooltipOption, {
-          ...realUpdateOptions.value,
-          notMerge: false,
-          silent: true,
-        });
+        chart.value.setOption(
+          patchOption(props.option),
+          realUpdateOptions.value,
+        );
       }
     });
 
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index ed513be..9c2e5b8 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -6,11 +6,11 @@ import {
   shallowReactive,
   type Slots,
 } from "vue";
-import { parseProperties } from "../utils";
-import type { Option } from "src/types";
+import type { Option } from "../types";
+import { isValidArrayIndex } from "../utils";
 
 function isTooltipSlot(key: string) {
-  return key === "tooltip" || key.startsWith("tooltip:");
+  return key === "tooltip" || key.startsWith("tooltip-");
 }
 
 export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
@@ -39,41 +39,46 @@ export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
     );
   };
 
-  // Create a minimal option with component rendered tooltip formatter
-  function createTooltipOption(): Option {
-    const option: any = {};
+  // Shallow clone the option along the path and patch the tooltip formatter
+  function patchOption(src: Option): Option {
+    const root = { ...src };
 
     Object.keys(slots)
       .filter((key) => isTooltipSlot(key))
       .forEach((key) => {
-        const path =
-          key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", ""));
-        let current = option;
-        path.forEach((k, index, arr) => {
-          if (!(k in current)) {
-            // If the next key is a number, create an array, otherwise create an object
-            current[k] = isNaN(Number(arr[index + 1])) ? {} : [];
-            // fill the non-existent elements with empty objects
-            if (Array.isArray(current) && !isNaN(Number(k))) {
-              for (let i = 0; i < Number(k); i++) {
-                if (current[i] == undefined) {
-                  current[i] = {};
-                }
-              }
-            }
+        const path = key.split("-");
+        path.push(path.shift()!);
+        let cur: any = root;
+
+        for (let i = 0; i < path.length; i++) {
+          const seg = path[i];
+          const next = cur[seg];
+
+          if (i < path.length - 1) {
+            // shallow-clone the link; create empty shell if missing
+            cur[seg] = next
+              ? Array.isArray(next)
+                ? next.slice()
+                : { ...next }
+              : isValidArrayIndex(seg)
+                ? []
+                : {};
+            cur = cur[seg];
+          } else {
+            // final node = tooltip
+            cur[seg] = {
+              ...(next || {}),
+              formatter(p: any) {
+                initialized[key] = true;
+                params[key] = p;
+                return containers[key];
+              },
+            };
           }
-          current = current[k];
-        });
-        current.tooltip = {
-          formatter(p: any) {
-            initialized[key] = true;
-            params[key] = p;
-            return containers[key];
-          },
-        };
+        }
       });
 
-    return option;
+    return root;
   }
 
   // `slots` is not reactive and cannot be watched
@@ -101,6 +106,6 @@ export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
 
   return {
     teleportedSlots,
-    createTooltipOption,
+    patchOption,
   };
 }
diff --git a/src/utils.ts b/src/utils.ts
index bdb01cb..546ecca 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -30,8 +30,7 @@ export function toValue<T>(source: MaybeRefOrGetter<T>): T {
   return isFunction(source) ? source() : unref(source);
 }
 
-export function parseProperties(path: string) {
-  // Convert bracket notation to dot notation and split the path
-  // "[2].series[0].data" -> ["2", "series", "0", "data"]
-  return path.replace(/\[(\w+)\]/g, ".$1").split(".");
+export function isValidArrayIndex(key: string): boolean {
+  const num = Number(key);
+  return Number.isInteger(num) && num >= 0 && num < Math.pow(2, 32) - 1;
 }

From 9c2f4313c8106d10188a0bdfa41c39875233799f Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 1 Jul 2025 15:11:37 +0800
Subject: [PATCH 14/27] ssr friendly

---
 src/composables/tooltip.ts | 49 +++++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 9c2e5b8..8b179fb 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -3,6 +3,8 @@ import {
   Teleport,
   onUpdated,
   onUnmounted,
+  onMounted,
+  shallowRef,
   shallowReactive,
   type Slots,
 } from "vue";
@@ -13,30 +15,35 @@ function isTooltipSlot(key: string) {
   return key === "tooltip" || key.startsWith("tooltip-");
 }
 
-export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
-  const detachedRoot = document?.createElement("div");
+export function useTooltip(slots: Slots, onSlotsChange: () => void) {
+  const detachedRoot =
+    typeof window !== "undefined" ? document.createElement("div") : undefined;
   const containers = shallowReactive<Record<string, HTMLElement>>({});
   const initialized = shallowReactive<Record<string, boolean>>({});
   const params = shallowReactive<Record<string, any>>({});
+  const isMounted = shallowRef(false);
 
   // Teleport the tooltip slots to a detached root
   const teleportedSlots = () => {
-    return h(
-      Teleport as any,
-      { to: detachedRoot },
-      Object.entries(slots)
-        .filter(([key]) => isTooltipSlot(key))
-        .map(([key, slot]) => {
-          const slotContent = initialized[key]
-            ? slot?.({ params: params[key] })
-            : undefined;
-          return h(
-            "div",
-            { ref: (el) => (containers[key] = el as HTMLElement), name: key },
-            slotContent,
-          );
-        }),
-    );
+    // Make tooltip slots client-side only to avoid SSR hydration mismatch
+    return isMounted.value
+      ? h(
+          Teleport as any,
+          { to: detachedRoot, defer: true },
+          Object.entries(slots)
+            .filter(([key]) => isTooltipSlot(key))
+            .map(([key, slot]) => {
+              const slotContent = initialized[key]
+                ? slot?.({ params: params[key] })
+                : undefined;
+              return h(
+                "div",
+                { ref: (el) => (containers[key] = el as HTMLElement) },
+                slotContent,
+              );
+            }),
+        )
+      : undefined;
   };
 
   // Shallow clone the option along the path and patch the tooltip formatter
@@ -96,10 +103,14 @@ export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
         }
       });
       slotNames = newSlotNames;
-      onSlotsChange?.();
+      onSlotsChange();
     }
   });
 
+  onMounted(() => {
+    isMounted.value = true;
+  });
+
   onUnmounted(() => {
     detachedRoot?.remove();
   });

From 0acb7b2d12c13373492a27e8cc5f38accf4a8ef8 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 1 Jul 2025 16:28:06 +0800
Subject: [PATCH 15/27] vibe docs

---
 README.md         | 62 ++++++++++++++++++++++++++++++++++++++++++++---
 README.zh-Hans.md | 56 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9ad752b..ff5db43 100644
--- a/README.md
+++ b/README.md
@@ -155,7 +155,8 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
 
   ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. Read more [here →](https://echarts.apache.org/en/option.html)
 
-  > 💡 When `update-options` is not specified, `notMerge: false` will be specified by default when the `setOption` method is called if the `option` object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to `option`, ` notMerge: true` will be specified.
+  > [!TIP]
+  > When `update-options` is not specified, `notMerge: false` will be specified by default when the `setOption` method is called if the `option` object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to `option`, ` notMerge: true` will be specified.
 
 - `update-options: object`
 
@@ -195,8 +196,7 @@ You can bind events with Vue's `v-on` directive.
 </template>
 ```
 
-> **Note**
->
+> [!NOTE]
 > Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system.
 
 Vue-ECharts support the following events:
@@ -331,6 +331,62 @@ export default {
 - `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear)
 - `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose)
 
+### Slots
+
+Vue-ECharts allows you to define ECharts option's `tooltip.formatter` callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom tooltip rendering using familiar Vue templating.
+
+**Slot Naming Convention**
+
+- Slot names begin with `tooltip`, followed by hyphen-separated path segments to the target formatter.
+- Each segment corresponds to an `option` property name or an array index (for arrays, use the numeric index).
+- The constructed slot name maps directly to the nested `formatter` it overrides.
+
+**Example mappings**:
+
+- `tooltip` → `option.tooltip.formatter`
+- `tooltip-baseOption` → `option.baseOption.tooltip.formatter`
+- `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
+- `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
+
+<details>
+<summary>Usage</summary>
+
+```vue
+<template>
+  <v-chart :option="chartOptions">
+    <!-- Override global tooltip.formatter -->
+    <template #tooltip="{ params }">
+      <table>
+        <tr>
+          <th>Series</th>
+          <th>Value</th>
+        </tr>
+        <tr v-for="(s, i) in params" :key="i">
+          <td>{{ s.seriesName }}</td>
+          <td>{{ s.data }}</td>
+        </tr>
+      </table>
+    </template>
+
+    <!-- Override tooltip on xAxis -->
+    <template #tooltip-xAxis="{ params }">
+      <div>X-Axis : {{ params.value }}</div>
+    </template>
+  </v-chart>
+</template>
+```
+
+[Example→](https://vue-echarts.dev/#line)
+
+</details>
+
+#### Slot Props
+
+- `params`: The first argument passed to the original [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) callback.
+
+> [!NOTE]
+> Slots take precedence over any `tooltip.formatter` defined in `props.option`. If a matching slot is present, the slot's content will render instead of using `option`'s formatter.
+
 ### Static Methods
 
 Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index 7bb8289..bd0a1ce 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -331,6 +331,62 @@ export default {
 - `clear` [→](https://echarts.apache.org/zh/api.html#echartsInstance.clear)
 - `dispose` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispose)
 
+### 插槽（Slots）
+
+Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 `tooltip.formatter` 回调，而无需在 `option` 对象中定义它们。这简化了自定义提示框的渲染，让你可以用熟悉的 Vue 模板语法来编写。
+
+**插槽命名约定**
+
+- 插槽名称以 `tooltip` 开头，后面跟随用连字符分隔的路径片段，用于定位要覆盖的 `formatter`。
+- 每个片段对应 `option` 对象的属性名或数组索引（数组索引使用数字形式）。
+- 拼接后的插槽名称直接映射到要覆盖的嵌套 `formatter`。
+
+**示例映射**：
+
+- `tooltip` → `option.tooltip.formatter`
+- `tooltip-baseOption` → `option.baseOption.tooltip.formatter`
+- `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
+- `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
+
+<details>
+<summary>用法示例</summary>
+
+```vue
+<template>
+  <v-chart :option="chartOptions">
+    <!-- 覆盖全局 tooltip.formatter -->
+    <template #tooltip="{ params }">
+      <table>
+        <tr>
+          <th>系列名称</th>
+          <th>数值</th>
+        </tr>
+        <tr v-for="(item, idx) in params" :key="idx">
+          <td>{{ item.seriesName }}</td>
+          <td>{{ item.data }}</td>
+        </tr>
+      </table>
+    </template>
+
+    <!-- 覆盖x轴 tooltip.formatter -->
+    <template #tooltip-xAxis="{ params }">
+      <div>X 轴: {{ params.value }}</div>
+    </template>
+  </v-chart>
+</template>
+```
+
+[Example→](https://vue-echarts.dev/#line)
+
+</details>
+
+#### 插槽Props
+
+- `params`：[`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter) 回调的第一个参数。
+
+> [!NOTE]
+> 插槽内容会优先于 `props.option` 中对应的 `tooltip.formatter` 渲染，如果两者同时存在。
+
 ### 静态方法
 
 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。

From 3556afe81728046fca7a69d900300e567d7240ef Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 1 Jul 2025 16:43:43 +0800
Subject: [PATCH 16/27] typo

---
 README.zh-Hans.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index bd0a1ce..18ef12c 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -155,7 +155,8 @@ app.component('v-chart', VueECharts)
 
   ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 `setOption` 方法。查看[详情 →](https://echarts.apache.org/zh/option.html)
 
-  > 💡 在没有指定 `update-options` 时，如果直接修改 `option` 对象而引用保持不变，`setOption` 方法调用时将默认指定 `notMerge: false`；否则，如果为 `option` 绑定一个新的引用，将指定 `notMerge: true`。
+  > [!TIP]
+  > 在没有指定 `update-options` 时，如果直接修改 `option` 对象而引用保持不变，`setOption` 方法调用时将默认指定 `notMerge: false`；否则，如果为 `option` 绑定一个新的引用，将指定 `notMerge: true`。
 
 - `update-options: object`
 
@@ -195,8 +196,7 @@ app.component('v-chart', VueECharts)
 </template>
 ```
 
-> **Note**
->
+> [!NOTE]
 > 仅支持 `.once` 修饰符，因为其它修饰符都与 DOM 事件机制强耦合。
 
 Vue-ECharts 支持如下事件：

From 6aa8d6daa3d055e8af74c721f71df489518a09e5 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Thu, 3 Jul 2025 23:46:55 +0800
Subject: [PATCH 17/27] update according to the review

---
 README.md                   | 4 ++--
 README.zh-Hans.md           | 2 +-
 demo/data/line.js           | 4 ++++
 demo/examples/LineChart.vue | 9 ++++++++-
 src/composables/tooltip.ts  | 2 +-
 src/utils.ts                | 7 ++++++-
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ff5db43..236548e 100644
--- a/README.md
+++ b/README.md
@@ -156,7 +156,7 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
   ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. Read more [here →](https://echarts.apache.org/en/option.html)
 
   > [!TIP]
-  > When `update-options` is not specified, `notMerge: false` will be specified by default when the `setOption` method is called if the `option` object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to `option`, ` notMerge: true` will be specified.
+  > When `update-options` is not specified, `notMerge: false` will be specified by default when the `setOption` method is called if the `option` object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to `option`, `notMerge: true` will be specified.
 
 - `update-options: object`
 
@@ -376,7 +376,7 @@ Vue-ECharts allows you to define ECharts option's `tooltip.formatter` callbacks
 </template>
 ```
 
-[Example→](https://vue-echarts.dev/#line)
+[Example →](https://vue-echarts.dev/#line)
 
 </details>
 
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index 18ef12c..4b948c6 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -376,7 +376,7 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 `tooltip.fo
 </template>
 ```
 
-[Example→](https://vue-echarts.dev/#line)
+[示例 →](https://vue-echarts.dev/#line)
 
 </details>
 
diff --git a/demo/data/line.js b/demo/data/line.js
index 64371c5..35f1601 100644
--- a/demo/data/line.js
+++ b/demo/data/line.js
@@ -1,5 +1,9 @@
 export default function getData() {
   return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+      fontWeight: 300,
+    },
     legend: { top: 20 },
     tooltip: {
       trigger: "axis",
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 039e060..659c893 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -37,7 +37,14 @@ function getPieOption(params) {
           borderColor: "#fff",
           borderWidth: 2,
         },
-        label: { position: "center", formatter: params[0].name },
+        label: {
+          position: "center",
+          formatter: params[0].name,
+          textStyle: {
+            fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+            fontWeight: 300,
+          },
+        },
       },
     ],
   };
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
index 8b179fb..7c36f03 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/tooltip.ts
@@ -65,7 +65,7 @@ export function useTooltip(slots: Slots, onSlotsChange: () => void) {
             // shallow-clone the link; create empty shell if missing
             cur[seg] = next
               ? Array.isArray(next)
-                ? next.slice()
+                ? [...next]
                 : { ...next }
               : isValidArrayIndex(seg)
                 ? []
diff --git a/src/utils.ts b/src/utils.ts
index 546ecca..4d3a383 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -32,5 +32,10 @@ export function toValue<T>(source: MaybeRefOrGetter<T>): T {
 
 export function isValidArrayIndex(key: string): boolean {
   const num = Number(key);
-  return Number.isInteger(num) && num >= 0 && num < Math.pow(2, 32) - 1;
+  return (
+    Number.isInteger(num) &&
+    num >= 0 &&
+    num < Math.pow(2, 32) - 1 &&
+    String(num) === key
+  );
 }

From 887102d1f55f9b024459151bbd62c1da17208860 Mon Sep 17 00:00:00 2001
From: Yue JIN <40021217+kingyue737@users.noreply.github.com>
Date: Fri, 4 Jul 2025 17:02:23 +0800
Subject: [PATCH 18/27] add dataView slot

* chore: fix warnings and errors in demo (#839)

* chore: suppress warning in demo

* chore: prevent multiple intializations of esbuild-wasm in demo HMR

* feat: dynamically update the theme (#841)

Co-authored-by: GU Yiling <justice360@gmail.com>

* feat: add dataView slot

* vibe docs

---------

Co-authored-by: GU Yiling <justice360@gmail.com>
---
 README.md                               | 60 ++++++++++++-------
 README.zh-Hans.md                       | 64 +++++++++++++-------
 demo/CodeGen.vue                        |  6 +-
 demo/data/logo.js                       |  6 +-
 demo/data/radar.ts                      |  1 +
 demo/examples/LineChart.vue             | 28 ++++++++-
 package.json                            |  6 +-
 pnpm-lock.yaml                          | 30 +++++-----
 scripts/docs.mjs                        |  2 +-
 src/ECharts.ts                          | 19 ++++--
 src/composables/index.ts                |  1 +
 src/composables/{tooltip.ts => slot.ts} | 80 ++++++++++++++-----------
 12 files changed, 196 insertions(+), 107 deletions(-)
 rename src/composables/{tooltip.ts => slot.ts} (54%)

diff --git a/README.md b/README.md
index 236548e..a0d293d 100644
--- a/README.md
+++ b/README.md
@@ -120,7 +120,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0-beta.1"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
 ```
 
@@ -331,15 +331,21 @@ export default {
 - `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear)
 - `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose)
 
+> [!NOTE]
+> The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props):
+>
+> - [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead.
+> - `setTheme`: use the `theme` prop instead.
+
 ### Slots
 
-Vue-ECharts allows you to define ECharts option's `tooltip.formatter` callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom tooltip rendering using familiar Vue templating.
+Vue-ECharts allows you to define ECharts option's [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) and [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent) callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom HTMLElement rendering using familiar Vue templating.
 
 **Slot Naming Convention**
 
-- Slot names begin with `tooltip`, followed by hyphen-separated path segments to the target formatter.
+- Slot names begin with `tooltip`/`dataView`, followed by hyphen-separated path segments to the target.
 - Each segment corresponds to an `option` property name or an array index (for arrays, use the numeric index).
-- The constructed slot name maps directly to the nested `formatter` it overrides.
+- The constructed slot name maps directly to the nested callback it overrides.
 
 **Example mappings**:
 
@@ -347,6 +353,8 @@ Vue-ECharts allows you to define ECharts option's `tooltip.formatter` callbacks
 - `tooltip-baseOption` → `option.baseOption.tooltip.formatter`
 - `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
 - `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
+- `dataView` → `option.toolbox.feature.dataView.optionToContent`
+- `dataView-media[1]-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
 <details>
 <summary>Usage</summary>
@@ -354,24 +362,38 @@ Vue-ECharts allows you to define ECharts option's `tooltip.formatter` callbacks
 ```vue
 <template>
   <v-chart :option="chartOptions">
-    <!-- Override global tooltip.formatter -->
+    <!-- Global `tooltip.formatter` -->
     <template #tooltip="{ params }">
-      <table>
-        <tr>
-          <th>Series</th>
-          <th>Value</th>
-        </tr>
-        <tr v-for="(s, i) in params" :key="i">
-          <td>{{ s.seriesName }}</td>
-          <td>{{ s.data }}</td>
-        </tr>
-      </table>
+      <div v-for="(param, i) in params" :key="i">
+        <span v-html="param.marker" />
+        <span>{{ param.seriesName }}</span>
+        <span>{{ param.value[0] }}</span>
+      </div>
     </template>
 
-    <!-- Override tooltip on xAxis -->
+    <!-- Tooltip on xAxis -->
     <template #tooltip-xAxis="{ params }">
       <div>X-Axis : {{ params.value }}</div>
     </template>
+
+    <!-- Data View Content -->
+    <template #dataView="{ option }">
+      <table>
+        <thead>
+          <tr>
+            <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
+              {{ t }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
+            <th>{{ row[0] }}</th>
+            <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
   </v-chart>
 </template>
 ```
@@ -380,12 +402,8 @@ Vue-ECharts allows you to define ECharts option's `tooltip.formatter` callbacks
 
 </details>
 
-#### Slot Props
-
-- `params`: The first argument passed to the original [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) callback.
-
 > [!NOTE]
-> Slots take precedence over any `tooltip.formatter` defined in `props.option`. If a matching slot is present, the slot's content will render instead of using `option`'s formatter.
+> Slots take precedence over the corresponding callback defined in `props.option`.
 
 ### Static Methods
 
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index 4b948c6..e4b9456 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -120,7 +120,7 @@ import "echarts";
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0-beta.1"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
 ```
 
@@ -331,15 +331,21 @@ export default {
 - `clear` [→](https://echarts.apache.org/zh/api.html#echartsInstance.clear)
 - `dispose` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispose)
 
+> [!NOTE]
+> 如下 ECharts 实例方法没有被暴露，因为它们的功能已经通过组件 [props](#props) 提供了：
+>
+> - [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading)：请使用 `loading` 和 `loading-options` prop。
+> - `setTheme`：请使用 `theme` prop。
+
 ### 插槽（Slots）
 
-Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 `tooltip.formatter` 回调，而无需在 `option` 对象中定义它们。这简化了自定义提示框的渲染，让你可以用熟悉的 Vue 模板语法来编写。
+Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter) 和 [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.optionToContent) 回调，而无需在 `option` 对象中定义它们。你可以使用熟悉的 Vue 模板语法来编写自定义提示框或数据视图中的内容。
 
 **插槽命名约定**
 
-- 插槽名称以 `tooltip` 开头，后面跟随用连字符分隔的路径片段，用于定位要覆盖的 `formatter`。
-- 每个片段对应 `option` 对象的属性名或数组索引（数组索引使用数字形式）。
-- 拼接后的插槽名称直接映射到要覆盖的嵌套 `formatter`。
+- 插槽名称以 `tooltip`/`dataView` 开头，后面跟随用连字符分隔的路径片段，用于定位目标。
+- 每个路径片段对应 `option` 对象的属性名或数组索引（数组索引使用数字形式）。
+- 拼接后的插槽名称直接映射到要覆盖的嵌套回调函数。
 
 **示例映射**：
 
@@ -347,6 +353,8 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 `tooltip.fo
 - `tooltip-baseOption` → `option.baseOption.tooltip.formatter`
 - `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
 - `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
+- `dataView` → `option.toolbox.feature.dataView.optionToContent`
+- `dataView-media[1]-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
 <details>
 <summary>用法示例</summary>
@@ -354,23 +362,37 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 `tooltip.fo
 ```vue
 <template>
   <v-chart :option="chartOptions">
-    <!-- 覆盖全局 tooltip.formatter -->
+    <!-- 全局 `tooltip.formatter` -->
     <template #tooltip="{ params }">
-      <table>
-        <tr>
-          <th>系列名称</th>
-          <th>数值</th>
-        </tr>
-        <tr v-for="(item, idx) in params" :key="idx">
-          <td>{{ item.seriesName }}</td>
-          <td>{{ item.data }}</td>
-        </tr>
-      </table>
+      <div v-for="(param, i) in params" :key="i">
+        <span v-html="param.marker" />
+        <span>{{ param.seriesName }}</span>
+        <span>{{ param.value[0] }}</span>
+      </div>
     </template>
 
-    <!-- 覆盖x轴 tooltip.formatter -->
+    <!-- x轴 tooltip -->
     <template #tooltip-xAxis="{ params }">
-      <div>X 轴: {{ params.value }}</div>
+      <div>X轴: {{ params.value }}</div>
+    </template>
+
+    <!-- 数据视图内容 -->
+    <template #dataView="{ option }">
+      <table>
+        <thead>
+          <tr>
+            <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
+              {{ t }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
+            <th>{{ row[0] }}</th>
+            <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
+          </tr>
+        </tbody>
+      </table>
     </template>
   </v-chart>
 </template>
@@ -380,12 +402,8 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 `tooltip.fo
 
 </details>
 
-#### 插槽Props
-
-- `params`：[`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter) 回调的第一个参数。
-
 > [!NOTE]
-> 插槽内容会优先于 `props.option` 中对应的 `tooltip.formatter` 渲染，如果两者同时存在。
+> 插槽会优先于 `props.option` 中对应的回调函数。
 
 ### 静态方法
 
diff --git a/demo/CodeGen.vue b/demo/CodeGen.vue
index 08cbfb0..3793bd9 100644
--- a/demo/CodeGen.vue
+++ b/demo/CodeGen.vue
@@ -78,7 +78,11 @@ const transformedCode = ref("");
 const transformErrors = ref([]);
 
 onMounted(async () => {
-  await initialize({ wasmURL });
+  // prevent multiple initializations during HMR
+  if (!window.__esbuildInitialized) {
+    await initialize({ wasmURL });
+    window.__esbuildInitialized = true;
+  }
 
   initializing.value = false;
 
diff --git a/demo/data/logo.js b/demo/data/logo.js
index 6947e3d..017578b 100644
--- a/demo/data/logo.js
+++ b/demo/data/logo.js
@@ -20,10 +20,8 @@ export default {
       },
       shape: `path://${d}`,
       label: {
-        normal: {
-          formatter() {
-            return "";
-          },
+        formatter() {
+          return "";
         },
       },
       itemStyle: {
diff --git a/demo/data/radar.ts b/demo/data/radar.ts
index 8d00c21..6cd8bea 100644
--- a/demo/data/radar.ts
+++ b/demo/data/radar.ts
@@ -27,6 +27,7 @@ export const useScoreStore = defineStore("store", () => {
         fontWeight: 300,
       },
       radar: {
+        splitNumber: 4,
         indicator: scores.value.map(({ name, max }, index) => {
           if (index === activeIndex) {
             return { name, max, color: "goldenrod" };
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 659c893..eded634 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -6,6 +6,7 @@ import {
   DatasetComponent,
   LegendComponent,
   TooltipComponent,
+  ToolboxComponent,
 } from "echarts/components";
 import { shallowRef } from "vue";
 import VChart from "../../src/ECharts";
@@ -18,6 +19,7 @@ use([
   LegendComponent,
   LineChart,
   TooltipComponent,
+  ToolboxComponent,
   PieChart,
 ]);
 
@@ -56,7 +58,7 @@ function getPieOption(params) {
   <v-example
     id="line"
     title="Line chart"
-    desc="(with component rendered tooltip)"
+    desc="(with tooltip and dataView slots)"
   >
     <v-chart :option="option" autoresize>
       <template #tooltip="{ params }">
@@ -70,6 +72,23 @@ function getPieOption(params) {
         {{ axis === "xAxis" ? "Year" : "Value" }}:
         <b>{{ params.name }}</b>
       </template>
+      <template #dataView="{ option }">
+        <table style="margin: 20px auto">
+          <thead>
+            <tr>
+              <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
+                {{ t }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
+              <th>{{ row[0] }}</th>
+              <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
     </v-chart>
     <template #extra>
       <p class="actions">
@@ -82,3 +101,10 @@ function getPieOption(params) {
     </template>
   </v-example>
 </template>
+
+<style scoped>
+th,
+td {
+  padding: 4px 8px;
+}
+</style>
diff --git a/package.json b/package.json
index a45bddd..163c7b9 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "docs": "node ./scripts/docs.mjs",
     "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.12.4",
   "type": "module",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -36,7 +36,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "echarts": "^5.5.1",
+    "echarts": "^6.0.0-beta.1",
     "vue": "^3.1.1"
   },
   "devDependencies": {
@@ -50,7 +50,7 @@
     "@vue/tsconfig": "^0.7.0",
     "@vueuse/core": "^13.1.0",
     "comment-mark": "^2.0.1",
-    "echarts": "^5.6.0",
+    "echarts": "^6.0.0-beta.1",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "esbuild-wasm": "^0.23.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64e3b65..5cd968d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,14 +39,14 @@ importers:
         specifier: ^2.0.1
         version: 2.0.1
       echarts:
-        specifier: ^5.6.0
-        version: 5.6.0
+        specifier: ^6.0.0-beta.1
+        version: 6.0.0-beta.1
       echarts-gl:
         specifier: ^2.0.9
-        version: 2.0.9(echarts@5.6.0)
+        version: 2.0.9(echarts@6.0.0-beta.1)
       echarts-liquidfill:
         specifier: ^3.1.0
-        version: 3.1.0(echarts@5.6.0)
+        version: 3.1.0(echarts@6.0.0-beta.1)
       esbuild-wasm:
         specifier: ^0.23.0
         version: 0.23.0
@@ -820,8 +820,8 @@ packages:
     peerDependencies:
       echarts: ^5.0.1
 
-  echarts@5.6.0:
-    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+  echarts@6.0.0-beta.1:
+    resolution: {integrity: sha512-hEtCVOohAWr8fCMNXwg0cRZjkWO+LwbhO30cX/fzwb2LF4sHt06YHVWlAQclayhwHlxCyYtMG9FkFnNUAHK72Q==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1511,8 +1511,8 @@ packages:
   zrender@5.6.0:
     resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
 
-  zrender@5.6.1:
-    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+  zrender@6.0.0-rc.1:
+    resolution: {integrity: sha512-DWYxDvSHb69PlZ9bs2C4NHt0xHMojHztGForDFAiNSzw9XDwycwXAhJydFrNyq/vy0I8usTZ+KbtZyrX+6ePJQ==}
 
 snapshots:
 
@@ -2137,20 +2137,20 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  echarts-gl@2.0.9(echarts@5.6.0):
+  echarts-gl@2.0.9(echarts@6.0.0-beta.1):
     dependencies:
       claygl: 1.3.0
-      echarts: 5.6.0
+      echarts: 6.0.0-beta.1
       zrender: 5.6.0
 
-  echarts-liquidfill@3.1.0(echarts@5.6.0):
+  echarts-liquidfill@3.1.0(echarts@6.0.0-beta.1):
     dependencies:
-      echarts: 5.6.0
+      echarts: 6.0.0-beta.1
 
-  echarts@5.6.0:
+  echarts@6.0.0-beta.1:
     dependencies:
       tslib: 2.3.0
-      zrender: 5.6.1
+      zrender: 6.0.0-rc.1
 
   emoji-regex@8.0.0: {}
 
@@ -2823,6 +2823,6 @@ snapshots:
     dependencies:
       tslib: 2.3.0
 
-  zrender@5.6.1:
+  zrender@6.0.0-rc.1:
     dependencies:
       tslib: 2.3.0
diff --git a/scripts/docs.mjs b/scripts/docs.mjs
index dc9c42c..b8e1abc 100644
--- a/scripts/docs.mjs
+++ b/scripts/docs.mjs
@@ -8,7 +8,7 @@ const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
   vue: "3.5.13",
-  echarts: "5.5.1",
+  echarts: "6.0.0-beta.1",
   [name]: version,
 };
 
diff --git a/src/ECharts.ts b/src/ECharts.ts
index a33b504..56fdc98 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -19,6 +19,7 @@ import {
   autoresizeProps,
   useLoading,
   loadingProps,
+  useSlotOption,
   type PublicMethods,
 } from "./composables";
 import { isOn, omitOn, toValue } from "./utils";
@@ -40,7 +41,6 @@ import type {
 import type { EChartsElement } from "./wc";
 
 import "./style.css";
-import { useTooltip } from "./composables/tooltip";
 
 const wcRegistered = register();
 
@@ -66,7 +66,8 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   slots: Object as SlotsType<
-    Record<"tooltip" | `tooltip:${string}`, { params: any }>
+    Record<"tooltip" | `tooltip-${string}`, { params: any }> &
+      Record<"dataView" | `dataView-${string}`, { option: Option }>
   >,
   inheritAttrs: false,
   setup(props, { attrs, expose, slots }) {
@@ -256,7 +257,7 @@ export default defineComponent({
     );
 
     watch(
-      [realTheme, realInitOptions],
+      realInitOptions,
       () => {
         cleanup();
         init();
@@ -266,6 +267,16 @@ export default defineComponent({
       },
     );
 
+    watch(
+      realTheme,
+      (theme) => {
+        chart.value?.setTheme(theme);
+      },
+      {
+        deep: true,
+      },
+    );
+
     watchEffect(() => {
       if (props.group && chart.value) {
         chart.value.group = props.group;
@@ -278,7 +289,7 @@ export default defineComponent({
 
     useAutoresize(chart, autoresize, root);
 
-    const { teleportedSlots, patchOption } = useTooltip(slots, () => {
+    const { teleportedSlots, patchOption } = useSlotOption(slots, () => {
       if (!manualUpdate.value && props.option && chart.value) {
         chart.value.setOption(
           patchOption(props.option),
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 7708f91..68526de 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -1,3 +1,4 @@
 export * from "./api";
 export * from "./autoresize";
 export * from "./loading";
+export * from "./slot";
diff --git a/src/composables/tooltip.ts b/src/composables/slot.ts
similarity index 54%
rename from src/composables/tooltip.ts
rename to src/composables/slot.ts
index 7c36f03..cbedc49 100644
--- a/src/composables/tooltip.ts
+++ b/src/composables/slot.ts
@@ -11,11 +11,19 @@ import {
 import type { Option } from "../types";
 import { isValidArrayIndex } from "../utils";
 
-function isTooltipSlot(key: string) {
-  return key === "tooltip" || key.startsWith("tooltip-");
+const SLOT_PATH_MAP = {
+  tooltip: ["tooltip", "formatter"],
+  dataView: ["toolbox", "feature", "dataView", "optionToContent"],
+};
+type SlotPrefix = keyof typeof SLOT_PATH_MAP;
+
+function isValidSlotName(key: string) {
+  return Object.keys(SLOT_PATH_MAP).some(
+    (slotPrefix) => key === slotPrefix || key.startsWith(slotPrefix + "-"),
+  );
 }
 
-export function useTooltip(slots: Slots, onSlotsChange: () => void) {
+export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
   const detachedRoot =
     typeof window !== "undefined" ? document.createElement("div") : undefined;
   const containers = shallowReactive<Record<string, HTMLElement>>({});
@@ -31,14 +39,18 @@ export function useTooltip(slots: Slots, onSlotsChange: () => void) {
           Teleport as any,
           { to: detachedRoot, defer: true },
           Object.entries(slots)
-            .filter(([key]) => isTooltipSlot(key))
+            .filter(([key]) => isValidSlotName(key))
             .map(([key, slot]) => {
+              const propName = key.startsWith("tooltip") ? "params" : "option";
               const slotContent = initialized[key]
-                ? slot?.({ params: params[key] })
+                ? slot?.({ [propName]: params[key] })
                 : undefined;
               return h(
                 "div",
-                { ref: (el) => (containers[key] = el as HTMLElement) },
+                {
+                  ref: (el) => (containers[key] = el as HTMLElement),
+                  style: { display: "contents" },
+                },
                 slotContent,
               );
             }),
@@ -46,43 +58,37 @@ export function useTooltip(slots: Slots, onSlotsChange: () => void) {
       : undefined;
   };
 
-  // Shallow clone the option along the path and patch the tooltip formatter
+  // Shallow clone the option along the path and override the target callback
   function patchOption(src: Option): Option {
     const root = { ...src };
 
     Object.keys(slots)
-      .filter((key) => isTooltipSlot(key))
+      .filter((key) => isValidSlotName(key))
       .forEach((key) => {
         const path = key.split("-");
-        path.push(path.shift()!);
-        let cur: any = root;
+        const prefix = path.shift() as SlotPrefix;
+        path.push(...SLOT_PATH_MAP[prefix]);
 
-        for (let i = 0; i < path.length; i++) {
+        let cur: any = root;
+        for (let i = 0; i < path.length - 1; i++) {
           const seg = path[i];
           const next = cur[seg];
 
-          if (i < path.length - 1) {
-            // shallow-clone the link; create empty shell if missing
-            cur[seg] = next
-              ? Array.isArray(next)
-                ? [...next]
-                : { ...next }
-              : isValidArrayIndex(seg)
-                ? []
-                : {};
-            cur = cur[seg];
-          } else {
-            // final node = tooltip
-            cur[seg] = {
-              ...(next || {}),
-              formatter(p: any) {
-                initialized[key] = true;
-                params[key] = p;
-                return containers[key];
-              },
-            };
-          }
+          // shallow-clone the link; create empty shell if missing
+          cur[seg] = next
+            ? Array.isArray(next)
+              ? [...next]
+              : { ...next }
+            : isValidArrayIndex(seg)
+              ? []
+              : {};
+          cur = cur[seg];
         }
+        cur[path[path.length - 1]] = (p: any) => {
+          initialized[key] = true;
+          params[key] = p;
+          return containers[key];
+        };
       });
 
     return root;
@@ -90,9 +96,15 @@ export function useTooltip(slots: Slots, onSlotsChange: () => void) {
 
   // `slots` is not reactive and cannot be watched
   // so we need to watch it manually
-  let slotNames = Object.keys(slots).filter((key) => isTooltipSlot(key));
+  let slotNames: string[] = [];
   onUpdated(() => {
-    const newSlotNames = Object.keys(slots).filter((key) => isTooltipSlot(key));
+    const newSlotNames = Object.keys(slots).filter((key) => {
+      if (isValidSlotName(key)) {
+        return true;
+      }
+      console.warn(`[vue-echarts] Invalid slot name: ${key}`);
+      return false;
+    });
     if (newSlotNames.join() !== slotNames.join()) {
       // Clean up params and initialized for removed slots
       slotNames.forEach((key) => {

From 429943ab283864ee9b0b4df7523557afdeda2672 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Mon, 7 Jul 2025 13:41:06 +0800
Subject: [PATCH 19/27] fix docs typo

---
 README.md         | 2 +-
 README.zh-Hans.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a0d293d..ca8e014 100644
--- a/README.md
+++ b/README.md
@@ -354,7 +354,7 @@ Vue-ECharts allows you to define ECharts option's [`tooltip.formatter`](https://
 - `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
 - `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
 - `dataView` → `option.toolbox.feature.dataView.optionToContent`
-- `dataView-media[1]-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
+- `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
 <details>
 <summary>Usage</summary>
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index e4b9456..f2d1fe4 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -354,7 +354,7 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
 - `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
 - `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
 - `dataView` → `option.toolbox.feature.dataView.optionToContent`
-- `dataView-media[1]-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
+- `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
 <details>
 <summary>用法示例</summary>

From c8a8869ed05f06fbd9bf33fc265bf51e589fce6a Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 15 Jul 2025 16:43:37 +0800
Subject: [PATCH 20/27] update according to the review

---
 src/composables/slot.ts | 79 +++++++++++++++++++++++++----------------
 src/utils.ts            | 13 +++++++
 2 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/src/composables/slot.ts b/src/composables/slot.ts
index cbedc49..48bb1a6 100644
--- a/src/composables/slot.ts
+++ b/src/composables/slot.ts
@@ -6,19 +6,28 @@ import {
   onMounted,
   shallowRef,
   shallowReactive,
-  type Slots,
+  warn,
 } from "vue";
+import type { Slots } from "vue";
 import type { Option } from "../types";
-import { isValidArrayIndex } from "../utils";
+import { isValidArrayIndex, isSameSet } from "../utils";
 
-const SLOT_PATH_MAP = {
-  tooltip: ["tooltip", "formatter"],
-  dataView: ["toolbox", "feature", "dataView", "optionToContent"],
-};
-type SlotPrefix = keyof typeof SLOT_PATH_MAP;
+const SLOT_CONFIG = {
+  tooltip: {
+    path: ["tooltip", "formatter"],
+    propNames: ["params"],
+  },
+  dataView: {
+    path: ["toolbox", "feature", "dataView", "optionToContent"],
+    propNames: ["option"],
+  },
+} as const;
+type SlotPrefix = keyof typeof SLOT_CONFIG;
+type SlotName = SlotPrefix | `${SlotPrefix}-${string}`;
+const SLOT_PREFIXES = Object.keys(SLOT_CONFIG) as SlotPrefix[];
 
-function isValidSlotName(key: string) {
-  return Object.keys(SLOT_PATH_MAP).some(
+function isValidSlotName(key: string): key is SlotName {
+  return SLOT_PREFIXES.some(
     (slotPrefix) => key === slotPrefix || key.startsWith(slotPrefix + "-"),
   );
 }
@@ -26,9 +35,13 @@ function isValidSlotName(key: string) {
 export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
   const detachedRoot =
     typeof window !== "undefined" ? document.createElement("div") : undefined;
-  const containers = shallowReactive<Record<string, HTMLElement>>({});
-  const initialized = shallowReactive<Record<string, boolean>>({});
-  const params = shallowReactive<Record<string, any>>({});
+  const containers = shallowReactive<Partial<Record<SlotName, HTMLElement>>>(
+    {},
+  );
+  const initialized = shallowReactive<Partial<Record<SlotName, boolean>>>({});
+  const params = shallowReactive<
+    Partial<Record<SlotName, Record<string, any>>>
+  >({});
   const isMounted = shallowRef(false);
 
   // Teleport the tooltip slots to a detached root
@@ -41,14 +54,14 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
           Object.entries(slots)
             .filter(([key]) => isValidSlotName(key))
             .map(([key, slot]) => {
-              const propName = key.startsWith("tooltip") ? "params" : "option";
-              const slotContent = initialized[key]
-                ? slot?.({ [propName]: params[key] })
+              const slotName = key as SlotName;
+              const slotContent = initialized[slotName]
+                ? slot?.(params[slotName])
                 : undefined;
               return h(
                 "div",
                 {
-                  ref: (el) => (containers[key] = el as HTMLElement),
+                  ref: (el) => (containers[slotName] = el as HTMLElement),
                   style: { display: "contents" },
                 },
                 slotContent,
@@ -63,11 +76,17 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
     const root = { ...src };
 
     Object.keys(slots)
-      .filter((key) => isValidSlotName(key))
+      .filter((key) => {
+        const isValidSlot = isValidSlotName(key);
+        if (!isValidSlot) {
+          warn(`Invalid slot name: ${key}`);
+        }
+        return isValidSlot;
+      })
       .forEach((key) => {
         const path = key.split("-");
         const prefix = path.shift() as SlotPrefix;
-        path.push(...SLOT_PATH_MAP[prefix]);
+        path.push(...SLOT_CONFIG[prefix].path);
 
         let cur: any = root;
         for (let i = 0; i < path.length - 1; i++) {
@@ -84,9 +103,15 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
               : {};
           cur = cur[seg];
         }
-        cur[path[path.length - 1]] = (p: any) => {
+        cur[path[path.length - 1]] = (...args: any[]) => {
           initialized[key] = true;
-          params[key] = p;
+          params[key] = SLOT_CONFIG[prefix].propNames.reduce(
+            (acc, paramName, index) => {
+              acc[paramName] = args[index];
+              return acc;
+            },
+            {} as Record<string, any>,
+          );
           return containers[key];
         };
       });
@@ -96,19 +121,13 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
 
   // `slots` is not reactive and cannot be watched
   // so we need to watch it manually
-  let slotNames: string[] = [];
+  let slotNames: SlotName[] = [];
   onUpdated(() => {
-    const newSlotNames = Object.keys(slots).filter((key) => {
-      if (isValidSlotName(key)) {
-        return true;
-      }
-      console.warn(`[vue-echarts] Invalid slot name: ${key}`);
-      return false;
-    });
-    if (newSlotNames.join() !== slotNames.join()) {
+    const newSlotNames = Object.keys(slots).filter(isValidSlotName);
+    if (!isSameSet(newSlotNames, slotNames)) {
       // Clean up params and initialized for removed slots
       slotNames.forEach((key) => {
-        if (!(key in slots)) {
+        if (!newSlotNames.includes(key)) {
           delete params[key];
           delete initialized[key];
           delete containers[key];
diff --git a/src/utils.ts b/src/utils.ts
index 4d3a383..2169a9e 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -39,3 +39,16 @@ export function isValidArrayIndex(key: string): boolean {
     String(num) === key
   );
 }
+
+export function isSameSet<T>(a: T[], b: T[]): boolean {
+  const setA = new Set(a);
+  const setB = new Set(b);
+
+  if (setA.size !== setB.size) return false;
+
+  for (const val of setA) {
+    if (!setB.has(val)) return false;
+  }
+
+  return true;
+}

From f5fdc88bc8c0cfc8626a35e05b8091f808c808c7 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 15 Jul 2025 17:30:37 +0800
Subject: [PATCH 21/27] small fix

---
 demo/examples/LineChart.vue |  6 ++----
 src/composables/slot.ts     | 13 +++++--------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index eded634..e458627 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -42,10 +42,8 @@ function getPieOption(params) {
         label: {
           position: "center",
           formatter: params[0].name,
-          textStyle: {
-            fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-            fontWeight: 300,
-          },
+          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+          fontWeight: 300,
         },
       },
     ],
diff --git a/src/composables/slot.ts b/src/composables/slot.ts
index 48bb1a6..271b3e3 100644
--- a/src/composables/slot.ts
+++ b/src/composables/slot.ts
@@ -24,6 +24,7 @@ const SLOT_CONFIG = {
 } as const;
 type SlotPrefix = keyof typeof SLOT_CONFIG;
 type SlotName = SlotPrefix | `${SlotPrefix}-${string}`;
+type SlotRecord<T> = Partial<Record<SlotName, T>>;
 const SLOT_PREFIXES = Object.keys(SLOT_CONFIG) as SlotPrefix[];
 
 function isValidSlotName(key: string): key is SlotName {
@@ -35,13 +36,9 @@ function isValidSlotName(key: string): key is SlotName {
 export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
   const detachedRoot =
     typeof window !== "undefined" ? document.createElement("div") : undefined;
-  const containers = shallowReactive<Partial<Record<SlotName, HTMLElement>>>(
-    {},
-  );
-  const initialized = shallowReactive<Partial<Record<SlotName, boolean>>>({});
-  const params = shallowReactive<
-    Partial<Record<SlotName, Record<string, any>>>
-  >({});
+  const containers = shallowReactive<SlotRecord<HTMLElement>>({});
+  const initialized = shallowReactive<SlotRecord<boolean>>({});
+  const params = shallowReactive<SlotRecord<Record<string, any>>>({});
   const isMounted = shallowRef(false);
 
   // Teleport the tooltip slots to a detached root
@@ -79,7 +76,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
       .filter((key) => {
         const isValidSlot = isValidSlotName(key);
         if (!isValidSlot) {
-          warn(`Invalid slot name: ${key}`);
+          warn(`Invalid vue-echarts slot name: ${key}`);
         }
         return isValidSlot;
       })

From 49d807bd5f0b1c5da92c0b080543ac42bce48a40 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sat, 19 Jul 2025 16:20:23 +0800
Subject: [PATCH 22/27] remove wrapper around slotProp

---
 README.md                   |  6 +++---
 README.zh-Hans.md           |  6 +++---
 demo/examples/LineChart.vue |  6 +++---
 src/ECharts.ts              |  4 ++--
 src/composables/slot.ts     | 30 +++++++++---------------------
 5 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index ca8e014..a05e0b4 100644
--- a/README.md
+++ b/README.md
@@ -363,7 +363,7 @@ Vue-ECharts allows you to define ECharts option's [`tooltip.formatter`](https://
 <template>
   <v-chart :option="chartOptions">
     <!-- Global `tooltip.formatter` -->
-    <template #tooltip="{ params }">
+    <template #tooltip="params">
       <div v-for="(param, i) in params" :key="i">
         <span v-html="param.marker" />
         <span>{{ param.seriesName }}</span>
@@ -372,12 +372,12 @@ Vue-ECharts allows you to define ECharts option's [`tooltip.formatter`](https://
     </template>
 
     <!-- Tooltip on xAxis -->
-    <template #tooltip-xAxis="{ params }">
+    <template #tooltip-xAxis="params">
       <div>X-Axis : {{ params.value }}</div>
     </template>
 
     <!-- Data View Content -->
-    <template #dataView="{ option }">
+    <template #dataView="option">
       <table>
         <thead>
           <tr>
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index f2d1fe4..6b6d3be 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -363,7 +363,7 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
 <template>
   <v-chart :option="chartOptions">
     <!-- 全局 `tooltip.formatter` -->
-    <template #tooltip="{ params }">
+    <template #tooltip="params">
       <div v-for="(param, i) in params" :key="i">
         <span v-html="param.marker" />
         <span>{{ param.seriesName }}</span>
@@ -372,12 +372,12 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
     </template>
 
     <!-- x轴 tooltip -->
-    <template #tooltip-xAxis="{ params }">
+    <template #tooltip-xAxis="params">
       <div>X轴: {{ params.value }}</div>
     </template>
 
     <!-- 数据视图内容 -->
-    <template #dataView="{ option }">
+    <template #dataView="option">
       <table>
         <thead>
           <tr>
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index e458627..30173d4 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -59,18 +59,18 @@ function getPieOption(params) {
     desc="(with tooltip and dataView slots)"
   >
     <v-chart :option="option" autoresize>
-      <template #tooltip="{ params }">
+      <template #tooltip="params">
         <v-chart
           :style="{ width: '100px', height: '100px' }"
           :option="getPieOption(params)"
           autoresize
         />
       </template>
-      <template #[`tooltip-${axis}`]="{ params }">
+      <template #[`tooltip-${axis}`]="params">
         {{ axis === "xAxis" ? "Year" : "Value" }}:
         <b>{{ params.name }}</b>
       </template>
-      <template #dataView="{ option }">
+      <template #dataView="option">
         <table style="margin: 20px auto">
           <thead>
             <tr>
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 56fdc98..5561fde 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -66,8 +66,8 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   slots: Object as SlotsType<
-    Record<"tooltip" | `tooltip-${string}`, { params: any }> &
-      Record<"dataView" | `dataView-${string}`, { option: Option }>
+    Record<"tooltip" | `tooltip-${string}`, any> &
+      Record<"dataView" | `dataView-${string}`, Option>
   >,
   inheritAttrs: false,
   setup(props, { attrs, expose, slots }) {
diff --git a/src/composables/slot.ts b/src/composables/slot.ts
index 271b3e3..88243f2 100644
--- a/src/composables/slot.ts
+++ b/src/composables/slot.ts
@@ -12,20 +12,14 @@ import type { Slots } from "vue";
 import type { Option } from "../types";
 import { isValidArrayIndex, isSameSet } from "../utils";
 
-const SLOT_CONFIG = {
-  tooltip: {
-    path: ["tooltip", "formatter"],
-    propNames: ["params"],
-  },
-  dataView: {
-    path: ["toolbox", "feature", "dataView", "optionToContent"],
-    propNames: ["option"],
-  },
+const SLOT_OPTION_PATHS = {
+  tooltip: ["tooltip", "formatter"],
+  dataView: ["toolbox", "feature", "dataView", "optionToContent"],
 } as const;
-type SlotPrefix = keyof typeof SLOT_CONFIG;
+type SlotPrefix = keyof typeof SLOT_OPTION_PATHS;
 type SlotName = SlotPrefix | `${SlotPrefix}-${string}`;
 type SlotRecord<T> = Partial<Record<SlotName, T>>;
-const SLOT_PREFIXES = Object.keys(SLOT_CONFIG) as SlotPrefix[];
+const SLOT_PREFIXES = Object.keys(SLOT_OPTION_PATHS) as SlotPrefix[];
 
 function isValidSlotName(key: string): key is SlotName {
   return SLOT_PREFIXES.some(
@@ -47,7 +41,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
     return isMounted.value
       ? h(
           Teleport as any,
-          { to: detachedRoot, defer: true },
+          { to: detachedRoot },
           Object.entries(slots)
             .filter(([key]) => isValidSlotName(key))
             .map(([key, slot]) => {
@@ -83,7 +77,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
       .forEach((key) => {
         const path = key.split("-");
         const prefix = path.shift() as SlotPrefix;
-        path.push(...SLOT_CONFIG[prefix].path);
+        path.push(...SLOT_OPTION_PATHS[prefix]);
 
         let cur: any = root;
         for (let i = 0; i < path.length - 1; i++) {
@@ -100,15 +94,9 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
               : {};
           cur = cur[seg];
         }
-        cur[path[path.length - 1]] = (...args: any[]) => {
+        cur[path[path.length - 1]] = (p: any) => {
           initialized[key] = true;
-          params[key] = SLOT_CONFIG[prefix].propNames.reduce(
-            (acc, paramName, index) => {
-              acc[paramName] = args[index];
-              return acc;
-            },
-            {} as Record<string, any>,
-          );
+          params[key] = p;
           return containers[key];
         };
       });

From fe3040acda3c3d62028668034bb465344d5c5a2b Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Sat, 19 Jul 2025 16:31:15 +0800
Subject: [PATCH 23/27] update comments

---
 README.md               |  2 ++
 README.zh-Hans.md       |  2 ++
 src/composables/slot.ts | 13 ++++++-------
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index a05e0b4..cd990b2 100644
--- a/README.md
+++ b/README.md
@@ -356,6 +356,8 @@ Vue-ECharts allows you to define ECharts option's [`tooltip.formatter`](https://
 - `dataView` → `option.toolbox.feature.dataView.optionToContent`
 - `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
+The slot props correspond to the first parameter of the callback function.
+
 <details>
 <summary>Usage</summary>
 
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index 6b6d3be..dceef5f 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -356,6 +356,8 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
 - `dataView` → `option.toolbox.feature.dataView.optionToContent`
 - `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
+插槽的 props 对象对应回调函数的第一个参数。
+
 <details>
 <summary>用法示例</summary>
 
diff --git a/src/composables/slot.ts b/src/composables/slot.ts
index 88243f2..8ba3bbd 100644
--- a/src/composables/slot.ts
+++ b/src/composables/slot.ts
@@ -35,9 +35,9 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
   const params = shallowReactive<SlotRecord<Record<string, any>>>({});
   const isMounted = shallowRef(false);
 
-  // Teleport the tooltip slots to a detached root
+  // Teleport the slots to a detached root
   const teleportedSlots = () => {
-    // Make tooltip slots client-side only to avoid SSR hydration mismatch
+    // Make slots client-side only to avoid SSR hydration mismatch
     return isMounted.value
       ? h(
           Teleport as any,
@@ -62,7 +62,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
       : undefined;
   };
 
-  // Shallow clone the option along the path and override the target callback
+  // Shallow-clone the option along the path and override the target callback
   function patchOption(src: Option): Option {
     const root = { ...src };
 
@@ -84,7 +84,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
           const seg = path[i];
           const next = cur[seg];
 
-          // shallow-clone the link; create empty shell if missing
+          // Shallow-clone the link; create empty shell if missing
           cur[seg] = next
             ? Array.isArray(next)
               ? [...next]
@@ -104,13 +104,12 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
     return root;
   }
 
-  // `slots` is not reactive and cannot be watched
-  // so we need to watch it manually
+  // `slots` is not reactive, so we need to watch it manually
   let slotNames: SlotName[] = [];
   onUpdated(() => {
     const newSlotNames = Object.keys(slots).filter(isValidSlotName);
     if (!isSameSet(newSlotNames, slotNames)) {
-      // Clean up params and initialized for removed slots
+      // Clean up states for removed slots
       slotNames.forEach((key) => {
         if (!newSlotNames.includes(key)) {
           delete params[key];

From c7d9f451669316a5913cb6412e379cffbed90244 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 22 Jul 2025 12:40:13 +0800
Subject: [PATCH 24/27] remove anys

---
 src/composables/slot.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/composables/slot.ts b/src/composables/slot.ts
index 8ba3bbd..f01b747 100644
--- a/src/composables/slot.ts
+++ b/src/composables/slot.ts
@@ -32,7 +32,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
     typeof window !== "undefined" ? document.createElement("div") : undefined;
   const containers = shallowReactive<SlotRecord<HTMLElement>>({});
   const initialized = shallowReactive<SlotRecord<boolean>>({});
-  const params = shallowReactive<SlotRecord<Record<string, any>>>({});
+  const params = shallowReactive<SlotRecord<unknown>>({});
   const isMounted = shallowRef(false);
 
   // Teleport the slots to a detached root
@@ -40,7 +40,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
     // Make slots client-side only to avoid SSR hydration mismatch
     return isMounted.value
       ? h(
-          Teleport as any,
+          Teleport,
           { to: detachedRoot },
           Object.entries(slots)
             .filter(([key]) => isValidSlotName(key))
@@ -94,7 +94,7 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
               : {};
           cur = cur[seg];
         }
-        cur[path[path.length - 1]] = (p: any) => {
+        cur[path[path.length - 1]] = (p: unknown) => {
           initialized[key] = true;
           params[key] = p;
           return containers[key];

From 7e6132f18b6f8772d88279283f4107610200cda9 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Tue, 22 Jul 2025 13:47:49 +0800
Subject: [PATCH 25/27] add tooltip slot prop type

---
 src/ECharts.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ECharts.ts b/src/ECharts.ts
index 5561fde..977065c 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -12,6 +12,7 @@ import {
   watchEffect,
 } from "vue";
 import { init as initChart } from "echarts/core";
+import type { TooltipComponentFormatterCallbackParams } from "echarts";
 
 import {
   usePublicAPI,
@@ -66,7 +67,10 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   slots: Object as SlotsType<
-    Record<"tooltip" | `tooltip-${string}`, any> &
+    Record<
+      "tooltip" | `tooltip-${string}`,
+      TooltipComponentFormatterCallbackParams
+    > &
       Record<"dataView" | `dataView-${string}`, Option>
   >,
   inheritAttrs: false,

From 00f222a438fdb255851c406dbc1b6ed34e400b8a Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Thu, 24 Jul 2025 22:10:01 +0800
Subject: [PATCH 26/27] target to vue 3.3

---
 package.json               |  2 +-
 src/ECharts.ts             |  3 ++-
 src/composables/loading.ts |  5 ++---
 src/types.ts               | 11 +----------
 src/utils.ts               | 14 --------------
 5 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 163c7b9..ec7620b 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   ],
   "peerDependencies": {
     "echarts": "^6.0.0-beta.1",
-    "vue": "^3.1.1"
+    "vue": "^3.3.0"
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 977065c..aa3982d 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -10,6 +10,7 @@ import {
   h,
   nextTick,
   watchEffect,
+  toValue,
 } from "vue";
 import { init as initChart } from "echarts/core";
 import type { TooltipComponentFormatterCallbackParams } from "echarts";
@@ -23,7 +24,7 @@ import {
   useSlotOption,
   type PublicMethods,
 } from "./composables";
-import { isOn, omitOn, toValue } from "./utils";
+import { isOn, omitOn } from "./utils";
 import { register, TAG_NAME } from "./wc";
 
 import type { PropType, InjectionKey, SlotsType } from "vue";
diff --git a/src/composables/loading.ts b/src/composables/loading.ts
index e305fc9..6c76379 100644
--- a/src/composables/loading.ts
+++ b/src/composables/loading.ts
@@ -1,5 +1,4 @@
-import { inject, computed, watchEffect } from "vue";
-import { toValue } from "../utils";
+import { inject, computed, watchEffect, toValue } from "vue";
 
 import type { Ref, InjectionKey, PropType } from "vue";
 import type {
@@ -18,7 +17,7 @@ export function useLoading(
 ): void {
   const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
   const realLoadingOptions = computed(() => ({
-    ...(toValue(defaultLoadingOptions) || {}),
+    ...toValue(defaultLoadingOptions),
     ...loadingOptions?.value,
   }));
 
diff --git a/src/types.ts b/src/types.ts
index 0e44e81..df574f8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,17 +1,8 @@
 import { init } from "echarts/core";
 
 import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts/core";
-import type { Ref, ShallowRef, WritableComputedRef, ComputedRef } from "vue";
+import type { MaybeRefOrGetter } from "vue";
 
-export type MaybeRef<T = any> =
-  | T
-  | Ref<T>
-  | ShallowRef<T>
-  | WritableComputedRef<T>;
-export type MaybeRefOrGetter<T = any> =
-  | MaybeRef<T>
-  | ComputedRef<T>
-  | (() => T);
 export type Injection<T> = MaybeRefOrGetter<T | null>;
 
 type InitType = typeof init;
diff --git a/src/utils.ts b/src/utils.ts
index 2169a9e..4dc1e11 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,3 @@
-import type { MaybeRefOrGetter } from "./types";
-import { unref } from "vue";
-
 type Attrs = Record<string, any>;
 
 // Copied from
@@ -19,17 +16,6 @@ export function omitOn(attrs: Attrs): Attrs {
   return result;
 }
 
-// Copied from
-// https://github.com/vuejs/core/blob/3cb4db21efa61852b0541475b4ddf57fdec4c479/packages/shared/src/general.ts#L49-L50
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-const isFunction = (val: unknown): val is Function => typeof val === "function";
-
-// Copied from
-// https://github.com/vuejs/core/blob/3cb4db21efa61852b0541475b4ddf57fdec4c479/packages/reactivity/src/ref.ts#L246-L248
-export function toValue<T>(source: MaybeRefOrGetter<T>): T {
-  return isFunction(source) ? source() : unref(source);
-}
-
 export function isValidArrayIndex(key: string): boolean {
   const num = Number(key);
   return (

From f356f89bf73ff26760dab0b382d3925f92707f15 Mon Sep 17 00:00:00 2001
From: Yue JIN <yuejin13@qq.com>
Date: Thu, 24 Jul 2025 22:46:17 +0800
Subject: [PATCH 27/27] move slot related codes to slot.ts

---
 src/ECharts.ts          | 31 ++++++++++++-------------------
 src/composables/slot.ts | 11 ++++++++++-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/ECharts.ts b/src/ECharts.ts
index aa3982d..93739f0 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -13,7 +13,6 @@ import {
   toValue,
 } from "vue";
 import { init as initChart } from "echarts/core";
-import type { TooltipComponentFormatterCallbackParams } from "echarts";
 
 import {
   usePublicAPI,
@@ -22,12 +21,12 @@ import {
   useLoading,
   loadingProps,
   useSlotOption,
-  type PublicMethods,
 } from "./composables";
+import type { PublicMethods, SlotsTypes } from "./composables";
 import { isOn, omitOn } from "./utils";
 import { register, TAG_NAME } from "./wc";
 
-import type { PropType, InjectionKey, SlotsType } from "vue";
+import type { PropType, InjectionKey } from "vue";
 import type {
   EChartsType,
   SetOptionType,
@@ -67,13 +66,7 @@ export default defineComponent({
     ...loadingProps,
   },
   emits: {} as unknown as Emits,
-  slots: Object as SlotsType<
-    Record<
-      "tooltip" | `tooltip-${string}`,
-      TooltipComponentFormatterCallbackParams
-    > &
-      Record<"dataView" | `dataView-${string}`, Option>
-  >,
+  slots: Object as SlotsTypes,
   inheritAttrs: false,
   setup(props, { attrs, expose, slots }) {
     const root = shallowRef<EChartsElement>();
@@ -103,6 +96,15 @@ export default defineComponent({
     const listeners: Map<{ event: string; once?: boolean; zr?: boolean }, any> =
       new Map();
 
+    const { teleportedSlots, patchOption } = useSlotOption(slots, () => {
+      if (!manualUpdate.value && props.option && chart.value) {
+        chart.value.setOption(
+          patchOption(props.option),
+          realUpdateOptions.value,
+        );
+      }
+    });
+
     // We are converting all `on<Event>` props and collect them into `listeners` so that
     // we can bind them to the chart instance later.
     // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
@@ -294,15 +296,6 @@ export default defineComponent({
 
     useAutoresize(chart, autoresize, root);
 
-    const { teleportedSlots, patchOption } = useSlotOption(slots, () => {
-      if (!manualUpdate.value && props.option && chart.value) {
-        chart.value.setOption(
-          patchOption(props.option),
-          realUpdateOptions.value,
-        );
-      }
-    });
-
     onMounted(() => {
       init();
     });
diff --git a/src/composables/slot.ts b/src/composables/slot.ts
index f01b747..b355526 100644
--- a/src/composables/slot.ts
+++ b/src/composables/slot.ts
@@ -8,9 +8,10 @@ import {
   shallowReactive,
   warn,
 } from "vue";
-import type { Slots } from "vue";
+import type { Slots, SlotsType } from "vue";
 import type { Option } from "../types";
 import { isValidArrayIndex, isSameSet } from "../utils";
+import type { TooltipComponentFormatterCallbackParams } from "echarts";
 
 const SLOT_OPTION_PATHS = {
   tooltip: ["tooltip", "formatter"],
@@ -135,3 +136,11 @@ export function useSlotOption(slots: Slots, onSlotsChange: () => void) {
     patchOption,
   };
 }
+
+export type SlotsTypes = SlotsType<
+  Record<
+    "tooltip" | `tooltip-${string}`,
+    TooltipComponentFormatterCallbackParams
+  > &
+    Record<"dataView" | `dataView-${string}`, Option>
+>;