feat: support injection for theme

README.md

@@ -155,6 +155,8 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/next/src/dem
 
   Theme to be applied. See `echarts.init`'s `theme` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)
 
+  Injection key: `THEME_KEY`.
+
 - `option: object`
 
   ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. Read more [here →](https://echarts.apache.org/en/option.html)
@@ -189,7 +191,7 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/next/src/dem
 
 ### Provide / Inject
 
-Vue-ECharts provides provide/inject API for `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `init-options` you can use the provide API like this:
+Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `init-options` you can use the provide API like this:
 
 <details open>
 <summary>Vue 3</summary>

README.zh-Hans.md

@@ -153,6 +153,8 @@ Vue.component("v-chart", VueECharts);
 
   要应用的主题。请参考 `echarts.init` 的 `theme` 参数。[前往 →](https://echarts.apache.org/zh/api.html#echarts.init)
 
+  Inject 键名：`THEME_KEY`。
+
 - `option: object`
 
   ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 `setOption` 方法。查看[详情 →](https://echarts.apache.org/zh/option.html)
@@ -187,7 +189,7 @@ Vue.component("v-chart", VueECharts);
 
 ### Provide / Inject
 
-Vue-ECharts 为 `init-options`、`update-options` 和 `loading-options` 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置：
+Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options` 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置：
 
 <details open>
 <summary>Vue 3</summary>

src/ECharts.ts

@@ -17,12 +17,13 @@ import {
 import { init as initChart } from "echarts/core";
 import {
   EChartsType,
+  Option,
+  Theme,
+  ThemeInjection,
   InitOptions,
   InitOptionsInjection,
-  Option,
   UpdateOptions,
-  UpdateOptionsInjection,
+  UpdateOptionsInjection
-  Theme
 } from "./types";
 import {
   usePublicAPI,
@@ -33,6 +34,7 @@ import {
 } from "./composables";
 import "./style.css";
 
+export const THEME_KEY = "ecTheme";
 export const INIT_OPTIONS_KEY = "ecInitOptions";
 export const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
 export { LOADING_OPTIONS_KEY } from "./composables";
@@ -52,28 +54,29 @@ export default defineComponent({
     ...loadingProps
   },
   setup(props, { attrs }) {
-    const defaultInitOptions = inject(
-      INIT_OPTIONS_KEY,
-      {}
-    ) as InitOptionsInjection;
-    const defaultUpdateOptions = inject(
-      UPDATE_OPTIONS_KEY,
-      {}
-    ) as UpdateOptionsInjection;
     const root = ref<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
+    const defaultTheme = inject(THEME_KEY, null) as ThemeInjection;
+    const defaultInitOptions = inject(
+      INIT_OPTIONS_KEY,
+      null
+    ) as InitOptionsInjection;
+    const defaultUpdateOptions = inject(
+      UPDATE_OPTIONS_KEY,
+      null
+    ) as UpdateOptionsInjection;
     const realOption = computed(
       () => manualOption.value || props.option || Object.create(null)
     );
-    const realInitOptions = computed(() => ({
+    const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
-      ...unref(defaultInitOptions),
+    const realInitOptions = computed(
-      ...props.initOptions
+      () => props.initOptions || unref(defaultInitOptions) || {}
-    }));
+    );
-    const realUpdateOptions = computed(() => ({
+    const realUpdateOptions = computed(
-      ...unref(defaultUpdateOptions),
+      () => props.updateOptions || unref(defaultUpdateOptions) || {}
-      ...props.updateOptions
+    );
-    }));
+
     const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);
 
     function init(option?: Option) {
@@ -83,7 +86,7 @@ export default defineComponent({
 
       const instance = (chart.value = initChart(
         root.value,
-        props.theme,
+        realTheme.value,
         realInitOptions.value
       ));
 

src/types.ts

@@ -4,8 +4,9 @@ import { Ref } from "vue";
 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 InitOptions = NonNullable<InitParameters[2]>;
-export type InitOptionsInjection = InitOptions | Ref<InitOptions>;
+export type InitOptionsInjection = InitOptions | null | Ref<InitOptions | null>;
 
 export type EChartsType = ReturnType<InitType>;
 type SetOptionType = EChartsType["setOption"];
@@ -20,4 +21,4 @@ export interface UpdateOptions {
   replaceMerge?: any;
   transition?: any;
 }
-export type UpdateOptionsInjection = UpdateOptions | Ref<UpdateOptions>;
+export type UpdateOptionsInjection = UpdateOptions | null | Ref<UpdateOptions null>;