chore: update deps and version

fix: fix types for mouse events
docs: sync chinese readme
2025-11-05 20:36:09 +08:00 · 2023-01-09 12:58:10 +08:00 · 2023-01-09 12:53:58 +08:00 · 2023-01-08 23:41:15 +08:00 · 2023-01-08 23:39:55 +08:00 · 2023-01-08 23:38:03 +08:00
14 changed files with 594 additions and 414 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,40 @@
+## 6.5.1
+
+* Fixed types for mouse events.
+
+## 6.5.0
+
+* Use more precise typings for all event params.
+* Updated peer deps for `echarts` to `^5.4.1`.
+
+## 6.4.1
+
+* Improve typings for mouse event params.
+
+## 6.4.0
+
+* Delay the disposal of the ECharts instance to the moment the element is disconnected from the DOM if possible (#433).
+
+## 6.3.3
+
+* Make autoresize work for grid layout by default (#675).
+
+## 6.3.2
+
+* Added basic types for events (only event names).
+
+## 6.3.1
+
+* Revert the style change to prevent tooltips from being clipped.
+
+## 6.3.0
+
+* Injected values can now be wrapped in an object so that they can be reactive in Vue 2.
+
+## 6.2.4
+
+* Fixed that attributes were not outputted onto the chart root element for Vue 2 (#670).
+
 ## 6.2.3

 * Fixed the problem that `v-on` stops working after upgrading to `vue@2.7.x`.
--- a/README.md
+++ b/README.md
@ -20,13 +20,13 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
 $ npm install echarts vue-echarts
 ```

-To make `vue-echarts` work for *Vue 2* (<2.7.0), you need to have `@vue/composition-api` installed:
+To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:

 ```sh
 npm i -D @vue/composition-api
 ```

-If you are using *NuxtJS* on top of *Vue 2* (<2.7.0), you'll also need `@nuxtjs/composition-api`:
+If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:

 ```sh
 npm i -D @nuxtjs/composition-api
@ -34,87 +34,7 @@ npm i -D @nuxtjs/composition-api

 And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`.

-<details>
-<summary>Vue 3</summary>
-
-```js
-import { createApp } from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from "echarts/core"
-
-// import ECharts modules manually to reduce bundle size
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-])
-
-const app = createApp(...)
-
-// register globally (or you can do it locally)
-app.component('v-chart', ECharts)
-
-app.mount(...)
-```
-
-</details>
-
-<details>
-<summary>Vue 2</summary>
-
-```js
-import Vue from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from 'echarts/core'
-
-// import ECharts modules manually to reduce bundle size
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-]);
-
-// register globally (or you can do it locally)
-Vue.component('v-chart', ECharts)
-
-new Vue(...)
-```
-
-</details>
-
-We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
-
-But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
-
-```js
-import "echarts";
-```
-
-#### SFC example
+#### Example

 <details>
 <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
@ -124,7 +44,7 @@ import "echarts";
  <v-chart class="chart" :option="option" />
 </template>

-<script>
+<script setup>
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
@ -134,7 +54,7 @@ import {
  LegendComponent
 } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
-import { ref, defineComponent } from "vue";
+import { ref, provide } from "vue";

 use([
  CanvasRenderer,
@ -144,55 +64,44 @@ use([
  LegendComponent
 ]);

-export default defineComponent({
-  name: "HelloWorld",
-  components: {
-    VChart
-  },
-  provide: {
-    [THEME_KEY]: "dark"
-  },
-  setup () {
-    const option = ref({
-      title: {
-        text: "Traffic Sources",
-        left: "center"
-      },
-      tooltip: {
-        trigger: "item",
-        formatter: "{a} <br/>{b} : {c} ({d}%)"
-      },
-      legend: {
-        orient: "vertical",
-        left: "left",
-        data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
-      },
-      series: [
-        {
-          name: "Traffic Sources",
-          type: "pie",
-          radius: "55%",
-          center: ["50%", "60%"],
-          data: [
-            { value: 335, name: "Direct" },
-            { value: 310, name: "Email" },
-            { value: 234, name: "Ad Networks" },
-            { value: 135, name: "Video Ads" },
-            { value: 1548, name: "Search Engines" }
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)"
-            }
-          }
-        }
-      ]
-    });
+provide(THEME_KEY, "dark");

-    return { option };
-  }
+const option = ref({
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
 });
 </script>

@ -299,6 +208,14 @@ export default {

 </details>

+We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
+
+But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
+
+```js
+import "echarts";
+```
+
 ### CDN & Global variable

 Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
@ -310,7 +227,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
 ```
 <!-- vue3Scripts:end -->

@ -330,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
 ```
 <!-- vue2Scripts:end -->

@ -399,16 +316,16 @@ Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-opt
 <summary>Vue 3</summary>

 ```js
-import { INIT_OPTIONS_KEY } from 'vue-echarts'
+import { THEME_KEY } from 'vue-echarts'
 import { provide } from 'vue'

 // composition API
-provide(INIT_OPTIONS_KEY, ...)
+provide(THEME_KEY, 'dark')

 // options API
 {
  provide: {
-    [INIT_OPTIONS_KEY]: { ... }
+    [THEME_KEY]: 'dark'
  }
 }
 ```
@ -419,16 +336,36 @@ provide(INIT_OPTIONS_KEY, ...)
 <summary>Vue 2</summary>

 ```js
