docs: update csp usage docs

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.3 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    ecmaVersion: 2020,
-    parser: "@typescript-eslint/parser"
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "vue/multi-word-component-names": "off"
-  },
-  overrides: [
-    {
-      files: ["*.ts"],
-      extends: [
-        "@vue/typescript/recommended",
-        "@vue/prettier/@typescript-eslint"
-      ]
-    }
-  ]
-};

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier/skip-formatting"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "parser": "@typescript-eslint/parser"
+  },
+  "rules": {
+    "no-console": "off",
+    "vue/multi-word-component-names": "off"
+  }
+}

CHANGELOG.md

@@ -1,3 +1,65 @@
+## 7.0.0-beta.0
+
+* Upgraded to ESM.
+* Removed the `postinstall` script.
+* API remains the same.
+
+### Breaking changes
+
+* Dropped support for browsers without `ResizeObserver`. Can work with [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill).
+* Dropped support for Vue < 2.7.
+* Dropped CJS outputs.
+* Dropped extra wrapper element so that you should no longer set `padding` on the component root.
+* For strict CSP usage, `vue-echarts/csp` should now be used as the entry point and `vue-echarts/csp/style.css` should be included manually.
+
+## 6.7.3
+
+* Fixed that `padding` on the component root doesn't work.
+
+## 6.7.2
+
+* Fixed that charts inside `<keep-alive>` failed to display after activation.
+
+## 6.7.1
+
+* Fixed that native events won't actually trigger.
+
+## 6.7.0
+
+* Added supports for native DOM events binding with the `native:` prefix.
+
+## 6.6.10
+
+* Fixed that `autoresize` doesn't work when reducing the height or the root element.
+
+## 6.6.9
+
+* Fixed that the chart may not be the same size as the component root element ([#761](https://github.com/ecomfe/vue-echarts/issues/761)).
+
+## 6.6.8
+
+* Fixed the postinstall script to patch the correct `types` entry for Vue 2.7.
+
+## 6.6.7
+
+* Added missing type file for Vue 2.7.
+
+## 6.6.6
+
+* Fixed types for Vue < 2.7.
+
+## 6.6.5
+
+* Fixed type for `option` regressed in v6.6.2.
+
+## 6.6.4
+
+* Fixed style regression introduced by v6.6.3.
+
+## 6.6.3
+
+* Fixed inner wrapper styles.
+
 ## 6.6.2
 
 * Fixed that tooltips may affected by internal styling by VueECharts.

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts <sup>(v5)</sup>.</p>
+<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>
 
@@ -13,34 +13,18 @@
 
 ---
 
-<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>
+<h2>💡 Heads up 💡 <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88-20c3aa" 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.
-
-Not ready yet? Read documentation for older versions [here →](https://github.com/ecomfe/vue-echarts/tree/5.x)
+Still using v6? Read v6 docs [here →](https://github.com/ecomfe/vue-echarts/tree/6.x)
 
 ## Installation & Usage
 
-### npm & ESM
-
-```bash
-npm install echarts vue-echarts
-```
-
-To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
+### npm
 
 ```sh
-npm i @vue/composition-api
+npm add echarts vue-echarts
 ```
 
-If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:
-
-```sh
-npm i @nuxtjs/composition-api
-```
-
-And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`.
-
 #### Example
 
 <details>
@@ -226,7 +210,7 @@ But if you really want to import the whole ECharts bundle without having to impo
 import "echarts";
 ```
 
-### CDN & Global variable
+### CDN
 
 Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
 
@@ -235,9 +219,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.3.7"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -255,9 +239,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -318,6 +302,78 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/dem
 
   For performance critical scenarios (having a large dataset) we'd better bypass Vue's reactivity system for `option` prop. By specifying `manual-update` prop with `true` and not providing `option` prop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance with `ref` and manually call `setOption` method to update the chart.
 
+### Events
+
+You can bind events with Vue's `v-on` directive.
+
+```vue
+<template>
+  <v-chart :option="option" @highlight="handleHighlight" />
+</template>
+```
+
+> **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:
+
+- `highlight` [→](https://echarts.apache.org/en/api.html#events.highlight)
+- `downplay` [→](https://echarts.apache.org/en/api.html#events.downplay)
+- `selectchanged` [→](https://echarts.apache.org/en/api.html#events.selectchanged)
+- `legendselectchanged` [→](https://echarts.apache.org/en/api.html#events.legendselectchanged)
+- `legendselected` [→](https://echarts.apache.org/en/api.html#events.legendselected)
+- `legendunselected` [→](https://echarts.apache.org/en/api.html#events.legendunselected)
+- `legendselectall` [→](https://echarts.apache.org/en/api.html#events.legendselectall)
+- `legendinverseselect` [→](https://echarts.apache.org/en/api.html#events.legendinverseselect)
+- `legendscroll` [→](https://echarts.apache.org/en/api.html#events.legendscroll)
+- `datazoom` [→](https://echarts.apache.org/en/api.html#events.datazoom)
+- `datarangeselected` [→](https://echarts.apache.org/en/api.html#events.datarangeselected)
+- `timelinechanged` [→](https://echarts.apache.org/en/api.html#events.timelinechanged)
+- `timelineplaychanged` [→](https://echarts.apache.org/en/api.html#events.timelineplaychanged)
+- `restore` [→](https://echarts.apache.org/en/api.html#events.restore)
+- `dataviewchanged` [→](https://echarts.apache.org/en/api.html#events.dataviewchanged)
+- `magictypechanged` [→](https://echarts.apache.org/en/api.html#events.magictypechanged)
+- `geoselectchanged` [→](https://echarts.apache.org/en/api.html#events.geoselectchanged)
+- `geoselected` [→](https://echarts.apache.org/en/api.html#events.geoselected)
+- `geounselected` [→](https://echarts.apache.org/en/api.html#events.geounselected)
+- `axisareaselected` [→](https://echarts.apache.org/en/api.html#events.axisareaselected)
+- `brush` [→](https://echarts.apache.org/en/api.html#events.brush)
+- `brushEnd` [→](https://echarts.apache.org/en/api.html#events.brushEnd)
+- `brushselected` [→](https://echarts.apache.org/en/api.html#events.brushselected)
+- `globalcursortaken` [→](https://echarts.apache.org/en/api.html#events.globalcursortaken)
+- `rendered` [→](https://echarts.apache.org/en/api.html#events.rendered)
+- `finished` [→](https://echarts.apache.org/en/api.html#events.finished)
+- Mouse events
+  - `click` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.click)
+  - `dblclick` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.dblclick)
+  - `mouseover` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover)
+  - `mouseout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseout)
+  - `mousemove` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousemove)
+  - `mousedown` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousedown)
+  - `mouseup` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseup)
+  - `globalout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.globalout)
+  - `contextmenu` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.contextmenu)
+- ZRender events
+  - `zr:click`
+  - `zr:mousedown`
+  - `zr:mouseup`
+  - `zr:mousewheel`
+  - `zr:dblclick`
+  - `zr:contextmenu`
+
+See supported events [here →](https://echarts.apache.org/en/api.html#events)
+
+#### Native DOM Events
+
+As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events (or you can use the `.native` modifier in Vue 2, which is dropped in Vue 3).
+
+```vue
+<template>
+  <v-chart @native:click="handleClick" />
+</template>
+```
+
 ### Provide / Inject
 
 Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `init-options` you can use the provide API like this:
@@ -401,71 +457,9 @@ import { THEME_KEY } from 'vue-echarts'
 
 Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).
 
-### Events
-
-You can bind events with Vue's `v-on` directive.
-
-```vue
-<template>
-  <v-chart :option="option" @highlight="handleHighlight" />
-</template>
-```
-
-> **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:
-
-- `highlight` [→](https://echarts.apache.org/en/api.html#events.highlight)
-- `downplay` [→](https://echarts.apache.org/en/api.html#events.downplay)
-- `selectchanged` [→](https://echarts.apache.org/en/api.html#events.selectchanged)
-- `legendselectchanged` [→](https://echarts.apache.org/en/api.html#events.legendselectchanged)
-- `legendselected` [→](https://echarts.apache.org/en/api.html#events.legendselected)
-- `legendunselected` [→](https://echarts.apache.org/en/api.html#events.legendunselected)
-- `legendselectall` [→](https://echarts.apache.org/en/api.html#events.legendselectall)
-- `legendinverseselect` [→](https://echarts.apache.org/en/api.html#events.legendinverseselect)
-- `legendscroll` [→](https://echarts.apache.org/en/api.html#events.legendscroll)
-- `datazoom` [→](https://echarts.apache.org/en/api.html#events.datazoom)
-- `datarangeselected` [→](https://echarts.apache.org/en/api.html#events.datarangeselected)
-- `timelinechanged` [→](https://echarts.apache.org/en/api.html#events.timelinechanged)
-- `timelineplaychanged` [→](https://echarts.apache.org/en/api.html#events.timelineplaychanged)
-- `restore` [→](https://echarts.apache.org/en/api.html#events.restore)
-- `dataviewchanged` [→](https://echarts.apache.org/en/api.html#events.dataviewchanged)
-- `magictypechanged` [→](https://echarts.apache.org/en/api.html#events.magictypechanged)
-- `geoselectchanged` [→](https://echarts.apache.org/en/api.html#events.geoselectchanged)
-- `geoselected` [→](https://echarts.apache.org/en/api.html#events.geoselected)
-- `geounselected` [→](https://echarts.apache.org/en/api.html#events.geounselected)
-- `axisareaselected` [→](https://echarts.apache.org/en/api.html#events.axisareaselected)
-- `brush` [→](https://echarts.apache.org/en/api.html#events.brush)
-- `brushEnd` [→](https://echarts.apache.org/en/api.html#events.brushEnd)
-- `brushselected` [→](https://echarts.apache.org/en/api.html#events.brushselected)
-- `globalcursortaken` [→](https://echarts.apache.org/en/api.html#events.globalcursortaken)
-- `rendered` [→](https://echarts.apache.org/en/api.html#events.rendered)
-- `finished` [→](https://echarts.apache.org/en/api.html#events.finished)
-- Mouse events
-  - `click` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.click)
-  - `dblclick` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.dblclick)
-  - `mouseover` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover)
-  - `mouseout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseout)
-  - `mousemove` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousemove)
-  - `mousedown` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousedown)
-  - `mouseup` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseup)
-  - `globalout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.globalout)
-  - `contextmenu` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.contextmenu)
-- ZRender events
-  - `zr:click`
-  - `zr:mousedown`
-  - `zr:mouseup`
-  - `zr:mousewheel`
-  - `zr:dblclick`
-  - `zr:contextmenu`
-
-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.
+If you are applying a CSP to prevent inline `<style>` injection, you need to use `vue-echarts/csp` instead of `vue-echarts` and include `vue-echarts/csp/style.css` manually.
 
 ## Migration to v6
 
@@ -475,7 +469,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ### Vue 2 support
 
-- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
+- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2 (and also `@vue/runtime-core` for TypeScript support).
 
 ### Props
 
@@ -500,9 +494,13 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ## Local development
 
-```bash
+```sh
 pnpm i
 pnpm serve
 ```
 
 Open `http://localhost:8080` to see the demo.
+
+## Notice
+
+The Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).

README.zh-Hans.md

@@ -1,10 +1,9 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Apache ECharts <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
+<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>
 
-
 > [!IMPORTANT]
 > 我们新发布了一个[导入代码生成器](https://vue-echarts.dev/#codegen)，只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。
 >
@@ -16,32 +15,16 @@
 
 ## 💡 注意 💡
 
-若您准备从 `vue-echarts` ≤ 5 的版本迁移到新版本，请在升级 v6 前阅读 _[迁移到 v6](#迁移到-v6)_ 部分文档。
-
-没准备好的话，可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/5.x/README.zh_CN.md)
+还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh_CN.md)
 
 ## 安装 & 使用
 
-### npm & ESM
-
-```bash
-npm install echarts vue-echarts
-```
-
-要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
+### npm
 
 ```sh
-npm i @vue/composition-api
+npm add echarts vue-echarts
 ```
 
-如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
-
-```sh
-npm i @nuxtjs/composition-api
-```
-
-然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。
-
 #### 示例
 
 <details>
@@ -227,7 +210,7 @@ export default {
 import "echarts";
 ```
 
-### CDN & 全局变量
+### CDN
 
 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
 
@@ -236,9 +219,9 @@ import "echarts";
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.3.7"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -256,9 +239,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -381,6 +364,16 @@ Vue-ECharts 支持如下事件：
 
 请参考支持的事件列表。[前往 →](https://echarts.apache.org/zh/api.html#events)
 
+#### 原生 DOM 事件
+
+由于 Vue-ECharts 默认将事件绑定到 ECharts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 `native:` 前缀来绑定原生 DOM 事件（可以在 Vue 2 中也可以使用 `.native` 修饰符，但这在 Vue 3 中已被废弃）。
+
+```vue
+<template>
+  <v-chart @native:click="handleClick" />
+</template>
+```
+
 ### Provide / Inject
 
 Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options` 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置：
@@ -464,9 +457,11 @@ 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`。
+如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `vue-echarts/csp` 代替 `vue-echarts`，并手动引入 `vue-echarts/csp/style.css`。
 
 ## 迁移到 v6
 
@@ -476,7 +471,7 @@ import { THEME_KEY } from 'vue-echarts'
 
 ### Vue 2 支持
 
-- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`。
+- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`（还需要安装 `@vue/runtime-core` 来支持 TypeScript）。
 
 ### Prop
 
@@ -501,9 +496,13 @@ import { THEME_KEY } from 'vue-echarts'
 
 ## 本地开发
 
-```bash
+```sh
 pnpm i
 pnpm serve
 ```
 
 打开 `http://localhost:8080` 来查看 demo。
+
+## 声明
+
+The Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@vue/cli-plugin-babel/preset"]
+}

package.json

@@ -1,88 +1,90 @@
 {
   "name": "vue-echarts",
-  "version": "6.6.2",
-  "description": "Vue.js component for Apache ECharts.",
+  "version": "7.0.0-beta.0",
+  "description": "Vue.js component for Apache ECharts™.",
+  "license": "MIT",
+  "repository": "https://github.com/ecomfe/vue-echarts.git",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "pnpm run docs && rimraf dist && pnpm run build:2 && pnpm run build:3 && vue-demi-switch 3",
-    "build:2": "vue-demi-switch 2 vue2 && rollup -c rollup.vue2.config.js",
-    "build:3": "vue-demi-switch 3 && rollup -c rollup.config.js",
+    "build": "pnpm run docs && rimraf dist && pnpm run build:rollup",
+    "build:rollup": "vue-demi-switch 3 && rollup -c rollup.config.js",
     "lint": "vue-cli-service lint",
+    "publint": "publint",
     "build:demo": "vue-cli-service build",
-    "docs": "node ./scripts/docs.js",
-    "postinstall": "node ./scripts/postinstall.js",
-    "prepublishOnly": "pnpm run build"
+    "docs": "node ./scripts/docs.mjs",
+    "prepublishOnly": "pnpm run build && publint"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "unpkg": "dist/index.min.js",
+  "jsdelivr": "dist/index.min.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./csp": "./dist/csp/index.js",
+    "./csp/style.css": "./dist/csp/style.css"
   },
-  "main": "dist/index.cjs.min.js",
-  "module": "dist/index.esm.min.js",
-  "unpkg": "dist/index.umd.min.js",
   "files": [
     "dist",
     "scripts/postinstall.js"
   ],
   "dependencies": {
-    "resize-detector": "^0.3.0",
     "vue-demi": "^0.13.11"
   },
+  "peerDependencies": {
+    "@vue/runtime-core": "^3.0.0",
+    "echarts": "^5.5.1",
+    "vue": "^2.7.0 || ^3.1.1"
+  },
+  "peerDependenciesMeta": {
+    "@vue/runtime-core": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.24.9",
     "@highlightjs/vue-plugin": "^2.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "@vercel/analytics": "^1.1.1",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
+    "@vercel/analytics": "^1.3.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.7",
-    "@vue/composition-api": "^1.7.2",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vueuse/core": "^10.5.0",
+    "@vue/compiler-sfc": "^3.4.33",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vueuse/core": "^10.11.0",
     "comment-mark": "^1.1.1",
-    "core-js": "^3.33.2",
-    "echarts": "^5.4.3",
+    "core-js": "^3.37.1",
+    "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
-    "esbuild-wasm": "^0.19.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^8.7.1",
-    "highlight.js": "^11.9.0",
+    "esbuild-wasm": "^0.23.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
+    "highlight.js": "^11.10.0",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^5.3.0",
-    "postcss-nested": "^5.0.6",
-    "prettier": "^2.8.8",
+    "postcss": "^8.4.39",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^6.2.0",
+    "prettier": "^3.3.3",
+    "publint": "^0.2.9",
     "raw-loader": "^4.0.2",
     "resize-detector": "^0.3.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
-    "rollup-plugin-dts": "^4.2.3",
-    "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-ts": "^2.0.7",
-    "tslib": "^2.6.2",
-    "typescript": "4.6.4",
-    "vue": "^3.3.7",
-    "vue2": "npm:vue@^2.7.15",
-    "webpack": "^5.89.0"
-  },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.0.5",
-    "echarts": "^5.4.1",
-    "vue": "^2.6.12 || ^3.1.1"
-  },
-  "jsdelivr": "dist/index.umd.min.js",
-  "license": "MIT",
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
-  },
-  "repository": "https://github.com/ecomfe/vue-echarts.git",
-  "types": "dist/index.d.ts"
+    "rimraf": "^6.0.1",
+    "rollup": "^4.19.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-import-css": "^3.5.0",
+    "tslib": "^2.6.3",
+    "typescript": "5.5.4",
+    "vue": "^3.4.33",
+    "vue2": "npm:vue@^2.7.16",
+    "webpack": "^5.93.0"
+  }
 }

public/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en-US">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Inter:300,500;display=swap" rel="stylesheet">
-    <title>Vue-ECharts: Vue.js component for Apache ECharts.</title>
+    <title>Vue-ECharts: Vue.js component for Apache ECharts™.</title>
   </head>
   <body>
     <noscript>

rollup.config.js

@@ -1,9 +1,8 @@
-import typescript from "rollup-plugin-ts";
-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";
+import esbuild from "rollup-plugin-esbuild";
+import { dts } from "rollup-plugin-dts";
+import css from "rollup-plugin-import-css";
+import { injectVueDemi } from "./scripts/rollup.mjs";
 
 /**
  * Modifies the Rollup options for a build to support strict CSP
@@ -18,7 +17,7 @@ function configBuild(options, csp) {
   result.plugins = [
     ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
     ...plugins,
-    csp ? styles({ mode: ["extract", "style.css"] }) : styles()
+    csp ? css({ output: "style.css" }) : css({ inject: true })
   ];
 
   // modify output file names
@@ -39,67 +38,23 @@ function configBuild(options, csp) {
 const builds = [
   {
     input: "src/index.ts",
-    plugins: [
-      typescript({
-        tsconfig: resolvedConfig => ({ ...resolvedConfig, declaration: true }),
-        hook: {
-          outputPath: (path, kind) =>
-            kind === "declaration" ? "dist/index.d.ts" : path
-        }
-      })
-    ],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
-    output: {
-      file: "dist/index.esm.js",
-      format: "esm",
-      sourcemap: true
-    }
-  },
-  {
-    input: "src/index.ts",
-    plugins: [typescript()],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
+    plugins: [esbuild()],
+    external: ["vue-demi", /^echarts/],
     output: [
       {
-        file: "dist/index.esm.min.js",
+        file: "dist/index.js",
         format: "esm",
-        sourcemap: true,
-        plugins: [
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
-      },
-      {
-        file: "dist/index.cjs.js",
-        format: "cjs",
-        exports: "named",
         sourcemap: true
-      },
-      {
-        file: "dist/index.cjs.min.js",
-        format: "cjs",
-        exports: "named",
-        sourcemap: true,
-        plugins: [
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
       }
     ]
   },
   {
     input: "src/global.ts",
-    plugins: [resolve(), typescript()],
-    external: ["vue-demi", "echarts", "echarts/core"],
+    plugins: [esbuild({ minify: true })],
+    external: ["vue-demi", /^echarts/],
     output: [
       {
-        file: "dist/index.umd.js",
+        file: "dist/index.min.js", // for unpkg/jsdelivr
         format: "umd",
         name: "VueECharts",
         exports: "default",
@@ -110,26 +65,6 @@ const builds = [
           "echarts/core": "echarts"
         },
         plugins: [injectVueDemi]
-      },
-      {
-        file: "dist/index.umd.min.js",
-        format: "umd",
-        name: "VueECharts",
-        exports: "default",
-        sourcemap: true,
-        globals: {
-          "vue-demi": "VueDemi",
-          echarts: "echarts",
-          "echarts/core": "echarts"
-        },
-        plugins: [
-          injectVueDemi,
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
       }
     ]
   }
@@ -137,5 +72,19 @@ const builds = [
 
 export default [
   ...builds.map(options => configBuild(options, false)),
-  ...builds.map(options => configBuild(options, true))
+  ...builds.map(options => configBuild(options, true)),
+  {
+    input: "src/index.d.ts",
+    plugins: [dts()],
+    output: [
+      {
+        file: "dist/index.d.ts",
+        format: "esm"
+      },
+      {
+        file: "dist/csp/index.d.ts",
+        format: "esm"
+      }
+    ]
+  }
 ];

rollup.vue2.config.js

@@ -1,15 +0,0 @@
-import dts from "rollup-plugin-dts";
-
-/** @type {import('rollup').RollupOptions[]} */
-const options = [
-  {
-    input: "src/index.vue2.d.ts",
-    plugins: [dts()],
-    output: {
-      file: "dist/index.vue2.d.ts",
-      format: "esm"
-    }
-  }
-];
-
-export default options;

scripts/docs.mjs

@@ -1,18 +1,15 @@
-const { readFileSync, writeFileSync } = require("fs");
-const { resolve } = require("path");
-const commentMark = require("comment-mark");
-const { name, version } = require("../package.json");
+import { readFileSync, writeFileSync } from "node:fs";
+import commentMark from "comment-mark";
+import { getPackageMeta, resolvePath } from "./utils.mjs";
 
-function resolvePath(...parts) {
-  return resolve(__dirname, ...parts);
-}
+const { name, version } = getPackageMeta();
 
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
-  "vue@3": "3.3.7",
-  "vue@2": "2.7.15",
-  echarts: "5.4.3",
+  "vue@3": "3.4.33",
+  "vue@2": "2.7.16",
+  echarts: "5.5.1",
   [name]: version
 };
 
@@ -41,7 +38,7 @@ const scripts = {
 };
 
 const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
-  resolvePath("..", name)
+  resolvePath(import.meta.url, "..", name)
 );
 
 README_FILES.forEach(file => {

scripts/postinstall.js

@@ -1,43 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
-const fs = require("fs");
-
-const packageFile = path.resolve(__dirname, "../package.json");
-
-const typesPaths = {
-  3: "dist/index.d.ts",
-  2: "dist/index.vue2.d.ts"
-};
-
-function switchVersion(version) {
-  const typesPath = typesPaths[version];
-  const package = JSON.parse(fs.readFileSync(packageFile, "utf8"));
-  if (typesPath !== package.types) {
-    package.types = typesPath;
-    fs.writeFileSync(packageFile, JSON.stringify(package, null, "  "), "utf8");
-  }
-  console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
-}
-
-function loadVue() {
-  try {
-    return require("vue");
-  } catch (e) {
-    return null;
-  }
-}
-
-const Vue = loadVue();
-
-// Align the process with vue-demi
-if (!Vue || typeof Vue.version !== "string") {
-  console.warn(
-    '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
-  );
-} else if (Vue.version.startsWith("3.")) {
-  switchVersion(3);
-} else if (Vue.version.startsWith("2.")) {
-  switchVersion(2);
-} else {
-  console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
-}

scripts/rollup.js

@@ -1,30 +0,0 @@
-import { readFileSync } from "fs";
-
-const VUE_DEMI_IIFE = readFileSync(
-  require.resolve("vue-demi/lib/index.iife.js"),
-  "utf8"
-);
-
-/** @type {import('rollup').Plugin} */
-export const injectVueDemi = {
-  name: "inject-vue-demi",
-  banner() {
-    return `${VUE_DEMI_IIFE};\n;`;
-  }
-};
-
-const EMPTY_FILE_ID = "__rollup_empty__";
-
-/** @type {import('rollup').Plugin} */
-export const ingoreCss = {
-  name: "ignore-css",
-  resolveId(source) {
-    if (source.endsWith(".css")) {
-      return EMPTY_FILE_ID;
-    }
-    return null;
-  },
-  load(id) {
-    return id === EMPTY_FILE_ID ? "" : null;
-  }
-};

scripts/rollup.mjs

@@ -0,0 +1,17 @@
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+const VUE_DEMI_IIFE = readFileSync(
+  require.resolve("vue-demi/lib/index.iife.js"),
+  "utf8"
+);
+
+/** @type {import('rollup').Plugin} */
+export const injectVueDemi = {
+  name: "inject-vue-demi",
+  banner() {
+    return `${VUE_DEMI_IIFE};\n;`;
+  }
+};

scripts/utils.mjs

@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export function resolvePath(url, ...parts) {
+  return resolve(dirname(fileURLToPath(url)), ...parts);
+}
+
+export function getPackageMeta() {
+  return JSON.parse(
+    readFileSync(resolvePath(import.meta.url, "../package.json"), "utf8")
+  );
+}

src/ECharts.ts

@@ -13,11 +13,21 @@ import {
   nextTick,
   watchEffect,
   getCurrentInstance,
-  Vue2,
-  type PropType,
-  type InjectionKey
+  Vue2
 } from "vue-demi";
 import { init as initChart } from "echarts/core";
+
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "./composables";
+import { isOn, omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME } from "./wc";
+
+import type { PropType, InjectionKey } from "vue-demi";
 import type {
   EChartsType,
   EventTarget,
@@ -30,15 +40,8 @@ import type {
   UpdateOptionsInjection,
   Emits
 } from "./types";
-import {
-  usePublicAPI,
-  useAutoresize,
-  autoresizeProps,
-  useLoading,
-  loadingProps
-} from "./composables";
-import { omitOn, unwrapInjected } from "./utils";
-import { register, TAG_NAME, type EChartsElement } from "./wc";
+import type { EChartsElement } from "./wc";
+
 import "./style.css";
 
 const __CSP__ = false;
@@ -55,6 +58,8 @@ export const UPDATE_OPTIONS_KEY =
   "ecUpdateOptions" as unknown as InjectionKey<UpdateOptionsInjection>;
 export { LOADING_OPTIONS_KEY } from "./composables";
 
+const NATIVE_EVENT_RE = /(^&?~?!?)native:/;
+
 export default defineComponent({
   name: "echarts",
   props: {
@@ -73,7 +78,6 @@ export default defineComponent({
   inheritAttrs: false,
   setup(props, { attrs }) {
     const root = shallowRef<EChartsElement>();
-    const inner = shallowRef<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
     const defaultTheme = inject(THEME_KEY, null);
@@ -95,17 +99,70 @@ export default defineComponent({
       () => props.updateOptions || unwrapInjected(defaultUpdateOptions, {})
     );
     const nonEventAttrs = computed(() => omitOn(attrs));
+    const nativeListeners: Record<string, unknown> = {};
 
     // @ts-expect-error listeners for Vue 2 compatibility
     const listeners = getCurrentInstance().proxy.$listeners;
+    const realListeners: Record<string, any> = {};
+
+    if (!listeners) {
+      // This is for Vue 3.
+      // We are converting all `on<Event>` props to event listeners compatible with Vue 2
+      // and collect them into `realListeners` so that we can bind them to the chart instance
+      // later in the same way.
+      // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
+      // `nativeListeners` so that we can bind them to the root element directly.
+      Object.keys(attrs)
+        .filter(key => isOn(key))
+        .forEach(key => {
+          // onClick    -> c + lick
+          // onZr:click -> z + r:click
+          let event = key.charAt(2).toLowerCase() + key.slice(3);
+
+          // Collect native DOM events
+          if (event.indexOf("native:") === 0) {
+            // native:click -> onClick
+            const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(
+              8
+            )}`;
+
+            nativeListeners[nativeKey] = attrs[key];
+            return;
+          }
+
+          // clickOnce    -> ~click
+          // zr:clickOnce -> ~zr:click
+          if (event.substring(event.length - 4) === "Once") {
+            event = `~${event.substring(0, event.length - 4)}`;
+          }
+
+          realListeners[event] = attrs[key];
+        });
+    } else {
+      // This is for Vue 2.
+      // We just need to distinguish normal events and `native:<event>` events and
+      // collect them into `realListeners` and `nativeListeners` respectively.
+      // For `native:<event>` events, we just strip the `native:` part and collect them
+      // into `nativeListeners` so that we can bind them to the root element directly.
+      // native:click   -> click
+      // ~native:click  -> ~click
+      // &~!native:click -> &~!click
+      Object.keys(listeners).forEach(key => {
+        if (NATIVE_EVENT_RE.test(key)) {
+          nativeListeners[key.replace(NATIVE_EVENT_RE, "$1")] = listeners[key];
+        } else {
+          realListeners[key] = listeners[key];
+        }
+      });
+    }
 
     function init(option?: Option) {
-      if (!inner.value) {
+      if (!root.value) {
         return;
       }
 
       const instance = (chart.value = initChart(
-        inner.value,
+        root.value,
         realTheme.value,
         realInitOptions.value
       ));
@@ -114,27 +171,6 @@ export default defineComponent({
         instance.group = props.group;
       }
 
-      let realListeners = listeners;
-      if (!realListeners) {
-        realListeners = {};
-
-        Object.keys(attrs)
-          .filter(key => key.indexOf("on") === 0 && key.length > 2)
-          .forEach(key => {
-            // onClick    -> c + lick
-            // onZr:click -> z + r:click
-            let event = key.charAt(2).toLowerCase() + key.slice(3);
-
-            // clickOnce    -> ~click
-            // zr:clickOnce -> ~zr:click
-            if (event.substring(event.length - 4) === "Once") {
-              event = `~${event.substring(0, event.length - 4)}`;
-            }
-
-            realListeners[event] = attrs[key];
-          });
-      }
-
       Object.keys(realListeners).forEach(key => {
         let handler = realListeners[key];
 
@@ -272,7 +308,7 @@ export default defineComponent({
 
     useLoading(chart, loading, loadingOptions);
 
-    useAutoresize(chart, autoresize, inner);
+    useAutoresize(chart, autoresize, root);
 
     onMounted(() => {
       init();
@@ -293,9 +329,9 @@ export default defineComponent({
     return {
       chart,
       root,
-      inner,
       setOption,
       nonEventAttrs,
+      nativeListeners,
       ...publicApi
     };
   },
@@ -303,10 +339,12 @@ export default defineComponent({
     // Vue 3 and Vue 2 have different vnode props format:
     // See https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
     const attrs = (
-      Vue2 ? { attrs: this.nonEventAttrs } : { ...this.nonEventAttrs }
+      Vue2
+        ? { attrs: this.nonEventAttrs, on: this.nativeListeners }
+        : { ...this.nonEventAttrs, ...this.nativeListeners }
     ) as any;
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
-    return h(TAG_NAME, attrs, [h("div", { ref: "inner" })]);
+    return h(TAG_NAME, attrs);
   }
 });

src/composables/api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Ref } from "vue-demi";
-import { EChartsType } from "../types";
+import type { Ref } from "vue-demi";
+import type { EChartsType } from "../types";
 
 const METHOD_NAMES = [
   "getWidth",

src/composables/autoresize.ts

@@ -1,11 +1,8 @@
-import { watch, type Ref, type PropType } from "vue-demi";
+import { watch } from "vue-demi";
 import { throttle } from "echarts/core";
-import {
-  addListener,
-  removeListener,
-  type ResizeCallback
-} from "resize-detector";
-import { type EChartsType } from "../types";
+
+import type { Ref, PropType } from "vue-demi";
+import type { EChartsType } from "../types";
 
 type AutoresizeProp =
   | boolean
@@ -19,28 +16,50 @@ export function useAutoresize(
   autoresize: Ref<AutoresizeProp | undefined>,
   root: Ref<HTMLElement | undefined>
 ): void {
-  let resizeListener: ResizeCallback | null = null;
+  watch(
+    [root, chart, autoresize],
+    ([root, chart, autoresize], _, onCleanup) => {
+      let ro: ResizeObserver | null = null;
 
-  watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
-    if (root && chart && autoresize) {
-      const autoresizeOptions = autoresize === true ? {} : autoresize;
-      const { throttle: wait = 100, onResize } = autoresizeOptions;
+      if (root && chart && autoresize) {
+        const { offsetWidth, offsetHeight } = root;
+        const autoresizeOptions = autoresize === true ? {} : autoresize;
+        const { throttle: wait = 100, onResize } = autoresizeOptions;
 
-      const callback = () => {
-        chart.resize();
-        onResize?.();
-      };
+        let initialResizeTriggered = false;
 
-      resizeListener = wait ? throttle(callback, wait) : callback;
-      addListener(root, resizeListener);
-    }
+        const callback = () => {
+          chart.resize();
+          onResize?.();
+        };
 
-    cleanup(() => {
-      if (root && resizeListener) {
-        removeListener(root, resizeListener);
+        const resizeCallback = wait ? throttle(callback, wait) : callback;
+
+        ro = new ResizeObserver(() => {
+          // We just skip ResizeObserver's initial resize callback if the
+          // size has not changed since the chart is rendered.
+          if (!initialResizeTriggered) {
+            initialResizeTriggered = true;
+            if (
+              root.offsetWidth === offsetWidth &&
+              root.offsetHeight === offsetHeight
+            ) {
+              return;
+            }
+          }
+          resizeCallback();
+        });
+        ro.observe(root);
       }
-    });
-  });
+
+      onCleanup(() => {
+        if (ro) {
+          ro.disconnect();
+          ro = null;
+        }
+      });
+    }
+  );
 }
 
 export const autoresizeProps = {

src/composables/loading.ts

@@ -1,12 +1,7 @@
 import { unwrapInjected } from "../utils";
-import {
-  inject,
-  computed,
-  watchEffect,
-  type Ref,
-  type InjectionKey,
-  type PropType
-} from "vue-demi";
+import { inject, computed, watchEffect } from "vue-demi";
+
+import type { Ref, InjectionKey, PropType } from "vue-demi";
 import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =

src/demo/CodeGen.vue

@@ -16,6 +16,7 @@ import javascript from "highlight.js/lib/languages/javascript";
 import typescript from "highlight.js/lib/languages/typescript";
 import hljsVuePlugin from "@highlightjs/vue-plugin";
 import { initialize, transform } from "esbuild-wasm";
+import wasmURL from "esbuild-wasm/esbuild.wasm";
 import { track } from "@vercel/analytics";
 
 import { getImportsFromOption } from "./utils/codegen";
@@ -75,9 +76,7 @@ const transformedCode = ref("");
 const transformErrors = ref([]);
 
 onMounted(async () => {
-  await initialize({
-    wasmURL: "https://cdn.jsdelivr.net/npm/esbuild-wasm@0.19.2/esbuild.wasm"
-  });
+  await initialize({ wasmURL });
 
   initializing.value = false;
 
@@ -324,10 +323,6 @@ input[type="number"] {
   overflow: hidden;
   background-color: #fff;
   box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
-
-  h2 {
-    margin-top: 0;
-  }
 }
 
 .options {
@@ -418,7 +413,9 @@ input[type="number"] {
   transform: translate(-50%, 200%);
   border-radius: 4px;
   opacity: 0;
-  transition: transform 0.2s, opacity 0.2s;
+  transition:
+    transform 0.2s,
+    opacity 0.2s;
 }
 
 .message.open {

src/demo/Demo.vue

@@ -56,12 +56,23 @@ watch(codeOpen, open => {
       <a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
     </h1>
     <p class="desc">
-      Vue.js component for Apache ECharts. (<a
+      Vue.js component for Apache ECharts™. (<a
         href="https://github.com/ecomfe/vue-echarts#readme"
         >docs</a
       >)
     </p>
 
+    <h2 class="sep">Examples</h2>
+    <p>
+      <small
+        >See
+        <a href="https://echarts.apache.org/examples/en/index.html"
+          >echarts.apache.org/examples</a
+        >
+        for all examples.</small
+      >
+    </p>
+
     <bar-chart />
     <pie-chart />
     <polar-chart />
@@ -100,9 +111,7 @@ watch(codeOpen, open => {
     </aside>
 
     <aside class="codegen">
-      <button @click="openCodegen">
-        ✨ <code>import</code> Codegen <span class="badge">beta</span>
-      </button>
+      <button @click="openCodegen">✨ <code>import</code> Codegen</button>
     </aside>
 
     <code-gen v-model:open="codeOpen" :renderer="initOptions.renderer" />
@@ -132,6 +141,19 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+  box-shadow: 0 1px 0 0 #42b983;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 0 0 #42b983;
+  }
+}
+
+h1,
+h2,
+h3 {
+  color: #2c3e50;
+  font-weight: 400;
 }
 
 h1 {
@@ -139,13 +161,32 @@ h1 {
   font-family: Inter, "Helvetica Neue", Arial, sans-serif;
 }
 
-h1,
 h2 {
-  color: #2c3e50;
-  font-weight: 400;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
-h2 {
+.sep {
+  margin-top: 6em;
+  margin-bottom: 1.8em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  font-size: 1.25em;
+  color: #7f8c8d;
+  opacity: 0.6;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    width: 48px;
+    border-bottom: 1px dotted currentColor;
+  }
+}
+
+h3 {
   margin-top: 2em;
   padding-top: 1em;
   font-size: 1.2em;
@@ -208,15 +249,18 @@ footer {
   a {
     display: inline-block;
     margin: 0 5px;
-    padding: 3px 0 6px;
     color: #7f8c8d;
     font-size: 2em;
-    text-decoration: none;
   }
+}
 
+h1,
+h2,
+h3 {
+  a,
   a:hover {
-    padding-bottom: 3px;
-    border-bottom: 3px solid #42b983;
+    text-decoration: none;
+    box-shadow: none;
   }
 }
 
@@ -251,7 +295,7 @@ input {
 }
 
 label {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
 }
@@ -265,7 +309,7 @@ select {
 }
 
 #logo {
-  display: inline-block;
+  display: inline-flex;
   width: 128px;
   height: 128px;
   pointer-events: none;
@@ -335,11 +379,13 @@ select {
       }
     }
   }
+}
 
-  .actions {
-    display: flex;
-    justify-content: center;
-  }
+.actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
 }
 
 .renderer,
@@ -399,15 +445,6 @@ select {
     align-items: center;
     padding: 0 4px;
     gap: 4px;
-
-    .badge {
-      display: block;
-      padding: 2px 3px;
-      font-size: 10px;
-      background: #36485e54;
-      color: #fff;
-      border-radius: 4px;
-    }
   }
 }
 

src/demo/data/connect.js

@@ -15,15 +15,16 @@ const c1 = {
     fontWeight: 300
   },
   legend: {
-    top: 20,
+    top: "3%",
     data: ["scatter"]
   },
   tooltip: {
     formatter: "{c}"
   },
   grid: {
-    top: "26%",
-    bottom: "26%"
+    top: "30%",
+    right: "18%",
+    bottom: "20%"
   },
   xAxis: {
     type: "value",
@@ -40,7 +41,8 @@ const c1 = {
   visualMap: [
     {
       realtime: false,
-      left: "right",
+      right: "2%",
+      bottom: "3%",
       selectedMode: "multiple",
       dimension: 2,
       selected: [],
@@ -67,15 +69,16 @@ const c2 = {
     fontWeight: 300
   },
   legend: {
-    top: 20,
+    top: "3%",
     data: ["scatter"]
   },
   tooltip: {
     formatter: "{c}"
   },
   grid: {
-    top: "26%",
-    bottom: "26%"
+    top: "30%",
+    right: "18%",
+    bottom: "20%"
   },
   xAxis: {
     type: "value",
@@ -91,7 +94,8 @@ const c2 = {
   },
   visualMap: [
     {
-      left: "right",
+      right: "2%",
+      bottom: "3%",
       selectedMode: "multiple",
       dimension: 2,
       selected: [],

src/demo/data/logo.js

@@ -25,6 +25,10 @@ export default {
             return "";
           }
         }
+      },
+      itemStyle: {
+        shadowBlur: 12,
+        shadowColor: "rgba(0, 0, 0, 0.25)"
       }
     }
   ]

src/demo/data/map.js

@@ -408,6 +408,7 @@ export default function getData() {
       text: "Air quality of major cities in China",
       subtext: "data from PM25.in",
       sublink: "http://www.pm25.in",
+      top: "5%",
       left: "center",
       textStyle: {
         color: "#fff"
@@ -418,9 +419,9 @@ export default function getData() {
     },
     legend: {
       orient: "vertical",
-      y: "bottom",
-      x: "right",
-      data: ["pm2.5"],
+      right: "5%",
+      bottom: "5%",
+      data: ["PM2.5"],
       textStyle: {
         color: "#fff"
       }
@@ -438,11 +439,13 @@ export default function getData() {
       itemStyle: {
         areaColor: "#323c48",
         borderColor: "#111"
-      }
+      },
+      top: "20%",
+      bottom: "7%"
     },
     series: [
       {
-        name: "pm2.5",
+        name: "PM2.5",
         type: "scatter",
         coordinateSystem: "geo",
         data: convertData(data),

src/demo/data/pie.js

@@ -6,6 +6,7 @@ export default function getData() {
     },
     title: {
       text: "Traffic Sources",
+      top: "5%",
       left: "center"
     },
     tooltip: {
@@ -14,7 +15,8 @@ export default function getData() {
     },
     legend: {
       orient: "vertical",
-      left: "left",
+      top: "5%",
+      left: "5%",
       data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
     },
     series: [

src/demo/data/polar.js

@@ -13,13 +13,17 @@ export default function getData() {
       fontWeight: 300
     },
     title: {
-      text: "Dual Numeric Axis"
+      text: "Dual Numeric Axis",
+      top: "5%",
+      left: "5%"
     },
     legend: {
-      data: ["line"]
+      data: ["line"],
+      top: "6%"
     },
     polar: {
-      center: ["50%", "54%"]
+      radius: "65%",
+      center: ["50%", "56%"]
     },
     tooltip: {
       trigger: "axis",

src/demo/data/radar.ts

@@ -15,37 +15,17 @@ export const useScoreStore = defineStore("store", () => {
     return scores.value.map(({ name }) => name);
   });
 
-  const scoreRadar = computed(() => {
+  function getRadarData(activeIndex: number) {
     return {
       title: {
-        text: "Player Ability"
+        text: "Player Ability",
+        top: "5%",
+        left: "5%"
       },
       textStyle: {
         fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
         fontWeight: 300
       },
-      radar: {
-        indicator: scores.value.map(({ name, max }) => {
-          return { name, max };
-        })
-      },
-      series: [
-        {
-          name: "Value",
-          type: "radar",
-          data: [{ value: scores.value.map(({ value }) => value) }]
-        }
-      ]
-    };
-  });
-
-  function getRadarData(activeIndex: number) {
-    return {
-      animation: false,
-      title: {
-        text: "Player Ability"
-      },
-      tooltip: {},
       radar: {
         indicator: scores.value.map(({ name, max }, index) => {
           if (index === activeIndex) {
@@ -81,7 +61,6 @@ export const useScoreStore = defineStore("store", () => {
   return {
     scores,
     metrics,
-    scoreRadar,
     getRadarData,
     increase,
     isMax,

src/demo/data/scatter.js

@@ -47,15 +47,21 @@ const data = [
 
 export default function getData() {
   return {
+    grid: {
+      top: "25%"
+    },
     textStyle: {
       fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
       fontWeight: 300
     },
     title: {
-      text: "Life Expectancy vs. GDP by country"
+      text: "Life Expectancy vs. GDP by country",
+      top: "5%",
+      left: "5%"
     },
     legend: {
-      right: 10,
+      top: "6%",
+      right: "5%",
       data: ["1990", "2015"]
     },
     xAxis: {

src/demo/examples/ConnectChart.vue

@@ -46,10 +46,8 @@ watch(
     </template>
     <template #extra>
       <p class="actions">
-        <label>
-          <input type="checkbox" v-model="connected" />
-          Connected
-        </label>
+        <input id="connected-check" type="checkbox" v-model="connected" />
+        <label for="connected-check">Connected</label>
       </p>
     </template>
   </v-example>

src/demo/examples/Example.vue

@@ -1,10 +1,10 @@
 <template>
-  <h2 :id="id">
+  <h3 :id="id">
     <a :href="`#${id}`">
       {{ title }}
       <small v-if="desc">{{ desc }}</small>
     </a>
-  </h2>
+  </h3>
   <section>
     <figure class="fig hero" v-if="!split">
       <slot />
@@ -49,7 +49,6 @@ defineProps({
     width: calc(60vw + 4em);
     height: 360px;
     max-width: 720px;
-    padding: 1.5em 2em;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
@@ -75,7 +74,6 @@ defineProps({
       width: 100%;
       min-width: 0;
       height: 60vw;
-      padding: 1em 0;
       border: none;
       border-radius: 0;
       box-shadow: none;
@@ -88,7 +86,6 @@ defineProps({
     .echarts {
       width: 28vw;
       min-width: 240px;
-      padding: 1em 1.5em;
       height: 180px;
     }
 

src/demo/examples/GlChart.vue

@@ -50,6 +50,8 @@ onMounted(() => {
         }
       },
       visualMap: {
+        bottom: "3%",
+        left: "3%",
         max: 40,
         calculable: true,
         realtime: false,

src/demo/examples/ManualChart.vue

@@ -46,6 +46,7 @@ function load() {
       },
       title: {
         text: "World Flights",
+        top: "5%",
         left: "center",
         textStyle: {
           color: "#eee"
@@ -62,8 +63,10 @@ function load() {
       },
       geo: {
         map: "world",
-        left: 0,
-        right: 0,
+        top: "15%",
+        right: "5%",
+        bottom: "5%",
+        left: "5%",
         silent: true,
         itemStyle: {
           borderColor: "#003",

src/demo/examples/PolarChart.vue

@@ -7,7 +7,7 @@ import {
   LegendComponent,
   TooltipComponent
 } from "echarts/components";
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 import VChart from "../../ECharts";
 import VExample from "./Example";
 import getData from "../data/polar";
@@ -22,6 +22,23 @@ use([
 
 const option = shallowRef(getData());
 const theme = shallowRef("dark");
+const loading = shallowRef(false);
+const loadingOptions = computed(() =>
+  theme.value === "dark"
+    ? {
+        color: "#fff",
+        textColor: "#fff",
+        maskColor: "rgba(0, 0, 0, 0.7)"
+      }
+    : null
+);
+const style = computed(() => {
+  return theme.value === "dark"
+    ? loading.value
+      ? "background-color: #05040d"
+      : "background-color: #100c2a"
+    : "";
+});
 </script>
 
 <template>
@@ -29,8 +46,10 @@ const theme = shallowRef("dark");
     <v-chart
       :option="option"
       autoresize
+      :loading="loading"
+      :loading-options="loadingOptions"
       :theme="theme"
-      :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
+      :style="style"
     />
     <template #extra>
       <p class="actions">
@@ -39,6 +58,8 @@ const theme = shallowRef("dark");
           <option :value="null">Default</option>
           <option value="dark">Dark</option>
         </select>
+        <input id="loading-check" type="checkbox" v-model="loading" />
+        <label for="loading-check">Loading</label>
       </p>
     </template>
   </v-example>

src/demo/main.ts

@@ -3,7 +3,17 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import Demo from "./Demo.vue";
 
-inject();
+const SAMPLE_RATE = 0.5;
+
+inject({
+  beforeSend: event => {
+    if (Math.random() > SAMPLE_RATE) {
+      return null;
+    }
+
+    return event;
+  }
+});
 
 const pinia = createPinia();
 const app = createApp(Demo);

src/index.d.ts

@@ -1,30 +1,44 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import type { Ref, DefineComponent } from "vue-demi";
+import type { Ref, DefineComponent, InjectionKey } from "vue-demi";
 import type {
   Option,
+  Theme,
   InitOptions,
   UpdateOptions,
+  LoadingOptions,
   EChartsType,
-  Emits
+  Emits,
+  ThemeInjection,
+  InitOptionsInjection,
+  UpdateOptionsInjection,
+  LoadingOptionsInjection
 } from "./types";
 
-declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
-declare const THEME_KEY = "ecTheme";
-declare const INIT_OPTIONS_KEY = "ecInitOptions";
-declare const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
+declare const THEME_KEY: InjectionKey<ThemeInjection>;
+declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;
+declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;
+declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptionsInjection>;
 
 declare type ChartProps = {
-  loading?: boolean;
-  loadingOptions?: Record<string, unknown>;
-  autoresize?: boolean;
-  option?: Option;
-  theme?: string | Record<string, unknown>;
+  theme?: Theme;
   initOptions?: InitOptions;
   updateOptions?: UpdateOptions;
+  loadingOptions?: LoadingOptions;
+  option?: Option;
+  autoresize?: boolean;
+  loading?: boolean;
   group?: string;
   manualUpdate?: boolean;
 };
 
+// convert Emits to Props
+// click => onClick
+declare type ChartEventProps = {
+  [key in keyof Emits as key extends string
+    ? `on${Capitalize<key>}`
+    : never]?: Emits[key];
+};
+
 type MethodNames =
   | "getWidth"
   | "getHeight"
@@ -46,18 +60,15 @@ type MethodNames =
 declare type ChartMethods = Pick<EChartsType, MethodNames>;
 
 declare const Chart: DefineComponent<
-  ChartProps,
+  ChartProps & ChartEventProps,
   {
     root: Ref<HTMLElement | undefined>;
     chart: Ref<EChartsType | undefined>;
   },
   {},
   {},
-  ChartMethods,
-  {},
-  {},
-  Emits
+  ChartMethods
 >;
 
 export default Chart;
-export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };
+export { THEME_KEY, INIT_OPTIONS_KEY, UPDATE_OPTIONS_KEY, LOADING_OPTIONS_KEY };

src/style.css

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

src/types.ts

@@ -1,11 +1,7 @@
 import { init } from "echarts/core";
-import type {
-  SetOptionOpts,
-  ECElementEvent,
-  ElementEvent,
-  EChartsOption
-} from "echarts";
-import type { Ref } from "vue";
+
+import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts/core";
+import type { Ref } from "vue-demi";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
 
@@ -23,7 +19,9 @@ export type UpdateOptionsInjection = Injection<UpdateOptions>;
 export type EChartsType = ReturnType<InitType>;
 type ZRenderType = ReturnType<EChartsType["getZr"]>;
 export type EventTarget = EChartsType | ZRenderType;
-export type Option = EChartsOption;
+
+type SetOptionType = EChartsType["setOption"];
+export type Option = Parameters<SetOptionType>[0];
 
 export type LoadingOptions = {
   text?: string;
@@ -39,6 +37,7 @@ export type LoadingOptions = {
   lineWidth?: number;
   zlevel?: number;
 };
+export type LoadingOptionsInjection = Injection<LoadingOptions>;
 
 type MouseEventName =
   | "click"

src/utils.ts

@@ -1,4 +1,5 @@
-import { unref } from "vue-demi";
+import { unref, isRef } from "vue-demi";
+
 import type { Injection } from "./types";
 
 type Attrs = {
@@ -26,7 +27,7 @@ export function unwrapInjected<T, V>(
   injection: Injection<T>,
   defaultValue: V
 ): T | V {
-  const value = unref(injection);
+  const value = isRef(injection) ? unref(injection) : injection;
 
   if (value && typeof value === "object" && "value" in value) {
     return value.value || defaultValue;

src/wc.ts

@@ -26,21 +26,9 @@ export function register(): boolean {
     // 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);
-}
-`
+      // Use esbuild repl to keep build process simple
+      // https://esbuild.github.io/try/#dAAwLjIzLjAALS1taW5pZnkAY2xhc3MgRUNoYXJ0c0VsZW1lbnQgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgX19kaXNwb3NlID0gbnVsbDsKCiAgZGlzY29ubmVjdGVkQ2FsbGJhY2soKSB7CiAgICBpZiAodGhpcy5fX2Rpc3Bvc2UpIHsKICAgICAgdGhpcy5fX2Rpc3Bvc2UoKTsKICAgICAgdGhpcy5fX2Rpc3Bvc2UgPSBudWxsOwogICAgfQogIH0KfQoKaWYgKGN1c3RvbUVsZW1lbnRzLmdldCh0YWcpID09IG51bGwpIHsKICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnLCBFQ2hhcnRzRWxlbWVudCk7Cn0K
+      "class EChartsElement extends HTMLElement{__dispose=null;disconnectedCallback(){this.__dispose&&(this.__dispose(),this.__dispose=null)}}customElements.get(tag)==null&&customElements.define(tag,EChartsElement);"
     );
     reg(TAG_NAME);
   } catch (e) {

vue.config.js

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const nested = require("postcss-nested");
+import nested from "postcss-nested";
 
-module.exports = {
+export default {
   outputDir: "demo",
   css: {
     loaderOptions: {
@@ -21,6 +20,14 @@ module.exports = {
       .test(/\.svg$/)
       .type("asset/source");
 
+    config.module
+      .rule("wasm")
+      .test(/\.wasm$/)
+      .type("asset/resource")
+      .set("generator", {
+        filename: "[name].[hash:8][ext]"
+      });
+
     config.plugin("define").tap(([options]) => [
       {
         ...options,