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 <[email protected]>

* feat: add dataView slot

* vibe docs

---------

Co-authored-by: GU Yiling <[email protected]>

Author: kingyue737

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/[email protected]"></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/[email protected]"></script>
 ```
 
@@ -331,47 +331,69 @@ 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**:
 
 - `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`
+- `dataView` → `option.toolbox.feature.dataView.optionToContent`
+- `dataView-media[1]-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
 <details>
 <summary>Usage</summary>
 
 ```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
 

README.zh-Hans.md

@@ -120,7 +120,7 @@ import "echarts";
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>
 ```
 
@@ -331,46 +331,68 @@ 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` 对象的属性名或数组索引（数组索引使用数字形式）。
+- 拼接后的插槽名称直接映射到要覆盖的嵌套回调函数。
 
 **示例映射**：
 
 - `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`
+- `dataView` → `option.toolbox.feature.dataView.optionToContent`
+- `dataView-media[1]-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
 
 <details>
 <summary>用法示例</summary>
 
 ```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` 中对应的回调函数。
 
 ### 静态方法
 

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;
 

demo/data/logo.js

@@ -20,10 +20,8 @@ export default {
       },
       shape: `path://${d}`,
       label: {
-        normal: {
-          formatter() {
-            return "";
-          },
+        formatter() {
+          return "";
         },
       },
       itemStyle: {

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" };

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>

package.json

@@ -21,7 +21,7 @@
     "docs": "node ./scripts/docs.mjs",
     "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].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",