-import { INIT_OPTIONS_KEY } from 'vue-echarts'
+import { THEME_KEY } from 'vue-echarts'

 // in component options
 {
  provide: {
-    [INIT_OPTIONS_KEY]: { ... }
+    [THEME_KEY]: 'dark'
  }
 }
 ```

+> **Note**
+>
+> You need to provide an object for Vue 2 if you want to change it dynamically.
+>
+> ```js
+> // in component options
+> {
+>   data () {
+>     return {
+>       theme: { value: 'dark' }
+>     }
+>   },
+>   provide () {
+>     return {
+>       [THEME_KEY]: this.theme
+>     }
+>   }
+> }
+> ```
+
 </details>

 ### Methods
@ -460,10 +397,12 @@ You can bind events with Vue's `v-on` directive.

 ```vue
 <template>
-  <v-chart :option="option" @highlight="handleHighlight"/>
+  <v-chart :option="option" @highlight="handleHighlight" />
 </template>
 ```

+> **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:
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@ -18,13 +18,13 @@
 $ npm install echarts vue-echarts
 ```

-要在 *Vue 2*（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
+要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：

 ```sh
 npm i -D @vue/composition-api
 ```

-如果你在使用基于 *Vue 2*（<2.7.0）的 *NuxtJS*，那么还需要安装 `@nuxtjs/composition-api`：
+如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：

 ```sh
 npm i -D @nuxtjs/composition-api
@ -32,87 +32,7 @@ npm i -D @nuxtjs/composition-api

 然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。

-<details>
-<summary>Vue 3</summary>
-
-```js
-import { createApp } from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from "echarts/core";
-
-// 手动引入 ECharts 各模块来减小打包体积
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-]);
-
-const app = createApp(...)
-
-// 全局注册组件（也可以使用局部注册）
-app.component('v-chart', ECharts)
-
-app.mount(...)
-```
-
-</details>
-
-<details>
-<summary>Vue 2</summary>
-
-```js
-import Vue from 'vue'
-import ECharts from 'vue-echarts'
-import { use } from 'echarts/core'
-// 手动引入 ECharts 各模块来减小打包体积
-
-import {
-  CanvasRenderer
-} from 'echarts/renderers'
-import {
-  BarChart
-} from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent
-]);
-
-// 全局注册组件（也可以使用局部注册）
-Vue.component('v-chart', ECharts)
-
-new Vue(...)
-```
-
-</details>
-
-为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
-
-但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
-
-```js
-import "echarts";
-```
-
-#### 单文件组件示例
+#### 示例

 <details>
 <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
@ -122,7 +42,7 @@ import "echarts";
  <v-chart class="chart" :option="option" />
 </template>

-<script>
+<script setup>
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
@ -132,7 +52,7 @@ import {
  LegendComponent
 } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
-import { ref, defineComponent } from "vue";
+import { ref, provide } from "vue";

 use([
  CanvasRenderer,
@ -142,55 +62,44 @@ use([
  LegendComponent
 ]);

-export default defineComponent({
-  name: "HelloWorld",
-  components: {
-    VChart
-  },
-  provide: {
-    [THEME_KEY]: "dark"
-  },
-  setup: () => {
-    const option = ref({
-      title: {
-        text: "Traffic Sources",
-        left: "center"
-      },
-      tooltip: {
-        trigger: "item",
-        formatter: "{a} <br/>{b} : {c} ({d}%)"
-      },
-      legend: {
-        orient: "vertical",
-        left: "left",
-        data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
-      },
-      series: [
-        {
-          name: "Traffic Sources",
-          type: "pie",
-          radius: "55%",
-          center: ["50%", "60%"],
-          data: [
-            { value: 335, name: "Direct" },
-            { value: 310, name: "Email" },
-            { value: 234, name: "Ad Networks" },
-            { value: 135, name: "Video Ads" },
-            { value: 1548, name: "Search Engines" }
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)"
-            }
-          }
-        }
-      ]
-    });
+provide(THEME_KEY, "dark");

-    return { option };
-  }
+const option = ref({
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
 });
 </script>

@ -297,6 +206,14 @@ export default {

 </details>

+为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
+
+但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
+
+```js
+import "echarts";
+```
+
 ### CDN & 全局变量

 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
@ -304,12 +221,11 @@ export default {
 <details>
 <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>

-
 <!-- vue3Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
 ```
 <!-- vue3Scripts:end -->

@ -329,7 +245,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
 ```
 <!-- vue2Scripts:end -->

@ -396,10 +312,12 @@ Vue.component("v-chart", VueECharts);

 ```vue
 <template>
-  <v-chart :option="option" @highlight="handleHighlight"/>
+  <v-chart :option="option" @highlight="handleHighlight" />
 </template>
 ```

+> **Note**
+>
 > 仅支持 `.once` 修饰符，因为其它修饰符都与 DOM 事件机制强耦合。

 Vue-ECharts 支持如下事件：
@ -458,16 +376,16 @@ Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options
 <summary>Vue 3</summary>

 ```js
-import { INIT_OPTIONS_KEY } from 'vue-echarts'
+import { THEME_KEY } from 'vue-echarts'
 import { provide } from 'vue'

-// composition API
-provide(INIT_OPTIONS_KEY, ...)
+// 组合式 API
+provide(THEME_KEY, 'dark')

-// options API
+// 选项式 API
 {
  provide: {
-    [INIT_OPTIONS_KEY]: { ... }
+    [THEME_KEY]: 'dark'
  }
 }
 ```
@ -478,16 +396,36 @@ provide(INIT_OPTIONS_KEY, ...)
 <summary>Vue 2</summary>

 ```js
-import { INIT_OPTIONS_KEY } from 'vue-echarts'
+import { THEME_KEY } from 'vue-echarts'

