From 456c318ac64214b6fba9ddcd4a219f7601daaada Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Fri, 26 Jan 2024 02:10:00 +0800
Subject: [PATCH] perf(projects): echarts loading style

---
 src/hooks/chart/use-echarts.ts | 38 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/hooks/chart/use-echarts.ts b/src/hooks/chart/use-echarts.ts
index f0591330..eecc3d3c 100644
--- a/src/hooks/chart/use-echarts.ts
+++ b/src/hooks/chart/use-echarts.ts
@@ -80,17 +80,7 @@ interface ChartHooks {
  * @param optionsFactory echarts options factory function
  * @param darkMode dark mode
  */
-export function useEcharts<T extends ECOption>(
-  optionsFactory: () => T,
-  hooks: ChartHooks = {
-    onRender(chart) {
-      chart.showLoading();
-    },
-    onUpdated(chart) {
-      chart.hideLoading();
-    }
-  }
-) {
+export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: ChartHooks = {}) {
   const scope = effectScope();
 
   const themeStore = useThemeStore();
@@ -103,6 +93,24 @@ export function useEcharts<T extends ECOption>(
   let chart: echarts.ECharts | null = null;
   const chartOptions: T = optionsFactory();
 
+  const {
+    onRender = instance => {
+      const textColor = darkMode.value ? 'rgb(224, 224, 224)' : 'rgb(31, 31, 31)';
+      const maskColor = darkMode.value ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.8)';
+
+      instance.showLoading({
+        color: themeStore.themeColor,
+        textColor,
+        fontSize: 14,
+        maskColor
+      });
+    },
+    onUpdated = instance => {
+      instance.hideLoading();
+    },
+    onDestroy
+  } = hooks;
+
   /**
    * whether can render chart
    *
@@ -135,7 +143,7 @@ export function useEcharts<T extends ECOption>(
 
     chart?.setOption({ ...updatedOpts, backgroundColor: 'transparent' });
 
-    await hooks?.onUpdated?.(chart!);
+    await onUpdated?.(chart!);
   }
 
   /** render chart */
@@ -149,7 +157,7 @@ export function useEcharts<T extends ECOption>(
 
       chart.setOption({ ...chartOptions, backgroundColor: 'transparent' });
 
-      await hooks?.onRender?.(chart);
+      await onRender?.(chart);
     }
   }
 
@@ -162,7 +170,7 @@ export function useEcharts<T extends ECOption>(
   async function destroy() {
     if (!chart) return;
 
-    await hooks?.onDestroy?.(chart);
+    await onDestroy?.(chart);
     chart?.dispose();
     chart = null;
   }
@@ -171,7 +179,7 @@ export function useEcharts<T extends ECOption>(
   async function changeTheme() {
     await destroy();
     await render();
-    await hooks?.onUpdated?.(chart!);
+    await onUpdated?.(chart!);
   }
 
   /**