feat: vue-echarts-next first version

src/composables/loading.ts

@@ -0,0 +1,41 @@
+import { Ref, PropType, watchEffect } from "vue";
+import { EChartsType } from "@/types";
+
+export interface LoadingOptions {
+  text?: string;
+  color?: string;
+  textColor?: string;
+  maskColor?: string;
+  zlevel?: number;
+  fontSize?: number;
+  showSpinner?: boolean;
+  spinnerRadius?: number;
+  lineWidth?: number;
+  fontWeight?: string | number;
+  fontStyle?: string;
+  fontFamily?: string;
+}
+
+export function useLoading(
+  chart: Ref<EChartsType | undefined>,
+  loading: Ref<boolean>,
+  loadingOptions?: Ref<LoadingOptions | undefined>
+): void {
+  watchEffect(() => {
+    const instance = chart.value;
+    if (!instance) {
+      return;
+    }
+
+    if (loading.value) {
+      instance.showLoading(loadingOptions?.value);
+    } else {
+      instance.hideLoading();
+    }
+  });
+}
+
+export const loadingProps = {
+  loading: Boolean,
+  loadingOptions: Object as PropType<LoadingOptions>
+};