-// in component options
+// 组件选项中
 {
  provide: {
-    [INIT_OPTIONS_KEY]: { ... }
+    [THEME_KEY]: 'dark'
  }
 }
 ```

+> **Note**
+>
+> 在 Vue 2 中，如果你想动态地改变这些选项，那么你需要提供一个对象。
+>
+> ```js
+> // 组件选项中
+> {
+>   data () {
+>     return {
+>       theme: { value: 'dark' }
+>     }
+>   },
+>   provide () {
+>     return {
+>       [THEME_KEY]: this.theme
+>     }
+>   }
+> }
+> ```
+
 </details>

 ### 方法
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-echarts",
-  "version": "6.2.3",
+  "version": "6.5.1",
  "description": "Vue.js component for Apache ECharts.",
  "author": "GU Yiling <justice360@gmail.com>",
  "scripts": {
@ -26,46 +26,48 @@
    "vue-demi": "^0.13.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/compiler-sfc": "^3.2.33",
+    "@babel/core": "^7.18.6",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vue/cli-plugin-babel": "^5.0.7",
+    "@vue/cli-plugin-eslint": "^5.0.7",
+    "@vue/cli-plugin-typescript": "^5.0.7",
+    "@vue/cli-service": "^5.0.7",
+    "@vue/compiler-sfc": "^3.2.37",
    "@vue/composition-api": "^1.7.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "comment-mark": "^1.0.0",
-    "core-js": "^3.23.0",
-    "echarts": "^5.3.2",
-    "eslint": "^7.20.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "comment-mark": "^1.1.1",
+    "core-js": "^3.23.3",
+    "echarts": "^5.4.1",
+    "echarts-liquidfill": "^3.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^8.7.1",
    "esm": "^3.2.25",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.0.0",
-    "postcss-nested": "^5.0.5",
-    "prettier": "^2.6.2",
-    "qs": "^6.10.5",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^5.3.0",
+    "postcss-nested": "^5.0.6",
+    "prettier": "^2.7.1",
+    "qs": "^6.11.0",
+    "raw-loader": "^4.0.2",
    "resize-detector": "^0.3.0",
    "rimraf": "^3.0.2",
-    "rollup": "^2.72.1",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup": "^2.75.7",
+    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-styles": "^4.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-ts": "^2.0.7",
    "tslib": "^2.4.0",
    "typescript": "4.6.4",
-    "vue": "^3.2.33",
-    "vue2": "npm:vue@^2.7.4",
-    "webpack": "^5.72.1"
+    "vue": "^3.2.37",
+    "vue2": "npm:vue@^2.7.14",
+    "webpack": "^5.73.0"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.5",
-    "echarts": "^5.1.2",
+    "echarts": "^5.4.1",
    "vue": "^2.6.12 || ^3.1.1"
  },
  "jsdelivr": "dist/index.umd.min.js",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,43 +1,45 @@
 lockfileVersion: 5.4

 specifiers:
-  '@babel/core': ^7.17.10
-  '@rollup/plugin-node-resolve': ^11.1.1
-  '@typescript-eslint/eslint-plugin': ^4.15.1
-  '@typescript-eslint/parser': ^4.15.1
-  '@vue/cli-plugin-babel': ^5.0.4
-  '@vue/cli-plugin-eslint': ^5.0.4
-  '@vue/cli-plugin-typescript': ^5.0.4
-  '@vue/cli-service': ^5.0.4
-  '@vue/compiler-sfc': ^3.2.33
+  '@babel/core': ^7.18.6
+  '@rollup/plugin-node-resolve': ^11.2.1
+  '@typescript-eslint/eslint-plugin': ^4.33.0
+  '@typescript-eslint/parser': ^4.33.0
+  '@vue/cli-plugin-babel': ^5.0.7
+  '@vue/cli-plugin-eslint': ^5.0.7
+  '@vue/cli-plugin-typescript': ^5.0.7
+  '@vue/cli-service': ^5.0.7
+  '@vue/compiler-sfc': ^3.2.37
  '@vue/composition-api': ^1.7.0
  '@vue/eslint-config-prettier': ^6.0.0
  '@vue/eslint-config-typescript': ^10.0.0
-  comment-mark: ^1.0.0
-  core-js: ^3.23.0
-  echarts: ^5.3.2
-  eslint: ^7.20.0
-  eslint-plugin-prettier: ^3.3.1
+  comment-mark: ^1.1.1
+  core-js: ^3.23.3
+  echarts: ^5.4.1
+  echarts-liquidfill: ^3.1.0
+  eslint: ^7.32.0
+  eslint-plugin-prettier: ^3.4.1
  eslint-plugin-vue: ^8.7.1
  esm: ^3.2.25
-  postcss: ^8.3.0
-  postcss-loader: ^5.0.0
-  postcss-nested: ^5.0.5
-  prettier: ^2.6.2
-  qs: ^6.10.5
+  postcss: ^8.4.14
+  postcss-loader: ^5.3.0
+  postcss-nested: ^5.0.6
+  prettier: ^2.7.1
+  qs: ^6.11.0
+  raw-loader: ^4.0.2
  resize-detector: ^0.3.0
  rimraf: ^3.0.2
-  rollup: ^2.72.1
-  rollup-plugin-dts: ^4.2.1
+  rollup: ^2.75.7
+  rollup-plugin-dts: ^4.2.2
  rollup-plugin-styles: ^4.0.0
  rollup-plugin-terser: ^7.0.2
  rollup-plugin-ts: ^2.0.7
  tslib: ^2.4.0
  typescript: 4.6.4
-  vue: ^3.2.33
+  vue: ^3.2.37
  vue-demi: ^0.13.2
-  vue2: npm:vue@^2.7.4
-  webpack: ^5.72.1
+  vue2: npm:vue@^2.7.14
+  webpack: ^5.73.0

 dependencies:
  resize-detector: 0.3.0
@ -48,17 +50,18 @@ devDependencies:
  '@rollup/plugin-node-resolve': 11.2.1_rollup@2.75.7
  '@typescript-eslint/eslint-plugin': 4.33.0_lzzr7k3tjtqil7aczuhmzzwame
  '@typescript-eslint/parser': 4.33.0_e4zyhrvfnqudwdx5bevnvkluy4
-  '@vue/cli-plugin-babel': 5.0.7_szrn552deqanolg2xhvxv3f6si
+  '@vue/cli-plugin-babel': 5.0.7_bfbyvxbwdkbpzjdhlu2ghmbxte
  '@vue/cli-plugin-eslint': 5.0.7_sogf6mc3t6tnpddmelmhv5sy5y
  '@vue/cli-plugin-typescript': 5.0.7_fqel5ol4p36s622pmc3xeh5nmy
-  '@vue/cli-service': 5.0.7_khqsjqtt6bg4xxifpcjoaqsude
+  '@vue/cli-service': 5.0.7_wh7dux2groxeldr2stfgzduwne
  '@vue/compiler-sfc': 3.2.37
  '@vue/composition-api': 1.7.0_vue@3.2.37
  '@vue/eslint-config-prettier': 6.0.0_rklrwr6twxyl7u6a6qb67cswlu
  '@vue/eslint-config-typescript': 10.0.0_yzev4ryi2uowr3tzgilgj3i2em
  comment-mark: 1.1.1
  core-js: 3.23.3
-  echarts: 5.3.3
+  echarts: 5.4.1
+  echarts-liquidfill: 3.1.0_echarts@5.4.1
  eslint: 7.32.0
  eslint-plugin-prettier: 3.4.1_fqyzhpusvewbsl54pqqbxqaegm
  eslint-plugin-vue: 8.7.1_eslint@7.32.0
@ -68,6 +71,7 @@ devDependencies:
  postcss-nested: 5.0.6_postcss@8.4.14
  prettier: 2.7.1
  qs: 6.11.0
+  raw-loader: 4.0.2_webpack@5.73.0
  rimraf: 3.0.2
  rollup: 2.75.7
  rollup-plugin-dts: 4.2.2_tawkl7lyp7gxtk5srebtmqqvue
@ -77,7 +81,7 @@ devDependencies:
  tslib: 2.4.0
  typescript: 4.6.4
  vue: 3.2.37
-  vue2: /vue/2.7.4
+  vue2: /vue/2.7.14
  webpack: 5.73.0

 packages:
@ -342,10 +346,20 @@ packages:
      '@babel/types': 7.18.7
    dev: true

+  /@babel/helper-string-parser/7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
  /@babel/helper-validator-identifier/7.18.6:
    resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
    engines: {node: '>=6.9.0'}

+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
  /@babel/helper-validator-option/7.18.6:
    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
    engines: {node: '>=6.9.0'}
@ -390,6 +404,14 @@ packages:
    dependencies:
      '@babel/types': 7.18.7

+  /@babel/parser/7.20.7:
+    resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.18.6:
    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
    engines: {node: '>=6.9.0'}
@ -1290,6 +1312,15 @@ packages:
      '@babel/helper-validator-identifier': 7.18.6
      to-fast-properties: 2.0.0

+  /@babel/types/7.20.7:
+    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
  /@eslint/eslintrc/0.4.3:
    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
    engines: {node: ^10.12.0 || >=12.0.0}
@ -1934,9 +1965,11 @@ packages:
      svg-tags: 1.0.0
    dev: true

-  /@vue/babel-preset-app/5.0.7_vue@3.2.37:
+  /@vue/babel-preset-app/5.0.7_6aw556sdtr7wdbt7wby5rddhty:
    resolution: {integrity: sha512-oepDJNWbYxosfopP7SPDZTBQl0k7KN5xs/uGWT12K+ih6f54Qo/4gEEoIVI8p2yuCRLIIc46SIhZn3AugOgx1g==}
    peerDependencies:
+      '@babel/core': '*'
+      core-js: ^3
      vue: ^2 || ^3.2.13
    peerDependenciesMeta:
      core-js:
@ -2046,20 +2079,21 @@ packages:
    resolution: {integrity: sha512-Fz0C0TnJI5ARYV7U9DtE9XnYb7OHGhtKv1Wh1fJ8Ugy97kFMnHnXHl+/MCISx/EKdCaKJf0zs7ylHoZGhRhhfg==}
    dev: true

-  /@vue/cli-plugin-babel/5.0.7_szrn552deqanolg2xhvxv3f6si:
+  /@vue/cli-plugin-babel/5.0.7_bfbyvxbwdkbpzjdhlu2ghmbxte:
    resolution: {integrity: sha512-qWrwhX7rZ8vQq6+niKG8OkBak0vDhIWzJsLXH5i+xzm04mcudPJwPZhQOBpN3XXkipsic1ZCkhS9d3+VjsWQYg==}
    peerDependencies:
      '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
    dependencies:
      '@babel/core': 7.18.6
-      '@vue/babel-preset-app': 5.0.7_vue@3.2.37
-      '@vue/cli-service': 5.0.7_khqsjqtt6bg4xxifpcjoaqsude
+      '@vue/babel-preset-app': 5.0.7_6aw556sdtr7wdbt7wby5rddhty
+      '@vue/cli-service': 5.0.7_wh7dux2groxeldr2stfgzduwne
      '@vue/cli-shared-utils': 5.0.7
      babel-loader: 8.2.5_fswvdo7jykdwhfxrdcvghfn6pa
      thread-loader: 3.0.4_webpack@5.73.0
      webpack: 5.73.0
    transitivePeerDependencies:
      - '@swc/core'
+      - core-js
      - encoding
      - esbuild
      - supports-color
@ -2074,7 +2108,7 @@ packages:
      '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
      eslint: '>=7.5.0'
    dependencies:
-      '@vue/cli-service': 5.0.7_khqsjqtt6bg4xxifpcjoaqsude
+      '@vue/cli-service': 5.0.7_wh7dux2groxeldr2stfgzduwne
      '@vue/cli-shared-utils': 5.0.7
      eslint: 7.32.0
      eslint-webpack-plugin: 3.2.0_oxnz3ipaot6yjz2b7jqxkugcdm
@ -2094,7 +2128,7 @@ packages:
    peerDependencies:
      '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
    dependencies:
-      '@vue/cli-service': 5.0.7_khqsjqtt6bg4xxifpcjoaqsude
+      '@vue/cli-service': 5.0.7_wh7dux2groxeldr2stfgzduwne
      '@vue/cli-shared-utils': 5.0.7
    transitivePeerDependencies:
      - encoding
@ -2116,7 +2150,7 @@ packages:
    dependencies:
      '@babel/core': 7.18.6
      '@types/webpack-env': 1.17.0
-      '@vue/cli-service': 5.0.7_khqsjqtt6bg4xxifpcjoaqsude
+      '@vue/cli-service': 5.0.7_wh7dux2groxeldr2stfgzduwne
      '@vue/cli-shared-utils': 5.0.7
      babel-loader: 8.2.5_fswvdo7jykdwhfxrdcvghfn6pa
      fork-ts-checker-webpack-plugin: 6.5.2_irit3cwhef6e6mopqxb7zqusqa
@ -2141,10 +2175,10 @@ packages:
    peerDependencies:
      '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
    dependencies:
-      '@vue/cli-service': 5.0.7_khqsjqtt6bg4xxifpcjoaqsude
+      '@vue/cli-service': 5.0.7_wh7dux2groxeldr2stfgzduwne
    dev: true

-  /@vue/cli-service/5.0.7_khqsjqtt6bg4xxifpcjoaqsude:
+  /@vue/cli-service/5.0.7_wh7dux2groxeldr2stfgzduwne:
    resolution: {integrity: sha512-ajYBY4CADbuUUwTxRFEx/Jrjalm2YM0ICP37yD4je/wyzcfsKj2iSJJPZpoigPqm/AxO4XN5lYWi5apJNSTpxA==}
    engines: {node: ^12.0.0 || >= 14.0.0}
    hasBin: true
@ -2184,7 +2218,7 @@ packages:
      '@vue/cli-plugin-vuex': 5.0.7_@vue+cli-service@5.0.7
      '@vue/cli-shared-utils': 5.0.7
      '@vue/component-compiler-utils': 3.3.0
-      '@vue/vue-loader-v15': /vue-loader/15.10.0_bq3n4ba3oabtyijop4fktu76xe
+      '@vue/vue-loader-v15': /vue-loader/15.10.1_bq3n4ba3oabtyijop4fktu76xe
      '@vue/web-component-wrapper': 1.3.0
      acorn: 8.7.1
      acorn-walk: 8.2.0
@ -2218,6 +2252,7 @@ packages:
      postcss: 8.4.14
      postcss-loader: 6.2.1_mepnsno3xmng6eyses4tepu7bu
      progress-webpack-plugin: 1.0.16_webpack@5.73.0
+      raw-loader: 4.0.2_webpack@5.73.0
      ssri: 8.0.1
      terser-webpack-plugin: 5.3.3_webpack@5.73.0
      thread-loader: 3.0.4_webpack@5.73.0
@ -2332,11 +2367,11 @@ packages:
      '@vue/compiler-core': 3.2.37
      '@vue/shared': 3.2.37

-  /@vue/compiler-sfc/2.7.4:
-    resolution: {integrity: sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==}
+  /@vue/compiler-sfc/2.7.14:
+    resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
    dependencies:
-      '@babel/parser': 7.18.6
-      postcss: 8.4.14
+      '@babel/parser': 7.20.7
+      postcss: 8.4.21
      source-map: 0.6.1
    dev: true

@ -2372,7 +2407,7 @@ packages:
      source-map: 0.6.1
      vue-template-es2015-compiler: 1.9.1
    optionalDependencies:
-      prettier: 2.7.1
+      prettier: 2.8.2
    transitivePeerDependencies:
      - arc-templates
      - atpl
@ -2829,7 +2864,7 @@ packages:
      postcss: ^8.1.0
    dependencies:
      browserslist: 4.21.1
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      fraction.js: 4.2.0
      normalize-range: 0.1.2
      picocolors: 1.0.0
@ -2983,7 +3018,7 @@ packages:
      '@types/semver': 7.3.10
      '@types/ua-parser-js': 0.7.36
      browserslist: 4.20.2
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      isbot: 3.4.5
      object-path: 0.11.8
      semver: 7.3.7
@ -2995,7 +3030,7 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      electron-to-chromium: 1.4.180
      escalade: 3.1.1
      node-releases: 2.0.5
@ -3007,7 +3042,7 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      electron-to-chromium: 1.4.180
      node-releases: 2.0.5
      update-browserslist-db: 1.0.4_browserslist@4.21.1
@ -3072,13 +3107,13 @@ packages:
    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
    dependencies:
      browserslist: 4.21.1
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      lodash.memoize: 4.1.2
      lodash.uniq: 4.5.0
    dev: true

-  /caniuse-lite/1.0.30001363:
-    resolution: {integrity: sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==}
+  /caniuse-lite/1.0.30001442:
+    resolution: {integrity: sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==}
    dev: true

  /case-sensitive-paths-webpack-plugin/2.4.0:
@ -3328,7 +3363,7 @@ packages:
      lodash: ^4.17.20
      marko: ^3.14.4
      mote: ^0.2.0
-      mustache: ^4.0.1
+      mustache: ^3.0.0
      nunjucks: ^3.2.2
      plates: ~0.4.11
      pug: ^3.0.0
@ -3732,8 +3767,8 @@ packages:
  /csstype/2.6.20:
    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}

-  /csstype/3.1.0:
-    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+  /csstype/3.1.1:
+    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
    dev: true

  /debug/2.6.9:
@ -3917,11 +3952,19 @@ packages:
    engines: {node: '>=6.0.0'}
    dev: true

-  /echarts/5.3.3:
-    resolution: {integrity: sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==}
+  /echarts-liquidfill/3.1.0_echarts@5.4.1:
+    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
+    peerDependencies:
+      echarts: ^5.0.1
+    dependencies:
+      echarts: 5.4.1
+    dev: true
+
+  /echarts/5.4.1:
+    resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==}
    dependencies:
      tslib: 2.3.0
-      zrender: 5.3.2
+      zrender: 5.4.1
    dev: true

  /ee-first/1.1.1:
@ -5111,6 +5154,13 @@ packages:
      minimist: 1.2.6
    dev: true

+  /json5/1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+    dev: true
+
  /json5/2.2.1:
    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
    engines: {node: '>=6'}
@ -5179,6 +5229,15 @@ packages:
      json5: 1.0.1
    dev: true

+  /loader-utils/1.4.2:
+    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.2
+    dev: true
+
  /loader-utils/2.0.2:
    resolution: {integrity: sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==}
    engines: {node: '>=8.9.0'}
@ -6192,6 +6251,15 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2

+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
  /prelude-ls/1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}
@ -6210,6 +6278,13 @@ packages:
    hasBin: true
    dev: true

+  /prettier/2.8.2:
+    resolution: {integrity: sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+    optional: true
+
  /pretty-error/4.0.0:
    resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
    dependencies:
@ -6311,6 +6386,17 @@ packages:
      unpipe: 1.0.0
    dev: true

+  /raw-loader/4.0.2_webpack@5.73.0:
+    resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack: 5.73.0
+    dev: true
+
  /read-pkg-up/7.0.1:
    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
    engines: {node: '>=8'}
@ -7373,8 +7459,8 @@ packages:
    resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==}
    dev: true

-  /vue-loader/15.10.0_bq3n4ba3oabtyijop4fktu76xe:
-    resolution: {integrity: sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==}
+  /vue-loader/15.10.1_bq3n4ba3oabtyijop4fktu76xe:
+    resolution: {integrity: sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==}
    peerDependencies:
      '@vue/compiler-sfc': ^3.0.8
      cache-loader: '*'
@ -7393,7 +7479,7 @@ packages:
      '@vue/component-compiler-utils': 3.3.0
      css-loader: 6.7.1_webpack@5.73.0
      hash-sum: 1.0.2
-      loader-utils: 1.4.0
+      loader-utils: 1.4.2
      vue-hot-reload-api: 2.3.4
      vue-style-loader: 4.1.3
      webpack: 5.73.0
@ -7475,11 +7561,11 @@ packages:
    resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
    dev: true

-  /vue/2.7.4:
-    resolution: {integrity: sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==}
+  /vue/2.7.14:
+    resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
    dependencies:
-      '@vue/compiler-sfc': 2.7.4
-      csstype: 3.1.0
+      '@vue/compiler-sfc': 2.7.14
+      csstype: 3.1.1
    dev: true

  /vue/3.2.37:
@ -7804,8 +7890,8 @@ packages:
      strip-indent: 2.0.0
    dev: true

-  /zrender/5.3.2:
-    resolution: {integrity: sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==}
+  /zrender/5.4.1:
+    resolution: {integrity: sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==}
    dependencies:
      tslib: 2.3.0
    dev: true
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@ -2,14 +2,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
  defineComponent,
-  unref,
  shallowRef,
  toRefs,
  watch,
  computed,
  inject,
  onMounted,
-  onUnmounted,
+  onBeforeUnmount,
  h,
  nextTick,
  watchEffect,
@ -28,7 +27,8 @@ import type {
  InitOptions,
  InitOptionsInjection,
  UpdateOptions,
-  UpdateOptionsInjection
+  UpdateOptionsInjection,
+  Emits
 } from "./types";
 import {
  usePublicAPI,
@ -37,10 +37,11 @@ import {
  useLoading,
  loadingProps
 } from "./composables";
-import { omitOn } from "./utils";
+import { omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";

-const TAG_NAME = "x-vue-echarts";
+const wcRegistered = register();

 if (Vue2) {
  Vue2.config.ignoredElements.push(TAG_NAME);
@ -67,9 +68,10 @@ export default defineComponent({
    ...autoresizeProps,
    ...loadingProps
  },
+  emits: {} as unknown as Emits,
  inheritAttrs: false,
  setup(props, { attrs }) {
-    const root = shallowRef<HTMLElement>();
+    const root = shallowRef<EChartsElement>();
    const chart = shallowRef<EChartsType>();
    const manualOption = shallowRef<Option>();
    const defaultTheme = inject(THEME_KEY, null);
@ -81,12 +83,14 @@ export default defineComponent({
    const realOption = computed(
      () => manualOption.value || props.option || null
    );
-    const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
+    const realTheme = computed(
+      () => props.theme || unwrapInjected(defaultTheme, {})
+    );
    const realInitOptions = computed(
-      () => props.initOptions || unref(defaultInitOptions) || {}
+      () => props.initOptions || unwrapInjected(defaultInitOptions, {})
    );
    const realUpdateOptions = computed(
-      () => props.updateOptions || unref(defaultUpdateOptions) || {}
+      () => props.updateOptions || unwrapInjected(defaultUpdateOptions, {})
    );
    const nonEventAttrs = computed(() => omitOn(attrs));

@ -270,7 +274,17 @@ export default defineComponent({
      init();
    });

-    onUnmounted(cleanup);
+    onBeforeUnmount(() => {
+      if (wcRegistered && root.value) {
+        // For registered web component, we can leverage the
+        // `disconnectedCallback` to dispose the chart instance
+        // so that we can delay the cleanup after exsiting leaving
+        // transition.
+        root.value.__dispose = cleanup;
+      } else {
+        cleanup();
+      }
+    });

    return {
      chart,
@ -281,7 +295,11 @@ export default defineComponent({
    };
  },
  render() {
-    const attrs = { ...this.nonEventAttrs };
+    // 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 }
+    ) as any;
    attrs.ref = "root";
    attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
    return h(TAG_NAME, attrs);
--- a/src/composables/loading.ts
+++ b/src/composables/loading.ts
@ -1,10 +1,10 @@
+import { unwrapInjected } from "../utils";
 import {
  inject,
-  unref,
  computed,
-  Ref,
  watchEffect,
-  InjectionKey
+  type Ref,
+  type InjectionKey
 } from "vue-demi";
 import { EChartsType } from "../types";

@ -22,7 +22,7 @@ export function useLoading(
 ): void {
  const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
  const realLoadingOptions = computed(() => ({
-    ...unref(defaultLoadingOptions),
+    ...unwrapInjected(defaultLoadingOptions, {}),
    ...loadingOptions?.value
  }));

--- a/src/demo/Demo.vue
+++ b/src/demo/Demo.vue
@ -1,7 +1,12 @@
 <template>
  <main>
-    <!-- <v-chart
-    class="echarts" id="logo" :option="logo" :init-options="initOptions" autoresize />-->
+    <v-chart
+      class="echarts"
+      id="logo"
+      :option="logo"
+      :init-options="initOptions"
+      autoresize
+    />
    <h1>
      <a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
    </h1>
@ -328,8 +333,8 @@ import {
  DataZoomComponent
 } from "echarts/components";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
-// import "echarts-liquidfill";
-// import logo from "./data/logo";
+import "echarts-liquidfill";
+import logo from "./data/logo";
 import getBar from "./data/bar";
 import pie from "./data/pie";
 import polar from "./data/polar";
@ -383,6 +388,7 @@ export default {
    const options = qs.parse(location.search, { ignoreQueryPrefix: true });
    return {
      options,
+      logo,
      bar: getBar(),
      pie,
      polar,
@ -719,7 +725,6 @@ select {
  font: inherit;
  padding: 0 0.5em;
  transition: opacity 0.3s;
-  -webkit-appearance: none;
  transition: all 0.2s;

  &:focus {
@ -890,10 +895,6 @@ figure {
      font-size: 0.8em;
    }

-    select {
-      -webkit-appearance: none;
-    }
-
    input[type="checkbox"] {
      display: none;

--- a/src/index.vue2.d.ts
+++ b/src/index.vue2.d.ts
@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { Ref, DefineComponent } from "vue-demi";
-import { Option, InitOptions, UpdateOptions, EChartsType } from "./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";
@ -47,7 +53,10 @@ declare const Chart: DefineComponent<
  },
  {},
  {},
-  ChartMethods
+  ChartMethods,
+  {},
+  {},
+  Emits
 >;

 export default Chart;
--- a/src/style.css
+++ b/src/style.css
@ -1 +1 @@
-x-vue-echarts{display:block;width:100%;height:100%}
+x-vue-echarts{display:block;width:100%;height:100%;min-width:0}
--- a/src/types.ts
+++ b/src/types.ts
@ -1,12 +1,23 @@
-import { init, SetOptionOpts } from "echarts/core";
-import { Ref } from "vue";
+import {
+  init,
+  type SetOptionOpts,
+  type ECElementEvent,
+  type ElementEvent
+} from "echarts/core";
+import type { Ref } from "vue";
+
+export type Injection<T> = T | null | Ref<T | null> | { value: T | null };

 type InitType = typeof init;
 export type InitParameters = Parameters<InitType>;
 export type Theme = NonNullable<InitParameters[1]>;
-export type ThemeInjection = Theme | null | Ref<Theme | null>;
+export type ThemeInjection = Injection<Theme>;
 export type InitOptions = NonNullable<InitParameters[2]>;
-export type InitOptionsInjection = InitOptions | null | Ref<InitOptions | null>;
+
+export type InitOptionsInjection = Injection<InitOptions>;
+
+export type UpdateOptions = SetOptionOpts;
+export type UpdateOptionsInjection = Injection<UpdateOptions>;

 export type EChartsType = ReturnType<InitType>;
 type ZRenderType = ReturnType<EChartsType["getZr"]>;
@ -14,8 +25,73 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];

-export type UpdateOptions = SetOptionOpts;
-export type UpdateOptionsInjection =
-  | UpdateOptions
-  | null
-  | Ref<UpdateOptions | null>;
+type MouseEventName =
+  | "click"
+  | "dblclick"
+  | "mouseout"
+  | "mouseover"
+  | "mouseup"
+  | "mousedown"
+  | "mousemove"
+  | "contextmenu"
+  | "globalout";
+
+type ElementEventName =
+  | MouseEventName
+  | "mousewheel"
+  | "drag"
+  | "dragstart"
+  | "dragend"
+  | "dragenter"
+  | "dragleave"
+  | "dragover"
+  | "drop";
+
+type ZRenderEventName = `zr:${ElementEventName}`;
+
+type OtherEventName =
+  | "highlight"
+  | "downplay"
+  | "selectchanged"
+  | "legendselectchanged"
+  | "legendselected"
+  | "legendunselected"
+  | "legendselectall"
+  | "legendinverseselect"
+  | "legendscroll"
+  | "datazoom"
+  | "datarangeselected"
+  | "graphroam"
+  | "georoam"
+  | "treeroam"
+  | "timelinechanged"
+  | "timelineplaychanged"
+  | "restore"
+  | "dataviewchanged"
+  | "magictypechanged"
+  | "geoselectchanged"
+  | "geoselected"
+  | "geounselected"
+  | "axisareaselected"
+  | "brush"
+  | "brushEnd"
+  | "brushselected"
+  | "globalcursortaken";
+
+type MouseEmits = {
+  [key in MouseEventName]: (params: ECElementEvent) => boolean;
+};
+
+type ZRenderEmits = {
+  [key in ZRenderEventName]: (params: ElementEvent) => boolean;
+};
+
+type OtherEmits = {
+  [key in OtherEventName]: null;
+};
+
+export type Emits = MouseEmits &
+  OtherEmits & {
+    rendered: (params: { elapsedTime: number }) => boolean;
+    finished: () => boolean;
+  } & ZRenderEmits;
--- a/src/utils.ts
+++ b/src/utils.ts
@ -1,3 +1,6 @@
+import { unref } from "vue-demi";
+import type { Injection } from "./types";
+
 type Attrs = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: any;
@ -18,3 +21,16 @@ export function omitOn(attrs: Attrs): Attrs {

  return result;
 }
+
+export function unwrapInjected<T, V>(
+  injection: Injection<T>,
+  defaultValue: V
+): T | V {
+  const value = unref(injection);
+
+  if (value && typeof value === "object" && "value" in value) {
+    return value.value || defaultValue;
+  }
+
+  return value || defaultValue;
+}
--- a/src/wc.ts
+++ b/src/wc.ts
@ -0,0 +1,51 @@
+let registered: boolean | null = null;
+
+export const TAG_NAME = "x-vue-echarts";
+
+export interface EChartsElement extends HTMLElement {
+  __dispose: (() => void) | null;
+}
+
+export function register(): boolean {
+  if (registered != null) {
+    return registered;
+  }
+
+  if (
+    typeof HTMLElement === "undefined" ||
+    typeof customElements === "undefined"
+  ) {
+    return (registered = false);
+  }
+
+  try {
+    // Class definitions cannot be transpiled to ES5
+    // so we are doing a little trick here to ensure
+    // we are using native classes. As we use this as
+    // a progressive enhancement, it will be fine even
+    // if the browser doesn't support native classes.
+    const reg = new Function(
+      "tag",
+      `class EChartsElement extends HTMLElement {
+  __dispose = null;
+
+  disconnectedCallback() {
+    if (this.__dispose) {
+      this.__dispose();
+      this.__dispose = null;
+    }
+  }
+}
+
+if (customElements.get(tag) == null) {
+  customElements.define(tag, EChartsElement);
+}
+`
+    );
+    reg(TAG_NAME);
+  } catch (e) {
+    return (registered = false);
+  }
+
+  return (registered = true);
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -14,5 +14,12 @@ module.exports = {
  },
  chainWebpack: config => {
    config.entry("app").clear().add("./src/demo/main.ts");
+
+    config.module
+      .rule("svg")
+      .clear()
+      .test(/\.svg$/)
+      .use("raw-loader")
+      .loader("raw-loader");
  }
 };
Author	SHA1	Message	Date
Justineo	f5819e4361	chore: update deps and version	2023-01-09 12:58:10 +08:00
Justineo	16b9274ae1	fix: fix types for mouse events	2023-01-09 12:53:58 +08:00
Justineo	cf963efc6d	docs: sync chinese readme	2023-01-08 23:41:15 +08:00
JonasV	fd36c5120b	docs: `@nuxtjs/composition-api` is still needed for 2.7+	2023-01-08 23:39:55 +08:00
Justineo	4fab6c272b	chore: make emit type a little more consistent with runtime	2023-01-08 23:38:03 +08:00
Justineo	0edfb3936c	types: use more precise typings for event handlers, update peer deps for echarts	2023-01-02 23:41:40 +08:00
Justineo	ed4bd392ff	chore: update readme version	2023-01-01 23:52:32 +08:00
Justineo	58e7b13652	feat: improve typings for mouse events	2023-01-01 23:51:43 +08:00
Justineo	0a4601bc1a	feat: delay disposal to disconnection if possible	2022-12-29 18:13:51 +08:00
Justineo	3b2f2b547b	docs: update readme version	2022-12-19 02:19:14 +08:00
Justineo	977db3d415	fix: autoresize now works for grid layout by default (#675 )	2022-12-19 02:03:25 +08:00
Justineo	0bb1839392	feat: add basic types for events	2022-12-18 19:38:04 +08:00
Justineo	5f57d3fb1c	docs: update readme version	2022-12-17 01:46:23 +08:00
Justineo	0470d69bba	fix: revert overflow hidden	2022-12-17 01:44:00 +08:00
Justineo	05111f5b6f	fix: fix relative path	2022-12-17 01:36:31 +08:00
Justineo	f1ca32d3a4	docs: update readme	2022-12-17 01:27:20 +08:00
Justineo	669ba1cbbb	fix: refine style and remove unused import	2022-12-17 01:26:08 +08:00
Justineo	ec124f4bf7	feat: make it possible to dynamically change provide values for Vue 2	2022-12-17 01:23:29 +08:00
Justineo	9491a904a0	docs: update readme [skip ci]	2022-12-07 20:00:09 +08:00
Justineo	d773416b71	chore: bump version and update changelog	2022-12-07 19:46:46 +08:00
Justineo	20858a6ed0	chore: bring logo back for demo site	2022-12-07 19:44:58 +08:00
Justineo	6304a1b15a	fix: attributes should fall onto the root for Vue 2 (#670 )	2022-12-07 19:44:29 +08:00