build: move to esm (wip)

2025-11-05 20:36:09 +08:00 · 2024-04-16 13:02:45 +08:00 · 2024-02-28 11:59:34 +08:00 · 2024-02-27 20:56:03 +08:00
38 changed files with 6097 additions and 7478 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -3,12 +3,7 @@
  "env": {
    "node": true
  },
-  "extends": [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript",
-    "@vue/eslint-config-prettier/skip-formatting"
-  ],
+  "extends": ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "parser": "@typescript-eslint/parser"
@ -16,5 +11,14 @@
  "rules": {
    "no-console": "off",
    "vue/multi-word-component-names": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "@vue/typescript/recommended",
+        "@vue/prettier/@typescript-eslint"
+      ]
+    }
+  ]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,44 +1,3 @@
-## 7.0.0
-
-> Other prerelease changes:
-> * [7.0.0-beta.0](#700-beta0)
-
-* Fixed types for events.
-
-## 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)).
--- a/README.md
+++ b/README.md
@ -1,21 +1,47 @@
 <h1 align="center">Vue-ECharts</h1>

-<p align="center">Vue.js component for Apache ECharts™.</p>
-<p align="center"><a href="https://npmjs.com/package/vue-echarts"><img alt="npm version" src="https://img.shields.io/npm/v/vue-echarts"></a> <a href="https://vue-echarts.dev/"><img src="https://img.shields.io/badge/Demo%20%C2%BB-20c3aa" alt="View demo"></a> <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000" alt="前往中文版"></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>
+<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>
+
+> [!IMPORTANT]
+> We have released an [import code generator](https://vue-echarts.dev/#codegen) that can generate precise import code by pasting the `option` code.
+>
+> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
+>
+> [Try it →](https://vue-echarts.dev/#codegen)

 ---

-> Still using v6? Read v6 docs [here →](https://github.com/ecomfe/vue-echarts/tree/6.x)
+<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.
+
+Not ready yet? Read documentation for older versions [here →](https://github.com/ecomfe/vue-echarts/tree/5.x)

 ## Installation & Usage

-### npm
+### npm & ESM

 ```sh
-npm add echarts vue-echarts
+npm i echarts vue-echarts
 ```

+To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed (`@vue/runtime-core` for TypeScript support):
+
+```sh
+npm i @vue/composition-api
+npm i @vue/runtime-core # for TypeScript support
+```
+
+If you are using _NuxtJS_ on top of _Vue 2_, you'll 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>
@ -193,8 +219,6 @@ export default {
 > [!IMPORTANT]
 > We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an [import code generator](https://vue-echarts.dev/#codegen) to help you with that. You can just paste in your `option` code and we'll generate the precise import code for you.
 >
-> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
->
 > [Try it →](https://vue-echarts.dev/#codegen)

 But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
@ -203,7 +227,7 @@ But if you really want to import the whole ECharts bundle without having to impo
 import "echarts";
 ```

-### CDN
+### CDN & Global variable

 Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.

@ -212,9 +236,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.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"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.19"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue3Scripts:end -->

@ -233,8 +257,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <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"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue2Scripts:end -->

@ -295,78 +319,6 @@ 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:
@ -450,13 +402,102 @@ 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 `vue-echarts/csp` instead of `vue-echarts` and include `vue-echarts/csp/style.css` manually.
+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 v7
+## Migration to v6

-Read the breaking changes document in the [release log](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0) and the migration shoud be straightforward.
+> 💡 Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well.
+
+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 (and also `@vue/runtime-core` for TypeScript support).
+
+### Props
+
+- `options` is renamed to **`option`** to align with ECharts itself.
+- Updating `option` will respect **`update-options`** configs instead of checking reference change.
+- `watch-shallow` is removed. Use **`manual-update`** for performance critical scenarios.
+
+### Methods
+
+- `mergeOptions` is renamed to **`setOption`** to align with ECharts itself.
+- `showLoading` and `hideLoading` is removed. Use the **`loading` and `loading-options`** props instead.
+- `appendData` is removed. (Due to ECharts 5's breaking change.)
+- All static methods are removed from `vue-echarts`. Use those methods from `echarts` directly.
+
+### Computed getters
+
+- Computed getters (`width`, `height`, `isDisposed` and `computedOptions`) are removed. Use the **`getWidth`, `getHeight`, `isDisposed` and `getOption`** methods instead.
+
+### Styles
+
+- Now the root element of the component have **`100%×100%`** size by default, instead of `600×400`.

 ## Local development

@ -466,7 +507,3 @@ 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/).
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@ -1,21 +1,47 @@
 <h1 align="center">Vue-ECharts</h1>

-<p align="center">Apache ECharts™ 的 Vue.js 组件。</p>
-<p align="center"><a href="https://npmjs.com/package/vue-echarts"><img alt="npm 版本" src="https://img.shields.io/npm/v/vue-echarts"></a> <a href="https://vue-echarts.dev/"><img src="https://img.shields.io/badge/%E6%BC%94%E7%A4%BA%20%C2%BB-20c3aa" alt="查看演示"></a> <a href="./README.zh-Hans.md"></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>
+<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` 代码粘贴进去，就可以得到精确的导入代码。
+>
+> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
+>
+> [试一试 →](https://vue-echarts.dev/#codegen)

 ---

-> 还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh_CN.md)
+## 💡 注意 💡
+
+若您准备从 `vue-echarts` ≤ 5 的版本迁移到新版本，请在升级 v6 前阅读 _[迁移到 v6](#迁移到-v6)_ 部分文档。
+
+没准备好的话，可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/5.x/README.zh_CN.md)

 ## 安装 & 使用

-### npm
+### npm & ESM

 ```sh
-npm add echarts vue-echarts
+npm i echarts vue-echarts
 ```

+要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装（TypeScript 支持还需要 `@vue/runtime-core`）：
+
+```sh
+npm i @vue/composition-api
+npm i @vue/runtime-core # TypeScript 支持
+```
+
+如果你在使用基于 _Vue 2_ 的 _NuxtJS_，则需要安装 `@nuxtjs/composition-api`：
+
+```sh
+npm i @nuxtjs/composition-api
+```
+
+然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。
+
 #### 示例

 <details>
@ -193,8 +219,6 @@ export default {
 > [!IMPORTANT]
 > 我们鼓励手动从 ECharts 中引入组件和图表，以减小打包体积。我们已经为此构建了一个[导入代码生成器](https://vue-echarts.dev/#codegen)。你只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。
 >
-> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
->
 > [试一试 →](https://vue-echarts.dev/#codegen)

 但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
@ -203,7 +227,7 @@ export default {
 import "echarts";
 ```

-### CDN
+### CDN & 全局变量

 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：

@ -212,9 +236,9 @@ import "echarts";

 <!-- vue3Scripts:start -->
 ```html
-<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"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.19"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue3Scripts:end -->

@ -233,8 +257,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <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"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue2Scripts:end -->

@ -357,16 +381,6 @@ 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` 提供上下文配置：
@ -450,18 +464,40 @@ import { THEME_KEY } from 'vue-echarts'

 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。

-
-
 ## CSP: `style-src` 或 `style-src-elem`

-如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `vue-echarts/csp` 代替 `vue-echarts`，并手动引入 `vue-echarts/csp/style.css`。
+如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `dist/csp` 目录中的文件，并手动引入 `dist/csp/style.css`。

-## 迁移到 v7
+## 迁移到 v6

-Translate:
-Read the breaking changes document in the [release log](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0) and the migration shoud be straightforward.
+> 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。

-请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录，之后迁移过程应该会相对简单。
+`vue-echarts@6` 引入了如下破坏性变更：
+
+### Vue 2 支持
+
+- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`（还需要安装 `@vue/runtime-core` 来支持 TypeScript）。
+
+### Prop
+
+- `options` 重命名为 **`option`**，以和 ECharts 本身保持一致。
+- 更新 `option` 将采用 **`update-options`** 中的配置，不再检查是否发生引用变化。
+- `watch-shallow` 被移除。在性能关键场景请使用 **`manual-update`**。
+
+### 方法
+
+- `mergeOptions` 重命名为 **`setOption`**，以和 ECharts 本身保持一致。
+- `showLoading` 与 `hideLoading` 被移除。请使用 **`loading` 与 `loading-options`** prop。
+- `appendData` 被移除。（由于 ECharts 5 引入的破坏性变更。）
+- 所有静态方法被从 `vue-echarts` 移除。可以直接使用 `echarts` 本身的这些方法。
+
+### 计算 Getter
+
+- 计算 getter（`width`、`height`、`isDisposed` 和 `computedOptions`）被移除。请分别使用 **`getWidth`、`getHeight`、`isDisposed` 和 `getOption`** 方法代替。
+
+### 样式
+
+- 现在组件根元素尺寸默认为 **`100%×100%`**，而非原来的 `600×400`。

 ## 本地开发

@ -471,7 +507,3 @@ 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/).
--- a/package.json
+++ b/package.json
@ -1,90 +1,91 @@
 {
  "name": "vue-echarts",
-  "version": "7.0.0",
+  "version": "6.6.9",
+  "type": "module",
  "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:rollup",
-    "build:rollup": "vue-demi-switch 3 && rollup -c rollup.config.js",
+    "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",
    "lint": "vue-cli-service lint",
-    "publint": "publint",
    "build:demo": "vue-cli-service 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"
+    "docs": "node ./scripts/docs.js",
+    "postinstall": "node ./scripts/postinstall.js",
+    "prepublishOnly": "pnpm run build"
  },
+  "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.24.9",
+    "@babel/core": "^7.23.2",
    "@highlightjs/vue-plugin": "^2.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
-    "@vercel/analytics": "^1.3.1",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vercel/analytics": "^1.1.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.4.33",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vueuse/core": "^10.11.0",
+    "@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",
    "comment-mark": "^1.1.1",
-    "core-js": "^3.37.1",
-    "echarts": "^5.5.1",
+    "core-js": "^3.33.2",
+    "echarts": "^5.5.0",
    "echarts-gl": "^2.0.9",
    "echarts-liquidfill": "^3.1.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",
+    "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",
    "pinia": "^2.1.7",
-    "postcss": "^8.4.39",
-    "postcss-loader": "^8.1.1",
-    "postcss-nested": "^6.2.0",
-    "prettier": "^3.3.3",
-    "publint": "^0.2.9",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^5.3.0",
+    "postcss-nested": "^5.0.6",
+    "prettier": "^2.8.8",
    "raw-loader": "^4.0.2",
    "resize-detector": "^0.3.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.19.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^4.12.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"
-  }
+    "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",
+    "@vue/runtime-core": "^3.0.0",
+    "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
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    }
+  },
+  "repository": "https://github.com/ecomfe/vue-echarts.git",
+  "types": "dist/index.d.ts"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/rollup.config.js
+++ b/rollup.config.js
@ -1,8 +1,8 @@
-import replace from "@rollup/plugin-replace";
 import esbuild from "rollup-plugin-esbuild";
 import { dts } from "rollup-plugin-dts";
+import replace from "@rollup/plugin-replace";
 import css from "rollup-plugin-import-css";
-import { injectVueDemi } from "./scripts/rollup.mjs";
+import { ignoreCss } from "./scripts/rollup.js";

 /**
 * Modifies the Rollup options for a build to support strict CSP
@ -39,32 +39,36 @@ const builds = [
  {
    input: "src/index.ts",
    plugins: [esbuild()],
-    external: ["vue-demi", /^echarts/],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
    output: [
      {
-        file: "dist/index.js",
+        file: "dist/index.esm.js",
        format: "esm",
        sourcemap: true
+      },
+      {
+        file: "dist/index.cjs.js",
+        format: "cjs",
+        exports: "named",
+        sourcemap: true
      }
    ]
  },
  {
-    input: "src/global.ts",
+    input: "src/index.ts",
    plugins: [esbuild({ minify: true })],
-    external: ["vue-demi", /^echarts/],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
    output: [
      {
-        file: "dist/index.min.js", // for unpkg/jsdelivr
-        format: "umd",
-        name: "VueECharts",
-        exports: "default",
-        sourcemap: true,
-        globals: {
-          "vue-demi": "VueDemi",
-          echarts: "echarts",
-          "echarts/core": "echarts"
-        },
-        plugins: [injectVueDemi]
+        file: "dist/index.esm.min.js",
+        format: "esm",
+        sourcemap: true
+      },
+      {
+        file: "dist/index.cjs.min.js",
+        format: "cjs",
+        exports: "named",
+        sourcemap: true
      }
    ]
  }
@ -74,17 +78,20 @@ export default [
  ...builds.map(options => configBuild(options, false)),
  ...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"
-      }
-    ]
+    input: "src/index.ts",
+    plugins: [
+      ignoreCss,
+      dts({
+        compilerOptions: {
+          // see https://github.com/unjs/unbuild/pull/57/files
+          preserveSymlinks: false
+        }
+      })
+    ],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
+    output: {
+      file: "dist/index.d.ts",
+      format: "esm"
+    }
  }
 ];
--- a/rollup.vue2.config.js
+++ b/rollup.vue2.config.js
@ -0,0 +1,23 @@
+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"
+    }
+  },
+  {
+    input: "src/index.vue2_7.d.ts",
+    plugins: [dts()],
+    output: {
+      file: "dist/index.vue2_7.d.ts",
+      format: "esm"
+    }
+  }
+];
+
+export default options;
--- a/scripts/docs.mjs
+++ b/scripts/docs.mjs
@ -1,15 +1,15 @@
 import { readFileSync, writeFileSync } from "node:fs";
 import commentMark from "comment-mark";
-import { getPackageMeta, resolvePath } from "./utils.mjs";
+import { getPackageMeta, resolvePath } from "./utils";

 const { name, version } = getPackageMeta();

 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";

 const DEP_VERSIONS = {
-  "vue@3": "3.4.33",
+  "vue@3": "3.4.19",
  "vue@2": "2.7.16",
-  echarts: "5.5.1",
+  echarts: "5.4.3",
  [name]: version
 };

--- a/scripts/postinstall.js
+++ b/scripts/postinstall.js
@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import fs from "node:fs";
+import { resolvePath } from "./utils.js";
+
+const packageFile = resolvePath(import.meta.url, "../package.json");
+
+const typesPaths = {
+  3: "dist/index.d.ts",
+  2.7: "dist/index.vue2_7.d.ts",
+  2: "dist/index.vue2.d.ts"
+};
+
+function switchVersion(version) {
+  const typesPath = typesPaths[version];
+  const pkg = JSON.parse(fs.readFileSync(packageFile, "utf8"));
+  if (typesPath !== pkg.types) {
+    pkg.types = typesPath;
+    fs.writeFileSync(packageFile, JSON.stringify(pkg, null, "  "), "utf8");
+  }
+  console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
+}
+
+async function loadVue() {
+  try {
+    const Vue = await import("vue");
+    return Vue;
+  } catch (e) {
+    return null;
+  }
+}
+
+async function main() {
+  const Vue = await 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.7.")) {
+    switchVersion(2.7);
+  } else if (Vue.version.startsWith("2.")) {
+    switchVersion(2);
+  } else {
+    console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
+  }
+}
+
+main();
--- a/scripts/rollup.js
+++ b/scripts/rollup.js
@ -0,0 +1,15 @@
+const EMPTY_FILE_ID = "__rollup_empty__";
+
+/** @type {import('rollup').Plugin} */
+export const ignoreCss = {
+  name: "ignore-css",
+  resolveId(source) {
+    if (source.endsWith(".css")) {
+      return EMPTY_FILE_ID;
+    }
+    return null;
+  },
+  load(id) {
+    return id === EMPTY_FILE_ID ? "" : null;
+  }
+};
--- a/scripts/rollup.mjs
+++ b/scripts/rollup.mjs
@ -1,17 +0,0 @@
-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;`;
-  }
-};
--- a/scripts/utils.mjs
+++ b/scripts/utils.mjs
@ -8,6 +8,6 @@ export function resolvePath(url, ...parts) {

 export function getPackageMeta() {
  return JSON.parse(
-    readFileSync(resolvePath(import.meta.url, "../package.json"), "utf8")
+    readFileSync(resolvePath(import.meta.url, "/package.json"), "utf8")
  );
 }
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@ -16,7 +16,6 @@ import {
  Vue2
 } from "vue-demi";
 import { init as initChart } from "echarts/core";
-
 import {
  usePublicAPI,
  useAutoresize,
@ -24,7 +23,7 @@ import {
  useLoading,
  loadingProps
 } from "./composables";
-import { isOn, omitOn, unwrapInjected } from "./utils";
+import { omitOn, unwrapInjected } from "./utils";
 import { register, TAG_NAME } from "./wc";

 import type { PropType, InjectionKey } from "vue-demi";
@ -58,8 +57,6 @@ 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: {
@ -78,6 +75,7 @@ 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);
@ -99,70 +97,17 @@ 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 (!root.value) {
+      if (!inner.value) {
        return;
      }

      const instance = (chart.value = initChart(
-        root.value,
+        inner.value,
        realTheme.value,
        realInitOptions.value
      ));
@ -171,6 +116,27 @@ 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];

@ -308,7 +274,7 @@ export default defineComponent({

    useLoading(chart, loading, loadingOptions);

-    useAutoresize(chart, autoresize, root);
+    useAutoresize(chart, autoresize, inner);

    onMounted(() => {
      init();
@ -329,9 +295,9 @@ export default defineComponent({
    return {
      chart,
      root,
+      inner,
      setOption,
      nonEventAttrs,
-      nativeListeners,
      ...publicApi
    };
  },
@ -339,12 +305,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, on: this.nativeListeners }
-        : { ...this.nonEventAttrs, ...this.nativeListeners }
+      Vue2 ? { attrs: this.nonEventAttrs } : { ...this.nonEventAttrs }
    ) 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", class: "vue-echarts-inner" })
+    ]);
  }
 });
--- a/src/composables/autoresize.ts
+++ b/src/composables/autoresize.ts
@ -1,7 +1,9 @@
 import { watch } from "vue-demi";
 import { throttle } from "echarts/core";
+import { addListener, removeListener } from "resize-detector";

 import type { Ref, PropType } from "vue-demi";
+import type { ResizeCallback } from "resize-detector";
 import type { EChartsType } from "../types";

 type AutoresizeProp =
@ -16,50 +18,28 @@ export function useAutoresize(
  autoresize: Ref<AutoresizeProp | undefined>,
  root: Ref<HTMLElement | undefined>
 ): void {
-  watch(
-    [root, chart, autoresize],
-    ([root, chart, autoresize], _, onCleanup) => {
-      let ro: ResizeObserver | null = null;
+  let resizeListener: ResizeCallback | null = null;

-      if (root && chart && autoresize) {
-        const { offsetWidth, offsetHeight } = root;
-        const autoresizeOptions = autoresize === true ? {} : autoresize;
-        const { throttle: wait = 100, onResize } = autoresizeOptions;
+  watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
+    if (root && chart && autoresize) {
+      const autoresizeOptions = autoresize === true ? {} : autoresize;
+      const { throttle: wait = 100, onResize } = autoresizeOptions;

-        let initialResizeTriggered = false;
+      const callback = () => {
+        chart.resize();
+        onResize?.();
+      };

-        const callback = () => {
-          chart.resize();
-          onResize?.();
-        };
-
-        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;
-        }
-      });
+      resizeListener = wait ? throttle(callback, wait) : callback;
+      addListener(root, resizeListener);
    }
-  );
+
+    cleanup(() => {
+      if (root && resizeListener) {
+        removeListener(root, resizeListener);
+      }
+    });
+  });
 }

 export const autoresizeProps = {
--- a/src/composables/loading.ts
+++ b/src/composables/loading.ts
@ -1,5 +1,5 @@
-import { unwrapInjected } from "../utils";
 import { inject, computed, watchEffect } from "vue-demi";
+import { unwrapInjected } from "../utils";

 import type { Ref, InjectionKey, PropType } from "vue-demi";
 import type { EChartsType, LoadingOptions } from "../types";
--- a/src/demo/CodeGen.vue
+++ b/src/demo/CodeGen.vue
@ -16,7 +16,6 @@ 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";
@ -76,7 +75,9 @@ const transformedCode = ref("");
 const transformErrors = ref([]);

 onMounted(async () => {
-  await initialize({ wasmURL });
+  await initialize({
+    wasmURL: "https://cdn.jsdelivr.net/npm/esbuild-wasm@0.19.2/esbuild.wasm"
+  });

  initializing.value = false;

@ -413,9 +414,7 @@ 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 {
--- a/src/demo/Demo.vue
+++ b/src/demo/Demo.vue
@ -111,7 +111,9 @@ watch(codeOpen, open => {
    </aside>

    <aside class="codegen">
-      <button @click="openCodegen">✨ <code>import</code> Codegen</button>
+      <button @click="openCodegen">
+        ✨ <code>import</code> Codegen <span class="badge">beta</span>
+      </button>
    </aside>

    <code-gen v-model:open="codeOpen" :renderer="initOptions.renderer" />
@ -295,7 +297,7 @@ input {
 }

 label {
-  display: inline-flex;
+  display: flex;
  align-items: center;
  justify-content: center;
 }
@ -309,7 +311,7 @@ select {
 }

 #logo {
-  display: inline-flex;
+  display: inline-block;
  width: 128px;
  height: 128px;
  pointer-events: none;
@ -379,13 +381,11 @@ select {
      }
    }
  }
-}

-.actions {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
 }

 .renderer,
@ -445,6 +445,15 @@ 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;
+    }
  }
 }

--- a/src/demo/data/connect.js
+++ b/src/demo/data/connect.js
@ -15,16 +15,15 @@ const c1 = {
    fontWeight: 300
  },
  legend: {
-    top: "3%",
+    top: 20,
    data: ["scatter"]
  },
  tooltip: {
    formatter: "{c}"
  },
  grid: {
-    top: "30%",
-    right: "18%",
-    bottom: "20%"
+    top: "26%",
+    bottom: "26%"
  },
  xAxis: {
    type: "value",
@ -41,8 +40,7 @@ const c1 = {
  visualMap: [
    {
      realtime: false,
-      right: "2%",
-      bottom: "3%",
+      left: "right",
      selectedMode: "multiple",
      dimension: 2,
      selected: [],
@ -69,16 +67,15 @@ const c2 = {
    fontWeight: 300
  },
  legend: {
-    top: "3%",
+    top: 20,
    data: ["scatter"]
  },
  tooltip: {
    formatter: "{c}"
  },
  grid: {
-    top: "30%",
-    right: "18%",
-    bottom: "20%"
+    top: "26%",
+    bottom: "26%"
  },
  xAxis: {
    type: "value",
@ -94,8 +91,7 @@ const c2 = {
  },
  visualMap: [
    {
-      right: "2%",
-      bottom: "3%",
+      left: "right",
      selectedMode: "multiple",
      dimension: 2,
      selected: [],
--- a/src/demo/data/map.js
+++ b/src/demo/data/map.js
@ -408,7 +408,6 @@ 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"
@ -419,9 +418,9 @@ export default function getData() {
    },
    legend: {
      orient: "vertical",
-      right: "5%",
-      bottom: "5%",
-      data: ["PM2.5"],
+      y: "bottom",
+      x: "right",
+      data: ["pm2.5"],
      textStyle: {
        color: "#fff"
      }
@ -439,13 +438,11 @@ 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),
--- a/src/demo/data/pie.js
+++ b/src/demo/data/pie.js
@ -6,7 +6,6 @@ export default function getData() {
    },
    title: {
      text: "Traffic Sources",
-      top: "5%",
      left: "center"
    },
    tooltip: {
@ -15,8 +14,7 @@ export default function getData() {
    },
    legend: {
      orient: "vertical",
-      top: "5%",
-      left: "5%",
+      left: "left",
      data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
    },
    series: [
--- a/src/demo/data/polar.js
+++ b/src/demo/data/polar.js
@ -13,17 +13,13 @@ export default function getData() {
      fontWeight: 300
    },
    title: {
-      text: "Dual Numeric Axis",
-      top: "5%",
-      left: "5%"
+      text: "Dual Numeric Axis"
    },
    legend: {
-      data: ["line"],
-      top: "6%"
+      data: ["line"]
    },
    polar: {
-      radius: "65%",
-      center: ["50%", "56%"]
+      center: ["50%", "54%"]
    },
    tooltip: {
      trigger: "axis",
--- a/src/demo/data/radar.ts
+++ b/src/demo/data/radar.ts
@ -15,17 +15,37 @@ export const useScoreStore = defineStore("store", () => {
    return scores.value.map(({ name }) => name);
  });

-  function getRadarData(activeIndex: number) {
+  const scoreRadar = computed(() => {
    return {
      title: {
-        text: "Player Ability",
-        top: "5%",
-        left: "5%"
+        text: "Player Ability"
      },
      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) {
@ -61,6 +81,7 @@ export const useScoreStore = defineStore("store", () => {
  return {
    scores,
    metrics,
+    scoreRadar,
    getRadarData,
    increase,
    isMax,
--- a/src/demo/data/scatter.js
+++ b/src/demo/data/scatter.js
@ -47,21 +47,15 @@ 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",
-      top: "5%",
-      left: "5%"
+      text: "Life Expectancy vs. GDP by country"
    },
    legend: {
-      top: "6%",
-      right: "5%",
+      right: 10,
      data: ["1990", "2015"]
    },
    xAxis: {
--- a/src/demo/examples/ConnectChart.vue
+++ b/src/demo/examples/ConnectChart.vue
@ -46,8 +46,10 @@ watch(
    </template>
    <template #extra>
      <p class="actions">
-        <input id="connected-check" type="checkbox" v-model="connected" />
-        <label for="connected-check">Connected</label>
+        <label>
+          <input type="checkbox" v-model="connected" />
+          Connected
+        </label>
      </p>
    </template>
  </v-example>
--- a/src/demo/examples/Example.vue
+++ b/src/demo/examples/Example.vue
@ -49,6 +49,7 @@ 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);
@ -74,6 +75,7 @@ defineProps({
      width: 100%;
      min-width: 0;
      height: 60vw;
+      padding: 1em 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
@ -86,6 +88,7 @@ defineProps({
    .echarts {
      width: 28vw;
      min-width: 240px;
+      padding: 1em 1.5em;
      height: 180px;
    }

--- a/src/demo/examples/GlChart.vue
+++ b/src/demo/examples/GlChart.vue
@ -50,8 +50,6 @@ onMounted(() => {
        }
      },
      visualMap: {
-        bottom: "3%",
-        left: "3%",
        max: 40,
        calculable: true,
        realtime: false,
--- a/src/demo/examples/ManualChart.vue
+++ b/src/demo/examples/ManualChart.vue
@ -46,7 +46,6 @@ function load() {
      },
      title: {
        text: "World Flights",
-        top: "5%",
        left: "center",
        textStyle: {
          color: "#eee"
@ -63,10 +62,8 @@ function load() {
      },
      geo: {
        map: "world",
-        top: "15%",
-        right: "5%",
-        bottom: "5%",
-        left: "5%",
+        left: 0,
+        right: 0,
        silent: true,
        itemStyle: {
          borderColor: "#003",
--- a/src/demo/examples/PolarChart.vue
+++ b/src/demo/examples/PolarChart.vue
@ -7,7 +7,7 @@ import {
  LegendComponent,
  TooltipComponent
 } from "echarts/components";
-import { computed, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import VChart from "../../ECharts";
 import VExample from "./Example";
 import getData from "../data/polar";
@ -22,23 +22,6 @@ 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>
@ -46,10 +29,8 @@ const style = computed(() => {
    <v-chart
      :option="option"
      autoresize
-      :loading="loading"
-      :loading-options="loadingOptions"
      :theme="theme"
-      :style="style"
+      :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
    />
    <template #extra>
      <p class="actions">
@ -58,8 +39,6 @@ const style = computed(() => {
          <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>
--- a/src/demo/main.ts
+++ b/src/demo/main.ts
@ -3,17 +3,7 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import Demo from "./Demo.vue";

-const SAMPLE_RATE = 0.5;
-
-inject({
-  beforeSend: event => {
-    if (Math.random() > SAMPLE_RATE) {
-      return null;
-    }
-
-    return event;
-  }
-});
+inject();

 const pinia = createPinia();
 const app = createApp(Demo);
--- a/src/global.ts
+++ b/src/global.ts
@ -1,7 +0,0 @@
-import "echarts";
-import ECharts, * as exported from "./index";
-
-export default {
-  ...ECharts,
-  ...exported
-};
--- a/src/index.vue2.d.ts
+++ b/src/index.vue2.d.ts
@ -1,44 +1,31 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import type { Ref, DefineComponent, InjectionKey } from "vue-demi";
+import type { DefineComponent } from "@vue/runtime-core";
+import type { Ref } from "vue-demi";
 import type {
  Option,
-  Theme,
  InitOptions,
  UpdateOptions,
-  LoadingOptions,
  EChartsType,
-  Emits,
-  ThemeInjection,
-  InitOptionsInjection,
-  UpdateOptionsInjection,
-  LoadingOptionsInjection
+  Emits
 } from "./types";

-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 const LOADING_OPTIONS_KEY = "ecLoadingOptions";
+declare const THEME_KEY = "ecTheme";
+declare const INIT_OPTIONS_KEY = "ecInitOptions";
+declare const UPDATE_OPTIONS_KEY = "ecUpdateOptions";

 declare type ChartProps = {
-  theme?: Theme;
+  loading?: boolean;
+  loadingOptions?: Record<string, unknown>;
+  autoresize?: boolean;
+  option?: Option;
+  theme?: string | Record<string, unknown>;
  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"
@ -60,15 +47,18 @@ type MethodNames =
 declare type ChartMethods = Pick<EChartsType, MethodNames>;

 declare const Chart: DefineComponent<
-  ChartProps & ChartEventProps,
+  ChartProps,
  {
    root: Ref<HTMLElement | undefined>;
    chart: Ref<EChartsType | undefined>;
  },
  {},
  {},
-  ChartMethods
+  ChartMethods,
+  {},
+  {},
+  Emits
 >;

 export default Chart;
-export { THEME_KEY, INIT_OPTIONS_KEY, UPDATE_OPTIONS_KEY, LOADING_OPTIONS_KEY };
+export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };
--- a/src/index.vue2_7.d.ts
+++ b/src/index.vue2_7.d.ts
@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { Ref, DefineComponent } from "vue-demi";
+import type {
+  Option,
+  InitOptions,
+  UpdateOptions,
+  EChartsType,
+  Emits
+} 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 type ChartProps = {
+  loading?: boolean;
+  loadingOptions?: Record<string, unknown>;
+  autoresize?: boolean;
+  option?: Option;
+  theme?: string | Record<string, unknown>;
+  initOptions?: InitOptions;
+  updateOptions?: UpdateOptions;
+  group?: string;
+  manualUpdate?: boolean;
+};
+
+type MethodNames =
+  | "getWidth"
+  | "getHeight"
+  | "getDom"
+  | "getOption"
+  | "resize"
+  | "dispatchAction"
+  | "convertToPixel"
+  | "convertFromPixel"
+  | "containPixel"
+  | "getDataURL"
+  | "getConnectedDataURL"
+  | "appendData"
+  | "clear"
+  | "isDisposed"
+  | "dispose"
+  | "setOption";
+
+declare type ChartMethods = Pick<EChartsType, MethodNames>;
+
+declare const Chart: DefineComponent<
+  ChartProps,
+  {
+    root: Ref<HTMLElement | undefined>;
+    chart: Ref<EChartsType | undefined>;
+  },
+  {},
+  {},
+  ChartMethods,
+  {},
+  {},
+  Emits
+>;
+
+export default Chart;
+export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };
--- a/src/style.css
+++ b/src/style.css
@ -1 +1,2 @@
-x-vue-echarts{display:block;width:100%;height:100%;min-width:0}
+x-vue-echarts{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
+.vue-echarts-inner{flex-grow:1;min-width:0}
--- a/src/types.ts
+++ b/src/types.ts
@ -1,7 +1,6 @@
 import { init } from "echarts/core";
-
-import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts/core";
 import type { Ref } from "vue-demi";
+import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";

 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };

@ -37,7 +36,6 @@ export type LoadingOptions = {
  lineWidth?: number;
  zlevel?: number;
 };
-export type LoadingOptionsInjection = Injection<LoadingOptions>;

 type MouseEventName =
  | "click"
@ -93,19 +91,19 @@ type OtherEventName =
  | "globalcursortaken";

 type MouseEmits = {
-  [key in MouseEventName]: (params: ECElementEvent) => void;
+  [key in MouseEventName]: (params: ECElementEvent) => boolean;
 };

 type ZRenderEmits = {
-  [key in ZRenderEventName]: (params: ElementEvent) => void;
+  [key in ZRenderEventName]: (params: ElementEvent) => boolean;
 };

 type OtherEmits = {
-  [key in OtherEventName]: (params: any) => void;
+  [key in OtherEventName]: null;
 };

 export type Emits = MouseEmits &
  OtherEmits & {
-    rendered: (params: { elapsedTime: number }) => void;
-    finished: () => void;
+    rendered: (params: { elapsedTime: number }) => boolean;
+    finished: () => boolean;
  } & ZRenderEmits;
--- a/src/utils.ts
+++ b/src/utils.ts
@ -1,4 +1,4 @@
-import { unref, isRef } from "vue-demi";
+import { unref } from "vue-demi";

 import type { Injection } from "./types";

@ -27,7 +27,7 @@ export function unwrapInjected<T, V>(
  injection: Injection<T>,
  defaultValue: V
 ): T | V {
-  const value = isRef(injection) ? unref(injection) : injection;
+  const value = unref(injection);

  if (value && typeof value === "object" && "value" in value) {
    return value.value || defaultValue;
--- a/src/wc.ts
+++ b/src/wc.ts
@ -26,9 +26,21 @@ export function register(): boolean {
    // if the browser doesn't support native classes.
    const reg = new Function(
      "tag",
-      // 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);"
+      `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) {
--- a/vue.config.js
+++ b/vue.config.js
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import nested from "postcss-nested";

 export default {
@ -20,14 +21,6 @@ export default {
      .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,
Author	SHA1	Message	Date
Justineo	d00aa090a6	build: move to esm (wip)	2024-04-16 13:02:45 +08:00
Justineo	002b2f2701	build: move to esm (wip)	2024-02-28 11:59:34 +08:00
Justineo	40045135af	build: move to esm (wip)	2024-02-27 20:56:03 +08:00