feat: add basic types for events

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 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`.

README.md

@@ -310,7 +310,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.3.2"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -330,7 +330,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.3.2"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -399,16 +399,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 +419,35 @@ 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
@@ -464,6 +483,8 @@ You can bind events with Vue's `v-on` directive.
 </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:

README.zh-Hans.md

@@ -309,7 +309,7 @@ export default {
 ```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.3.2"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -329,7 +329,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.3.2"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -400,6 +400,8 @@ Vue.component("v-chart", VueECharts);
 </template>
 ```
 
+> **Note**
+>
 > 仅支持 `.once` 修饰符，因为其它修饰符都与 DOM 事件机制强耦合。
 
 Vue-ECharts 支持如下事件：
@@ -458,16 +460,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
+// 组合式 API
-provide(INIT_OPTIONS_KEY, ...)
+provide(THEME_KEY, 'dark')
 
-// options API
+// 选项式 API
 {
   provide: {
-    [INIT_OPTIONS_KEY]: { ... }
+    [THEME_KEY]: 'dark'
   }
 }
 ```
@@ -478,16 +480,35 @@ 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>
 
 ### 方法

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.2.3",
+  "version": "6.3.2",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -41,6 +41,7 @@
     "comment-mark": "^1.0.0",
     "core-js": "^3.23.0",
     "echarts": "^5.3.2",
+    "echarts-liquidfill": "^3.1.0",
     "eslint": "^7.20.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^8.7.1",
@@ -50,6 +51,7 @@
     "postcss-nested": "^5.0.5",
     "prettier": "^2.6.2",
     "qs": "^6.10.5",
+    "raw-loader": "^4.0.2",
     "resize-detector": "^0.3.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.72.1",
@@ -60,7 +62,7 @@
     "tslib": "^2.4.0",
     "typescript": "4.6.4",
     "vue": "^3.2.33",
-    "vue2": "npm:vue@^2.7.4",
+    "vue2": "npm:vue@^2.7.14",
     "webpack": "^5.72.1"
   },
   "peerDependencies": {

pnpm-lock.yaml

@@ -16,6 +16,7 @@ specifiers:
   comment-mark: ^1.0.0
   core-js: ^3.23.0
   echarts: ^5.3.2
+  echarts-liquidfill: ^3.1.0
   eslint: ^7.20.0
   eslint-plugin-prettier: ^3.3.1
   eslint-plugin-vue: ^8.7.1
@@ -25,6 +26,7 @@ specifiers:
   postcss-nested: ^5.0.5
   prettier: ^2.6.2
   qs: ^6.10.5
+  raw-loader: ^4.0.2
   resize-detector: ^0.3.0
   rimraf: ^3.0.2
   rollup: ^2.72.1
@@ -36,7 +38,7 @@ specifiers:
   typescript: 4.6.4
   vue: ^3.2.33
   vue-demi: ^0.13.2
-  vue2: npm:vue@^2.7.4
+  vue2: npm:vue@^2.7.14
   webpack: ^5.72.1
 
 dependencies:
@@ -48,10 +50,10 @@ 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
@@ -59,6 +61,7 @@ devDependencies:
   comment-mark: 1.1.1
   core-js: 3.23.3
   echarts: 5.3.3
+  echarts-liquidfill: 3.1.0_echarts@5.3.3
   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:
@@ -1934,9 +1938,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 +2052,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/babel-preset-app': 5.0.7_6aw556sdtr7wdbt7wby5rddhty
-      '@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
       thread-loader: 3.0.4_webpack@5.73.0
       webpack: 5.73.0
     transitivePeerDependencies:
       - '@swc/core'
+      - core-js
       - encoding
       - esbuild
       - supports-color
@@ -2074,7 +2081,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 +2101,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 +2123,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 +2148,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
@@ -2218,6 +2225,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,8 +2340,8 @@ packages:
       '@vue/compiler-core': 3.2.37
       '@vue/shared': 3.2.37
 
-  /@vue/compiler-sfc/2.7.4:
+  /@vue/compiler-sfc/2.7.14:
-    resolution: {integrity: sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==}
+    resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
     dependencies:
       '@babel/parser': 7.18.6
       postcss: 8.4.14
@@ -3328,7 +3336,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
@@ -3917,6 +3925,14 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: true
 
+  /echarts-liquidfill/3.1.0_echarts@5.3.3:
+    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
+    peerDependencies:
+      echarts: ^5.0.1
+    dependencies:
+      echarts: 5.3.3
+    dev: true
+
   /echarts/5.3.3:
     resolution: {integrity: sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==}
     dependencies:
@@ -6311,6 +6327,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'}
@@ -7475,10 +7502,10 @@ packages:
     resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
     dev: true
 
-  /vue/2.7.4:
+  /vue/2.7.14:
-    resolution: {integrity: sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==}
+    resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
     dependencies:
-      '@vue/compiler-sfc': 2.7.4
+      '@vue/compiler-sfc': 2.7.14
       csstype: 3.1.0
     dev: true
 

src/ECharts.ts

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   defineComponent,
-  unref,
   shallowRef,
   toRefs,
   watch,
@@ -28,7 +27,8 @@ import type {
   InitOptions,
   InitOptionsInjection,
   UpdateOptions,
-  UpdateOptionsInjection
+  UpdateOptionsInjection,
+  Emits
 } from "./types";
 import {
   usePublicAPI,
@@ -37,7 +37,7 @@ import {
   useLoading,
   loadingProps
 } from "./composables";
-import { omitOn } from "./utils";
+import { omitOn, unwrapInjected } from "./utils";
 import "./style.css";
 
 const TAG_NAME = "x-vue-echarts";
@@ -67,6 +67,7 @@ export default defineComponent({
     ...autoresizeProps,
     ...loadingProps
   },
+  emits: [] as unknown as Emits,
   inheritAttrs: false,
   setup(props, { attrs }) {
     const root = shallowRef<HTMLElement>();
@@ -81,12 +82,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));
 
@@ -281,7 +284,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);

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

src/demo/Demo.vue

@@ -1,7 +1,12 @@
 <template>
   <main>
-    <!-- <v-chart
+    <v-chart
-    class="echarts" id="logo" :option="logo" :init-options="initOptions" autoresize />-->
+      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 "echarts-liquidfill";
-// import logo from "./data/logo";
+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;
 

src/index.vue2.d.ts

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

src/types.ts

@@ -1,12 +1,18 @@
-import { init, SetOptionOpts } from "echarts/core";
+import { init, type SetOptionOpts } from "echarts/core";
-import { Ref } from "vue";
+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 +20,64 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
 
-export type UpdateOptions = SetOptionOpts;
+type EChartsEventName =
-export type UpdateOptionsInjection =
+  | "click"
-  | UpdateOptions
+  | "dblclick"
-  | null
+  | "mousedown"
-  | Ref<UpdateOptions | null>;
+  | "mousemove"
+  | "mouseup"
+  | "mouseover"
+  | "mouseout"
+  | "globalout"
+  | "contextmenu"
+  | "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"
+  | "rendered"
+  | "finished";
+type ZRenderEventName =
+  | "click"
+  | "dblclick"
+  | "mousewheel"
+  | "mouseout"
+  | "mouseover"
+  | "mouseup"
+  | "mousedown"
+  | "mousemove"
+  | "contextmenu"
+  | "drag"
+  | "dragstart"
+  | "dragend"
+  | "dragenter"
+  | "dragleave"
+  | "dragover"
+  | "drop"
+  | "globalout";
+type EventName = EChartsEventName | `zr:${ZRenderEventName}`;
+export type Emits = {
+  [key in EventName]: null;
+};

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

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