feat: support ref for provide api

src/ECharts.ts

@@ -18,8 +18,10 @@ import { init as initChart } from "echarts/core";
 import {
   EChartsType,
   InitOptions,
+  InitOptionsInjection,
   Option,
   UpdateOptions,
+  UpdateOptionsInjection,
   Theme
 } from "./types";
 import {
@@ -50,11 +52,14 @@ export default defineComponent({
     ...loadingProps
   },
   setup(props, { attrs }) {
-    const defaultInitOptions = inject(INIT_OPTIONS_KEY, {}) as InitOptions;
+    const defaultInitOptions = inject(
+      INIT_OPTIONS_KEY,
+      {}
+    ) as InitOptionsInjection;
     const defaultUpdateOptions = inject(
       UPDATE_OPTIONS_KEY,
       {}
-    ) as UpdateOptions;
+    ) as UpdateOptionsInjection;
     const root = ref<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
@@ -62,11 +67,11 @@ export default defineComponent({
       () => manualOption.value || props.option || Object.create(null)
     );
     const realInitOptions = computed(() => ({
-      ...defaultInitOptions,
+      ...unref(defaultInitOptions),
       ...props.initOptions
     }));
     const realUpdateOptions = computed(() => ({
-      ...defaultUpdateOptions,
+      ...unref(defaultUpdateOptions),
       ...props.updateOptions
     }));
     const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);

src/composables/loading.ts

@@ -1,4 +1,4 @@
-import { inject, computed, Ref, watchEffect } from "vue-demi";
+import { inject, unref, computed, Ref, watchEffect } from "vue-demi";
 import { EChartsType } from "../types";
 
 export const LOADING_OPTIONS_KEY = "ecLoadingOptions";
@@ -8,9 +8,11 @@ export function useLoading(
   loading: Ref<boolean>,
   loadingOptions?: Ref<object | undefined>
 ): void {
-  const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {}) as object;
+  const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {}) as
+    | object
+    | Ref<object>;
   const realLoadingOptions = computed(() => ({
-    ...defaultLoadingOptions,
+    ...unref(defaultLoadingOptions),
     ...loadingOptions?.value
   }));
 

src/demo/Demo.vue

@@ -4,6 +4,9 @@
     class="echarts" id="logo" :option="logo" :init-options="initOptions" autoresize /> -->
     <h1><a href="https://github.com/Justineo/vue-echarts">Vue-ECharts</a></h1>
     <p class="desc">ECharts component for Vue.js.</p>
+    <p>
+      <a href="https://github.com/ecomfe/vue-echarts#readme">Docs &rarr;</a>
+    </p>
 
     <h2 id="bar">
       <a href="#bar"

src/types.ts

@@ -1,9 +1,11 @@
 import { init } from "echarts/core";
+import { Ref } from "vue";
 
 type InitType = typeof init;
 export type InitParameters = Parameters<InitType>;
 export type Theme = NonNullable<InitParameters[1]>;
 export type InitOptions = NonNullable<InitParameters[2]>;
+export type InitOptionsInjection = InitOptions | Ref<InitOptions>;
 
 export type EChartsType = ReturnType<InitType>;
 type SetOptionType = EChartsType["setOption"];
@@ -18,3 +20,4 @@ export interface UpdateOptions {
   replaceMerge?: any;
   transition?: any;
 }
+export type UpdateOptionsInjection = UpdateOptions | Ref<UpdateOptions>;