feat: make css paddings work out-of-the-box

* add `throttle: number` to specify throttle delay (#419 #562)
* add `onResize: () => void` to specify a resize callback (#714)

.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "pnpm serve"
+}

CHANGELOG.md

@@ -1,3 +1,52 @@
+## 6.6.1
+
+* Make `padding` work out-of-the-box.
+
+## 6.6.0
+
+* Added support for `autoresize` accepting an options object to specify custom throttle delay or resize callback.
+
+## 6.5.5
+
+* Removed the custom element registration enhancement for strict CSP builds so that they won't contain `new Function`.
+
+## 6.5.4
+
+* Cleaned up the `console.log` call sneaked in by mistake.
+
+## 6.5.3
+
+* Fixed default behavior for `notMerge` option (#691).
+
+## 6.5.2
+
+* Added `dist/csp/*` to support strict CSP with extracted CSS file.
+
+## 6.5.1
+
+* Fixed types for mouse events.
+
+## 6.5.0
+
+* Use more precise typings for all event params.
+* Updated peer deps for `echarts` to `^5.4.1`.
+
+## 6.4.1
+
+* Improve typings for mouse event params.
+
+## 6.4.0
+
+* Delay the disposal of the ECharts instance to the moment the element is disconnected from the DOM if possible (#433).
+
+## 6.3.3
+
+* Make autoresize work for grid layout by default (#675).
+
+## 6.3.2
+
+* Added basic types for events (only event names).
+
 ## 6.3.1
 
 * Revert the style change to prevent tooltips from being clipped.

README.md

@@ -1,12 +1,12 @@
-# Vue-ECharts
+<h1 align="center">Vue-ECharts</h1>
 
-> Vue.js component for Apache ECharts.
+<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts <sup>(v5)</sup>.</p>
+<p align="center"><a href="https://vue-echarts.dev/">View Demo →</a></p>
+<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a><a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"> <img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
-> [🇨🇳 中文版](./README.zh-Hans.md)
+---
 
-Uses [Apache ECharts](https://echarts.apache.org/en/index.html) 5 and works for both [Vue.js](https://vuejs.org/) 2/3.
-
-## 💡 Heads up 💡
+<h2>💡 Heads up 💡 <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%F0%9F%87%A8%F0%9F%87%B3-%E4%B8%AD%E6%96%87%E7%89%88-white?labelColor=white" alt="前往中文版" align="right" height="24"/></a></h2>
 
 If you are migrating from `vue-echarts` ≤ 5, you should read the _[Migration to v6](#migration-to-v6)_ section before you update to v6.
 
@@ -20,13 +20,13 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
 $ npm install echarts vue-echarts
 ```
 
-To make `vue-echarts` work for *Vue 2* (<2.7.0), you need to have `@vue/composition-api` installed:
+To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
 
 ```sh
 npm i -D @vue/composition-api
 ```
 
-If you are using *NuxtJS* on top of *Vue 2* (<2.7.0), you'll also need `@nuxtjs/composition-api`:
+If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:
 
 ```sh
 npm i -D @nuxtjs/composition-api
@@ -34,87 +34,7 @@ npm i -D @nuxtjs/composition-api
 
 And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`.
 
-<details>
-<summary>Vue 3</summary>
-
-```js
-import { createApp } from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from "echarts/core"
-
-// import ECharts modules manually to reduce bundle size
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-])
-
-const app = createApp(...)
-
-// register globally (or you can do it locally)
-app.component('v-chart', ECharts)
-
-app.mount(...)
-```
-
-</details>
-
-<details>
-<summary>Vue 2</summary>
-
-```js
-import Vue from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from 'echarts/core'
-
-// import ECharts modules manually to reduce bundle size
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-]);
-
-// register globally (or you can do it locally)
-Vue.component('v-chart', ECharts)
-
-new Vue(...)
-```
-
-</details>
-
-We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
-
-But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
-
-```js
-import "echarts";
-```
-
-#### SFC example
+#### Example
 
 <details>
 <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
@@ -124,7 +44,7 @@ import "echarts";
   <v-chart class="chart" :option="option" />
 </template>
 
-<script>
+<script setup>
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
@@ -134,7 +54,7 @@ import {
   LegendComponent
 } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
-import { ref, defineComponent } from "vue";
+import { ref, provide } from "vue";
 
 use([
   CanvasRenderer,
@@ -144,55 +64,44 @@ use([
   LegendComponent
 ]);
 
-export default defineComponent({
-  name: "HelloWorld",
-  components: {
-    VChart
-  },
-  provide: {
-    [THEME_KEY]: "dark"
-  },
-  setup () {
-    const option = ref({
-      title: {
-        text: "Traffic Sources",
-        left: "center"
-      },
-      tooltip: {
-        trigger: "item",
-        formatter: "{a} <br/>{b} : {c} ({d}%)"
-      },
-      legend: {
-        orient: "vertical",
-        left: "left",
-        data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
-      },
-      series: [
-        {
-          name: "Traffic Sources",
-          type: "pie",
-          radius: "55%",
-          center: ["50%", "60%"],
-          data: [
-            { value: 335, name: "Direct" },
-            { value: 310, name: "Email" },
-            { value: 234, name: "Ad Networks" },
-            { value: 135, name: "Video Ads" },
-            { value: 1548, name: "Search Engines" }
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)"
-            }
-          }
-        }
-      ]
-    });
+provide(THEME_KEY, "dark");
 
-    return { option };
-  }
+const option = ref({
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
 });
 </script>
 
@@ -299,6 +208,14 @@ export default {
 
 </details>
 
+We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
+
+But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
+
+```js
+import "echarts";
+```
+
 ### CDN & Global variable
 
 Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
@@ -308,9 +225,9 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -329,8 +246,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -373,9 +290,9 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/dem
 
   Group name to be used in chart [connection](https://echarts.apache.org/en/api.html#echarts.connect). See `echartsInstance.group` [here →](https://echarts.apache.org/en/api.html#echartsInstance.group)
 
-- `autoresize: boolean` (default: `false`)
+- `autoresize: boolean | { throttle?: number, onResize?: () => void }` (default: `false`)
 
-  Whether the chart should be resized automatically whenever its root is resized.
+  Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.
 
 - `loading: boolean` (default: `false`)
 
@@ -448,6 +365,7 @@ import { THEME_KEY } from 'vue-echarts'
 >   }
 > }
 > ```
+
 </details>
 
 ### Methods
@@ -479,7 +397,7 @@ You can bind events with Vue's `v-on` directive.
 
 ```vue
 <template>
-  <v-chart :option="option" @highlight="handleHighlight"/>
+  <v-chart :option="option" @highlight="handleHighlight" />
 </template>
 ```
 
@@ -535,6 +453,10 @@ Vue-ECharts support the following events:
 
 See supported events [here →](https://echarts.apache.org/en/api.html#events)
 
+## CSP: `style-src` or `style-src-elem`
+
+If you are applying a CSP to prevent inline `<style>` injection, you need to use files from `dist/csp` directory and include `dist/csp/style.css` into your app manually.
+
 ## Migration to v6
 
 > 💡 Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well.

README.zh-Hans.md

@@ -1,8 +1,10 @@
-# Vue-ECharts
+<h1 align="center">Vue-ECharts</h1>
 
-> Apache ECharts 的 Vue.js 组件。
+<p align="center">Apache ECharts <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
+<p align="center"><a href="https://vue-echarts.dev/">查看 Demo →</a></p>
+<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a><a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"> <img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
-使用 [Apache ECharts](https://echarts.apache.org/zh/index.html) 5，同时支持 [Vue.js](https://vuejs.org/) 2/3。
+---
 
 ## 💡 注意 💡
 
@@ -18,13 +20,13 @@
 $ npm install echarts vue-echarts
 ```
 
-要在 *Vue 2*（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
+要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
 
 ```sh
 npm i -D @vue/composition-api
 ```
 
-如果你在使用基于 *Vue 2*（<2.7.0）的 *NuxtJS*，那么还需要安装 `@nuxtjs/composition-api`：
+如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
 
 ```sh
 npm i -D @nuxtjs/composition-api
@@ -32,87 +34,7 @@ npm i -D @nuxtjs/composition-api
 
 然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。
 
-<details>
-<summary>Vue 3</summary>
-
-```js
-import { createApp } from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from "echarts/core";
-
-// 手动引入 ECharts 各模块来减小打包体积
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-]);
-
-const app = createApp(...)
-
-// 全局注册组件（也可以使用局部注册）
-app.component('v-chart', ECharts)
-
-app.mount(...)
-```
-
-</details>
-
-<details>
-<summary>Vue 2</summary>
-
-```js
-import Vue from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from 'echarts/core'
-// 手动引入 ECharts 各模块来减小打包体积
-
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-]);
-
-// 全局注册组件（也可以使用局部注册）
-Vue.component('v-chart', ECharts)
-
-new Vue(...)
-```
-
-</details>
-
-为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
-
-但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
-
-```js
-import "echarts";
-```
-
-#### 单文件组件示例
+#### 示例
 
 <details>
 <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
@@ -122,7 +44,7 @@ import "echarts";
   <v-chart class="chart" :option="option" />
 </template>
 
-<script>
+<script setup>
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
@@ -132,7 +54,7 @@ import {
   LegendComponent
 } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
-import { ref, defineComponent } from "vue";
+import { ref, provide } from "vue";
 
 use([
   CanvasRenderer,
@@ -142,55 +64,44 @@ use([
   LegendComponent
 ]);
 
-export default defineComponent({
-  name: "HelloWorld",
-  components: {
-    VChart
-  },
-  provide: {
-    [THEME_KEY]: "dark"
-  },
-  setup: () => {
-    const option = ref({
-      title: {
-        text: "Traffic Sources",
-        left: "center"
-      },
-      tooltip: {
-        trigger: "item",
-        formatter: "{a} <br/>{b} : {c} ({d}%)"
-      },
-      legend: {
-        orient: "vertical",
-        left: "left",
-        data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
-      },
-      series: [
-        {
-          name: "Traffic Sources",
-          type: "pie",
-          radius: "55%",
-          center: ["50%", "60%"],
-          data: [
-            { value: 335, name: "Direct" },
-            { value: 310, name: "Email" },
-            { value: 234, name: "Ad Networks" },
-            { value: 135, name: "Video Ads" },
-            { value: 1548, name: "Search Engines" }
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)"
-            }
-          }
-        }
-      ]
-    });
+provide(THEME_KEY, "dark");
 
-    return { option };
-  }
+const option = ref({
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
 });
 </script>
 
@@ -297,6 +208,14 @@ export default {
 
 </details>
 
+为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
+
+但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
+
+```js
+import "echarts";
+```
+
 ### CDN & 全局变量
 
 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
@@ -304,12 +223,11 @@ export default {
 <details>
 <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
 
-
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -328,8 +246,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -372,9 +290,9 @@ Vue.component("v-chart", VueECharts);
 
   图表的分组，用于[联动](https://echarts.apache.org/zh/api.html#echarts.connect)。请参考 `echartsInstance.group`。[前往 →](https://echarts.apache.org/zh/api.html#echartsInstance.group)
 
-- `autoresize: boolean`（默认值`false`）
+- `autoresize: boolean | { throttle?: number, onResize?: () => void }`（默认值`false`）
 
-  图表在组件根元素尺寸变化时是否需要自动进行重绘。
+  图表在组件根元素尺寸变化时是否需要自动进行重绘。也可以传入一个选项对象来指定自定义的节流延迟和尺寸变化时的额外回调函数。
 
 - `loading: boolean`（默认值：`false`）
 
@@ -396,7 +314,7 @@ Vue.component("v-chart", VueECharts);
 
 ```vue
 <template>
-  <v-chart :option="option" @highlight="handleHighlight"/>
+  <v-chart :option="option" @highlight="handleHighlight" />
 </template>
 ```
 
@@ -509,6 +427,7 @@ import { THEME_KEY } from 'vue-echarts'
 >   }
 > }
 > ```
+
 </details>
 
 ### 方法
@@ -534,6 +453,10 @@ import { THEME_KEY } from 'vue-echarts'
 
 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。
 
+## CSP: `style-src` 或 `style-src-elem`
+
+如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `dist/csp` 目录中的文件，并手动引入 `dist/csp/style.css`。
+
 ## 迁移到 v6
 
 > 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.3.1",
+  "version": "6.6.1",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -10,9 +10,9 @@
     "build:3": "vue-demi-switch 3 && rollup -c rollup.config.js",
     "lint": "vue-cli-service lint",
     "build:demo": "vue-cli-service build",
-    "docs": "node -r esm ./scripts/docs.js",
+    "docs": "node ./scripts/docs.js",
     "postinstall": "node ./scripts/postinstall.js",
-    "prepare": "pnpm run build"
+    "prepublishOnly": "pnpm run build"
   },
   "main": "dist/index.cjs.min.js",
   "module": "dist/index.esm.min.js",
@@ -23,51 +23,53 @@
   ],
   "dependencies": {
     "resize-detector": "^0.3.0",
-    "vue-demi": "^0.13.2"
+    "vue-demi": "^0.13.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/compiler-sfc": "^3.2.33",
-    "@vue/composition-api": "^1.7.0",
+    "@babel/core": "^7.22.9",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vercel/analytics": "^1.0.1",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/composition-api": "^1.7.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "comment-mark": "^1.0.0",
-    "core-js": "^3.23.0",
-    "echarts": "^5.3.2",
+    "comment-mark": "^1.1.1",
+    "core-js": "^3.32.0",
+    "echarts": "^5.4.3",
     "echarts-liquidfill": "^3.1.0",
-    "eslint": "^7.20.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^8.7.1",
-    "esm": "^3.2.25",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.0.0",
-    "postcss-nested": "^5.0.5",
-    "prettier": "^2.6.2",
-    "qs": "^6.10.5",
+    "pinia": "^2.1.6",
+    "postcss": "^8.4.27",
+    "postcss-loader": "^5.3.0",
+    "postcss-nested": "^5.0.6",
+    "prettier": "^2.8.8",
+    "qs": "^6.11.2",
     "raw-loader": "^4.0.2",
     "resize-detector": "^0.3.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.72.1",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-ts": "^2.0.7",
-    "tslib": "^2.4.0",
+    "tslib": "^2.6.1",
     "typescript": "4.6.4",
-    "vue": "^3.2.33",
+    "vue": "^3.3.4",
     "vue2": "npm:vue@^2.7.14",
-    "webpack": "^5.72.1"
+    "webpack": "^5.88.2"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.5",
-    "echarts": "^5.1.2",
+    "echarts": "^5.4.1",
     "vue": "^2.6.12 || ^3.1.1"
   },
   "jsdelivr": "dist/index.umd.min.js",

rollup.config.js

@@ -1,11 +1,42 @@
 import typescript from "rollup-plugin-ts";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
 import styles from "rollup-plugin-styles";
 import { injectVueDemi } from "./scripts/rollup";
 
+/**
+ * Modifies the Rollup options for a build to support strict CSP
+ * @param {import('rollup').RollupOptions} options the original options
+ * @param {boolean} csp whether to support strict CSP
+ * @returns {import('rollup').RollupOptions} the modified options
+ */
+function configBuild(options, csp) {
+  const result = { ...options };
+  const { plugins, output } = result;
+
+  result.plugins = [
+    ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
+    ...plugins,
+    csp ? styles({ mode: ["extract", "style.css"] }) : styles()
+  ];
+
+  // modify output file names
+  if (csp && output) {
+    result.output = (Array.isArray(output) ? output : [output]).map(output => {
+      return {
+        ...output,
+        file: output.file.replace(/^dist\//, "dist/csp/"),
+        assetFileNames: "[name][extname]"
+      };
+    });
+  }
+
+  return result;
+}
+
 /** @type {import('rollup').RollupOptions[]} */
-const options = [
+const builds = [
   {
     input: "src/index.ts",
     plugins: [
@@ -15,8 +46,7 @@ const options = [
           outputPath: (path, kind) =>
             kind === "declaration" ? "dist/index.d.ts" : path
         }
-      }),
-      styles()
+      })
     ],
     external: ["vue-demi", "echarts/core", "resize-detector"],
     output: {
@@ -27,7 +57,7 @@ const options = [
   },
   {
     input: "src/index.ts",
-    plugins: [typescript(), styles()],
+    plugins: [typescript()],
     external: ["vue-demi", "echarts/core", "resize-detector"],
     output: [
       {
@@ -65,7 +95,7 @@ const options = [
   },
   {
     input: "src/global.ts",
-    plugins: [resolve(), typescript(), styles()],
+    plugins: [resolve(), typescript()],
     external: ["vue-demi", "echarts", "echarts/core"],
     output: [
       {
@@ -105,4 +135,7 @@ const options = [
   }
 ];
 
-export default options;
+export default [
+  ...builds.map(options => configBuild(options, false)),
+  ...builds.map(options => configBuild(options, true))
+];

scripts/docs.js

@@ -1,16 +1,18 @@
-import fs from "fs";
-import { resolve } from "path";
-import commentMark from "comment-mark";
-import { name, version } from "../package.json";
+const { readFileSync, writeFileSync } = require("fs");
+const { resolve } = require("path");
+const commentMark = require("comment-mark");
+const { name, version } = require("../package.json");
 
-const { readFile, writeFile } = fs.promises;
+function resolvePath(...parts) {
+  return resolve(__dirname, ...parts);
+}
 
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
-  "vue@3": "3.2.37",
-  "vue@2": "2.7.5",
-  echarts: "5.3.3",
+  "vue@3": "3.3.4",
+  "vue@2": "2.7.14",
+  echarts: "5.4.3",
   [name]: version
 };
 
@@ -39,29 +41,20 @@ const scripts = {
 };
 
 const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
-  resolve(__dirname, "..", name)
+  resolvePath("..", name)
 );
 
-function exec() {
-  return Promise.all(
-    README_FILES.map(async file => {
-      const content = await readFile(file, "utf8");
+README_FILES.forEach(file => {
+  const content = readFileSync(file, "utf8");
 
-      return writeFile(
-        file,
-        commentMark(content, {
-          vue2Scripts: getCodeBlock(scripts[2]),
-          vue3Scripts: getCodeBlock(scripts[3])
-        }),
-        "utf8"
-      );
-    })
+  writeFileSync(
+    file,
+    commentMark(content, {
+      vue2Scripts: getCodeBlock(scripts[2]),
+      vue3Scripts: getCodeBlock(scripts[3])
+    }),
+    "utf8"
   );
-}
+});
 
-async function main() {
-  await exec();
-  console.log("README files updated.");
-}
-
-main();
+console.log("README files updated.");

scripts/sandbox/.eslintrc.json

@@ -1,6 +0,0 @@
-{
-  "globals": {
-    "Vue": true,
-    "VueECharts": true
-  }
-}

scripts/sandbox/index.css

@@ -1,3 +0,0 @@
-#app {
-  height: 400px;
-}

scripts/sandbox/index.html

@@ -1,3 +0,0 @@
-<div id="app">
-  <v-chart autoresize :option="option"/>
-</div>

scripts/sandbox/vue2.js

@@ -1,55 +0,0 @@
-Vue.component("v-chart", VueECharts);
-
-new Vue({
-  el: "#app",
-  data() {
-    return {
-      option: {
-        textStyle: {
-          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-        },
-        title: {
-          text: "Traffic Sources",
-          left: "center"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: [
-            "Direct",
-            "Email",
-            "Ad Networks",
-            "Video Ads",
-            "Search Engines"
-          ]
-        },
-        series: [
-          {
-            name: "Traffic Sources",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            data: [
-              { value: 335, name: "Direct" },
-              { value: 310, name: "Email" },
-              { value: 234, name: "Ad Networks" },
-              { value: 135, name: "Video Ads" },
-              { value: 1548, name: "Search Engines" }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      }
-    };
-  }
-});

scripts/sandbox/vue3.js

@@ -1,54 +0,0 @@
-Vue.createApp({
-  data() {
-    return {
-      option: {
-        textStyle: {
-          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-        },
-        title: {
-          text: "Traffic Sources",
-          left: "center"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: [
-            "Direct",
-            "Email",
-            "Ad Networks",
-            "Video Ads",
-            "Search Engines"
-          ]
-        },
-        series: [
-          {
-            name: "Traffic Sources",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            data: [
-              { value: 335, name: "Direct" },
-              { value: 310, name: "Email" },
-              { value: 234, name: "Ad Networks" },
-              { value: 135, name: "Video Ads" },
-              { value: 1548, name: "Search Engines" }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      }
-    };
-  }
-})
-  .component("v-chart", VueECharts)
-  .mount("#app");

src/ECharts.ts

@@ -8,7 +8,7 @@ import {
   computed,
   inject,
   onMounted,
-  onUnmounted,
+  onBeforeUnmount,
   h,
   nextTick,
   watchEffect,
@@ -27,7 +27,8 @@ import type {
   InitOptions,
   InitOptionsInjection,
   UpdateOptions,
-  UpdateOptionsInjection
+  UpdateOptionsInjection,
+  Emits
 } from "./types";
 import {
   usePublicAPI,
@@ -37,9 +38,11 @@ import {
   loadingProps
 } from "./composables";
 import { omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";
 
-const TAG_NAME = "x-vue-echarts";
+const __CSP__ = false;
+const wcRegistered = __CSP__ ? false : register();
 
 if (Vue2) {
   Vue2.config.ignoredElements.push(TAG_NAME);
@@ -66,9 +69,11 @@ export default defineComponent({
     ...autoresizeProps,
     ...loadingProps
   },
+  emits: {} as unknown as Emits,
   inheritAttrs: false,
   setup(props, { attrs }) {
-    const root = shallowRef<HTMLElement>();
+    const root = shallowRef<EChartsElement>();
+    const inner = shallowRef<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
     const defaultTheme = inject(THEME_KEY, null);
@@ -95,12 +100,12 @@ export default defineComponent({
     const listeners = getCurrentInstance().proxy.$listeners;
 
     function init(option?: Option) {
-      if (!root.value) {
+      if (!inner.value) {
         return;
       }
 
       const instance = (chart.value = initChart(
-        root.value,
+        inner.value,
         realTheme.value,
         realInitOptions.value
       ));
@@ -230,7 +235,9 @@ export default defineComponent({
                 init();
               } else {
                 chart.value.setOption(option, {
-                  notMerge: option.value !== oldOption?.value,
+                  // mutating `option` will lead to `notMerge: false` and
+                  // replacing it with new reference will lead to `notMerge: true`
+                  notMerge: option !== oldOption,
                   ...realUpdateOptions.value
                 });
               }
@@ -265,17 +272,28 @@ export default defineComponent({
 
     useLoading(chart, loading, loadingOptions);
 
-    useAutoresize(chart, autoresize, root);
+    useAutoresize(chart, autoresize, inner);
 
     onMounted(() => {
       init();
     });
 
-    onUnmounted(cleanup);
+    onBeforeUnmount(() => {
+      if (wcRegistered && root.value) {
+        // For registered web component, we can leverage the
+        // `disconnectedCallback` to dispose the chart instance
+        // so that we can delay the cleanup after exsiting leaving
+        // transition.
+        root.value.__dispose = cleanup;
+      } else {
+        cleanup();
+      }
+    });
 
     return {
       chart,
       root,
+      inner,
       setOption,
       nonEventAttrs,
       ...publicApi
@@ -289,6 +307,6 @@ export default defineComponent({
     ) as any;
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
-    return h(TAG_NAME, attrs);
+    return h(TAG_NAME, attrs, [h("div", { ref: "inner" })]);
   }
 });

src/composables/api.ts

@@ -20,7 +20,7 @@ const METHOD_NAMES = [
   "dispose"
 ] as const;
 
-type MethodName = typeof METHOD_NAMES[number];
+type MethodName = (typeof METHOD_NAMES)[number];
 
 type PublicMethods = Pick<EChartsType, MethodName>;
 

src/composables/autoresize.ts

@@ -1,26 +1,42 @@
-import { Ref, watch } from "vue-demi";
+import { watch, type Ref, type PropType } from "vue-demi";
 import { throttle } from "echarts/core";
-import { addListener, removeListener, ResizeCallback } from "resize-detector";
-import { EChartsType } from "../types";
+import {
+  addListener,
+  removeListener,
+  type ResizeCallback
+} from "resize-detector";
+import { type EChartsType } from "../types";
+
+type AutoresizeProp =
+  | boolean
+  | {
+      throttle?: number;
+      onResize?: () => void;
+    };
 
 export function useAutoresize(
   chart: Ref<EChartsType | undefined>,
-  autoresize: Ref<boolean>,
+  autoresize: Ref<AutoresizeProp | undefined>,
   root: Ref<HTMLElement | undefined>
 ): void {
   let resizeListener: ResizeCallback | null = null;
 
   watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
     if (root && chart && autoresize) {
-      resizeListener = throttle(() => {
-        chart.resize();
-      }, 100);
+      const autoresizeOptions = autoresize === true ? {} : autoresize;
+      const { throttle: wait = 100, onResize } = autoresizeOptions;
 
+      const callback = () => {
+        chart.resize();
+        onResize?.();
+      };
+
+      resizeListener = wait ? throttle(callback, wait) : callback;
       addListener(root, resizeListener);
     }
 
     cleanup(() => {
-      if (resizeListener && root) {
+      if (root && resizeListener) {
         removeListener(root, resizeListener);
       }
     });
@@ -28,5 +44,5 @@ export function useAutoresize(
 }
 
 export const autoresizeProps = {
-  autoresize: Boolean
+  autoresize: [Boolean, Object] as PropType<AutoresizeProp>
 };

src/composables/loading.ts

@@ -4,21 +4,20 @@ import {
   computed,
   watchEffect,
   type Ref,
-  type InjectionKey
+  type InjectionKey,
+  type PropType
 } from "vue-demi";
-import { EChartsType } from "../types";
+import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =
   "ecLoadingOptions" as unknown as InjectionKey<
-    UnknownRecord | Ref<UnknownRecord>
+    LoadingOptions | Ref<LoadingOptions>
   >;
 
-type UnknownRecord = Record<string, unknown>;
-
 export function useLoading(
   chart: Ref<EChartsType | undefined>,
   loading: Ref<boolean>,
-  loadingOptions: Ref<UnknownRecord | undefined>
+  loadingOptions: Ref<LoadingOptions | undefined>
 ): void {
   const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
   const realLoadingOptions = computed(() => ({
@@ -42,5 +41,5 @@ export function useLoading(
 
 export const loadingProps = {
   loading: Boolean,
-  loadingOptions: Object
+  loadingOptions: Object as PropType<LoadingOptions>
 };

src/demo/Demo.vue

@@ -165,8 +165,8 @@
       </p>
     </section>
 
-    <!-- <h2 id="radar">
-      <a href="#radar">Radar chart <small>(with Vuex integration)</small></a>
+    <h2 id="radar">
+      <a href="#radar">Radar chart <small>(with Pinia integration)</small></a>
       <button
         :class="{
           round: true,
@@ -179,20 +179,35 @@
     <section v-if="expand.radar">
       <figure>
         <v-chart
-        class="echarts" :option="scoreRadar" :init-options="initOptions" autoresize />
+          :option="getRadarData(metricIndex)"
+          :init-options="initOptions"
+          autoresize
+        />
       </figure>
       <p>
         <select v-model="metricIndex">
-          <option v-for="(metric, index) in metrics" :value="index" :key="index"
-            >{{ metric }}
+          <option
+            v-for="(metric, index) in metrics"
+            :value="index"
+            :key="index"
+          >
+            {{ metric }}
           </option>
         </select>
-        <button @click="increase(1)" :disabled="isMax">Increase</button>
-        <button @click="increase(-1)" :disabled="isMin">Decrease</button>
-        <input id="async" type="checkbox" v-model="asyncCount" />
-        <label for="async">Async</label>
+        <button
+          @click="increase(metricIndex, 1)"
+          :disabled="isMax(metricIndex)"
+        >
+          Increase
+        </button>
+        <button
+          @click="increase(metricIndex, -1)"
+          :disabled="isMin(metricIndex)"
+        >
+          Decrease
+        </button>
       </p>
-    </section>-->
+    </section>
 
     <h2 id="connect">
       <a href="#connect">Connectable charts</a>
@@ -334,6 +349,7 @@ import {
 } from "echarts/components";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import "echarts-liquidfill";
+import { mapState, mapActions } from "pinia";
 import logo from "./data/logo";
 import getBar from "./data/bar";
 import pie from "./data/pie";
@@ -341,6 +357,7 @@ import polar from "./data/polar";
 import scatter from "./data/scatter";
 import map from "./data/map";
 import { c1, c2 } from "./data/connect";
+import { useScoreStore } from "./store";
 
 // custom theme
 import theme from "./theme.json";
@@ -434,6 +451,15 @@ export default {
       }
     };
   },
+  computed: {
+    autoresize() {
+      return { throttle: 200, onResize: this.handleResize };
+    },
+    ...mapState(useScoreStore, ["scores"]),
+    metrics() {
+      return this.scores.map(({ name }) => name);
+    }
+  },
   methods: {
     handleClick(...args) {
       console.log("click from echarts", ...args);
@@ -441,6 +467,9 @@ export default {
     handleZrClick(...args) {
       console.log("click from zrender", ...args);
     },
+    handleResize() {
+      console.log("resize");
+    },
     refresh() {
       // simulating async data from server
       this.seconds = 3;
@@ -566,7 +595,8 @@ export default {
     },
     stopActions() {
       clearInterval(this.actionTimer);
-    }
+    },
+    ...mapActions(useScoreStore, ["getRadarData", "increase", "isMax", "isMin"])
   },
   watch: {
     connected: {

src/demo/main.ts

@@ -1,4 +1,11 @@
+import { inject } from "@vercel/analytics";
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import Demo from "./Demo.vue";
 
-createApp(Demo).mount("#app");
+inject();
+
+const pinia = createPinia();
+const app = createApp(Demo);
+app.use(pinia);
+app.mount("#app");

src/demo/store.ts

@@ -0,0 +1,76 @@
+import { defineStore } from "pinia";
+
+export const useScoreStore = defineStore("score", {
+  state: () => {
+    return {
+      scores: [
+        { name: "Attack", max: 20, value: 19 },
+        { name: "Defense", max: 20, value: 9 },
+        { name: "Speed", max: 20, value: 18 },
+        { name: "Strength", max: 20, value: 16 },
+        { name: "Endurance", max: 20, value: 16 },
+        { name: "Agility", max: 20, value: 20 }
+      ],
+      index: 0
+    };
+  },
+  getters: {
+    scoreRadar({ scores }) {
+      return {
+        title: {
+          text: "Player Ability"
+        },
+        tooltip: {},
+        radar: {
+          indicator: scores.map(({ name, max }) => {
+            return { name, max };
+          })
+        },
+        series: [
+          {
+            name: "Value",
+            type: "radar",
+            data: [{ value: scores.map(({ value }) => value) }]
+          }
+        ]
+      };
+    }
+  },
+  actions: {
+    getRadarData(activeIndex: number) {
+      return {
+        animation: false,
+        title: {
+          text: "Player Ability"
+        },
+        tooltip: {},
+        radar: {
+          indicator: this.scores.map(({ name, max }, index) => {
+            if (index === activeIndex) {
+              return { name, max, color: "goldenrod" };
+            }
+            return { name, max };
+          })
+        },
+        series: [
+          {
+            name: "Value",
+            type: "radar",
+            data: [{ value: this.scores.map(({ value }) => value) }]
+          }
+        ]
+      };
+    },
+    increase(index: number, amount: number) {
+      const metric = this.scores[index];
+      metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    },
+    isMax(index: number) {
+      const { value, max } = this.scores[index];
+      return value === max;
+    },
+    isMin(index: number) {
+      return this.scores[index].value === 0;
+    }
+  }
+});

src/index.vue2.d.ts

@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import type { Ref, DefineComponent } from "vue-demi";
-import type { Option, InitOptions, UpdateOptions, EChartsType } from "./types";
+import type {
+  Option,
+  InitOptions,
+  UpdateOptions,
+  EChartsType,
+  Emits
+} from "./types";
 
 declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
 declare const THEME_KEY = "ecTheme";
@@ -47,7 +53,10 @@ declare const Chart: DefineComponent<
   },
   {},
   {},
-  ChartMethods
+  ChartMethods,
+  {},
+  {},
+  Emits
 >;
 
 export default Chart;

src/style.css

@@ -1 +1 @@
-x-vue-echarts{display:block;width:100%;height:100%}
+x-vue-echarts{display:block;width:100%;height:100%;min-width:0}x-vue-echarts>div{width:100%;height:100%}

src/types.ts

@@ -1,4 +1,9 @@
-import { init, type SetOptionOpts } from "echarts/core";
+import {
+  init,
+  type SetOptionOpts,
+  type ECElementEvent,
+  type ElementEvent
+} from "echarts/core";
 import type { Ref } from "vue";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
@@ -19,3 +24,89 @@ type ZRenderType = ReturnType<EChartsType["getZr"]>;
 export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
+
+export type LoadingOptions = {
+  text?: string;
+  textColor?: string;
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  fontStyle?: string;
+  fontFamily?: string;
+  maskColor?: string;
+  showSpinner?: boolean;
+  color?: string;
+  spinnerRadius?: number;
+  lineWidth?: number;
+  zlevel?: number;
+};
+
+type MouseEventName =
+  | "click"
+  | "dblclick"
+  | "mouseout"
+  | "mouseover"
+  | "mouseup"
+  | "mousedown"
+  | "mousemove"
+  | "contextmenu"
+  | "globalout";
+
+type ElementEventName =
+  | MouseEventName
+  | "mousewheel"
+  | "drag"
+  | "dragstart"
+  | "dragend"
+  | "dragenter"
+  | "dragleave"
+  | "dragover"
+  | "drop";
+
+type ZRenderEventName = `zr:${ElementEventName}`;
+
+type OtherEventName =
+  | "highlight"
+  | "downplay"
+  | "selectchanged"
+  | "legendselectchanged"
+  | "legendselected"
+  | "legendunselected"
+  | "legendselectall"
+  | "legendinverseselect"
+  | "legendscroll"
+  | "datazoom"
+  | "datarangeselected"
+  | "graphroam"
+  | "georoam"
+  | "treeroam"
+  | "timelinechanged"
+  | "timelineplaychanged"
+  | "restore"
+  | "dataviewchanged"
+  | "magictypechanged"
+  | "geoselectchanged"
+  | "geoselected"
+  | "geounselected"
+  | "axisareaselected"
+  | "brush"
+  | "brushEnd"
+  | "brushselected"
+  | "globalcursortaken";
+
+type MouseEmits = {
+  [key in MouseEventName]: (params: ECElementEvent) => boolean;
+};
+
+type ZRenderEmits = {
+  [key in ZRenderEventName]: (params: ElementEvent) => boolean;
+};
+
+type OtherEmits = {
+  [key in OtherEventName]: null;
+};
+
+export type Emits = MouseEmits &
+  OtherEmits & {
+    rendered: (params: { elapsedTime: number }) => boolean;
+    finished: () => boolean;
+  } & ZRenderEmits;

src/wc.ts

@@ -0,0 +1,51 @@
+let registered: boolean | null = null;
+
+export const TAG_NAME = "x-vue-echarts";
+
+export interface EChartsElement extends HTMLElement {
+  __dispose: (() => void) | null;
+}
+
+export function register(): boolean {
+  if (registered != null) {
+    return registered;
+  }
+
+  if (
+    typeof HTMLElement === "undefined" ||
+    typeof customElements === "undefined"
+  ) {
+    return (registered = false);
+  }
+
+  try {
+    // Class definitions cannot be transpiled to ES5
+    // so we are doing a little trick here to ensure
+    // we are using native classes. As we use this as
+    // a progressive enhancement, it will be fine even
+    // if the browser doesn't support native classes.
+    const reg = new Function(
+      "tag",
+      `class EChartsElement extends HTMLElement {
+  __dispose = null;
+
+  disconnectedCallback() {
+    if (this.__dispose) {
+      this.__dispose();
+      this.__dispose = null;
+    }
+  }
+}
+
+if (customElements.get(tag) == null) {
+  customElements.define(tag, EChartsElement);
+}
+`
+    );
+    reg(TAG_NAME);
+  } catch (e) {
+    return (registered = false);
+  }
+
+  return (registered = true);
+}

vue.config.js

@@ -21,5 +21,15 @@ module.exports = {
       .test(/\.svg$/)
       .use("raw-loader")
       .loader("raw-loader");
+
+    config.plugin("define").tap(([options]) => [
+      {
+        ...options,
+        __CSP__: "false"
+      }
+    ]);
+  },
+  devServer: {
+    allowedHosts: "all"
   }
 };