fix: fix event support for Vue 2, fix #510

src/ECharts.ts

@@ -54,7 +54,9 @@ export default defineComponent({
     ...autoresizeProps,
     ...loadingProps
   },
-  setup(props, { attrs }) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-expect-error
+  setup(props, { attrs, listeners }) {
     const root = ref<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
@@ -98,21 +100,33 @@ export default defineComponent({
         instance.group = props.group;
       }
 
-      Object.keys(attrs)
-        .filter(key => key.indexOf("on") === 0)
-        .forEach(key => {
-          const handler = attrs[key] as any;
+      let realListeners = listeners;
+      if (!realListeners) {
+        realListeners = {};
 
-          if (!handler) {
-            return;
-          }
+        Object.keys(attrs)
+          .filter(key => key.indexOf("on") === 0 && key.length > 2)
+          .forEach(key => {
+            // onClick    -> c + lick
+            // onZr:click -> z + r:click
+            const event = key.charAt(2).toLowerCase() + key.slice(3);
+            realListeners[event] = attrs[key];
+          });
+      }
 
-          if (key.indexOf("onZr:") === 0) {
-            instance.getZr().on(key.slice(5).toLowerCase(), handler);
-          } else {
-            instance.on(key.slice(2).toLowerCase(), handler);
-          }
-        });
+      Object.keys(realListeners).forEach(key => {
+        const handler = realListeners[key] as any;
+
+        if (!handler) {
+          return;
+        }
+
+        if (key.indexOf("zr:") === 0) {
+          instance.getZr().on(key.slice(3).toLowerCase(), handler);
+        } else {
+          instance.on(key.toLowerCase(), handler);
+        }
+      });
 
       instance.setOption(option || realOption.value, realUpdateOptions.value);
     }

src/demo/Demo.vue

@@ -272,7 +272,7 @@
 <script>
 /* eslint-disable no-console */
 import qs from "qs";
-import VChart from "../../dist/index.esm";
+import VChart from "../ECharts";
 
 import * as echarts from "echarts/core";
 import {
@@ -397,11 +397,11 @@ export default {
     };
   },
   methods: {
-    handleClick() {
-      console.log("click from echarts");
+    handleClick(...args) {
+      console.log("click from echarts", ...args);
     },
-    handleZrClick() {
-      console.log("click from zrender");
+    handleZrClick(...args) {
+      console.log("click from zrender", ...args);
     },
     refresh() {
       // simulating async data from server

src/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { init } from "echarts/core";
 import { Ref } from "vue";
 
@@ -21,4 +22,7 @@ export interface UpdateOptions {
   replaceMerge?: any;
   transition?: any;
 }
-export type UpdateOptionsInjection = UpdateOptions | null | Ref<UpdateOptions | null>;
+export type UpdateOptionsInjection =
+  | UpdateOptions
+  | null
+  | Ref<UpdateOptions | null>;