fix: make the .chart getter work with Vue 2

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 * Changed `updateOptions.lazyUpdate` to `true` by default. ([#533](https://github.com/ecomfe/vue-echarts/issues/533#issuecomment-809883909))
 * Only perform an additional `resize` call after init within a task. ([#533](https://github.com/ecomfe/vue-echarts/issues/533#issuecomment-809883909))
+* The `.chart` getter API now works for Vue 2. (#542)
 
 ## 6.0.0-rc.4
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-echarts",
   "description": "Vue.js component for Apache ECharts.",
-  "version": "6.0.0-rc.4",
+  "version": "6.0.0-rc.5",
   "repository": "https://github.com/ecomfe/vue-echarts.git",
   "license": "MIT",
   "author": "GU Yiling <justice360@gmail.com>",

src/ECharts.ts

@@ -14,8 +14,7 @@ import {
   nextTick,
   PropType,
   watchEffect,
-  Vue2,
+  Vue2
-  getCurrentInstance
 } from "vue-demi";
 import { init as initChart } from "echarts/core";
 import {
@@ -64,6 +63,9 @@ export default defineComponent({
     ...loadingProps
   },
   inheritAttrs: false,
+  created() {
+    console.log(this);
+  },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   // @ts-expect-error
   setup(props, { attrs, listeners }) {
@@ -145,7 +147,16 @@ export default defineComponent({
 
       function resize() {
         if (instance && !instance.isDisposed()) {
-          instance.resize();
+          // temporarily suppress errors caused by https://github.com/apache/echarts/issues/14846
+          try {
+            instance.resize();
+          } catch (e) {
+            if (e.message === "Cannot read property 'get' of undefined") {
+              return;
+            }
+
+            throw e;
+          }
         }
       }
 
@@ -237,23 +248,13 @@ export default defineComponent({
 
     onUnmounted(cleanup);
 
-    const chartGetter = {
+    return {
-      get() {
+      chart,
-        return unref(chart);
-      }
-    };
-
-    const exposed = {
       root,
       setOption,
       nonEventAttrs,
       ...publicApi
     };
-
-    Object.defineProperty(getCurrentInstance(), "chart", chartGetter);
-    Object.defineProperty(exposed, "chart", chartGetter);
-
-    return exposed;
   },
   render() {
     const attrs = { ...this.nonEventAttrs };

src/composables/api.ts

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

src/demo/Demo.vue

@@ -557,8 +557,6 @@ export default {
   },
   mounted() {
     this.startActions();
-
-    console.log(this.$refs.pie.chart);
   }
 };
 </script>