fix(charts): fix useCharts resize not work

src/hooks/web/useApexCharts.ts

@@ -1,23 +1,19 @@
 import { useTimeout } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
-import { ref, unref, Ref, nextTick } from 'vue';
+import { unref, Ref, nextTick } from 'vue';
 
 import ApexCharts from 'apexcharts';
 
 export function useApexCharts(elRef: Ref<HTMLDivElement>) {
-  const chartInstanceRef = ref<Nullable<ApexCharts>>(null);
+  let chartInstance: Nullable<ApexCharts> = null;
 
   function setOptions(options: any) {
     nextTick(() => {
       useTimeout(() => {
         const el = unref(elRef);
 
-        if (!el || !unref(el)) {
-          return;
-        }
-        chartInstanceRef.value = new ApexCharts(el, options);
-
-        const chartInstance = unref(chartInstanceRef);
+        if (!el || !unref(el)) return;
+        chartInstance = new ApexCharts(el, options);
 
         chartInstance && chartInstance.render();
       }, 30);
@@ -25,15 +21,11 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
   }
 
   tryOnUnmounted(() => {
-    let chartInstance = unref(chartInstanceRef);
-    if (!chartInstance) {
-      return;
-    }
-
+    if (!chartInstance) return;
     chartInstance.destroy();
-    chartInstanceRef.value = null;
     chartInstance = null;
   });
+
   return {
     setOptions,
   };

src/hooks/web/useECharts.ts

@@ -1,6 +1,6 @@
 import { useTimeout } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
-import { ref, unref, Ref, nextTick } from 'vue';
+import { unref, Ref, nextTick } from 'vue';
 import type { EChartOption, ECharts } from 'echarts';
 import echarts from 'echarts';
 import { useDebounce } from '/@/hooks/core/useDebounce';
@@ -12,7 +12,7 @@ export function useECharts(
   elRef: Ref<HTMLDivElement>,
   theme: 'light' | 'dark' | 'default' = 'light'
 ) {
-  const chartInstanceRef = ref<Nullable<ECharts>>(null);
+  let chartInstance: Nullable<ECharts> = null;
   let resizeFn: Fn = resize;
   let removeResizeFn: Fn = () => {};
 
@@ -25,7 +25,7 @@ export function useECharts(
     if (!el || !unref(el)) {
       return;
     }
-    chartInstanceRef.value = echarts.init(el, theme);
+    chartInstance = echarts.init(el, theme);
     const { removeEvent } = useEvent({
       el: window,
       name: 'resize',
@@ -39,21 +39,14 @@ export function useECharts(
       }, 30);
     }
   }
-  tryOnUnmounted(() => {
-    removeResizeFn();
-  });
 
   function setOptions(options: any, clear = true) {
     nextTick(() => {
       useTimeout(() => {
-        let chartInstance = unref(chartInstanceRef);
-
         if (!chartInstance) {
           init();
-          chartInstance = chartInstance = unref(chartInstanceRef);
-          if (!chartInstance) {
-            return;
-          }
+
+          if (!chartInstance) return;
         }
         clear && chartInstance.clear();
 
@@ -63,20 +56,20 @@ export function useECharts(
   }
 
   function resize() {
-    const chartInstance = unref(chartInstanceRef);
     if (!chartInstance) return;
     chartInstance.resize();
   }
 
   tryOnUnmounted(() => {
-    const chartInstance = unref(chartInstanceRef);
     if (!chartInstance) return;
+    removeResizeFn();
     chartInstance.dispose();
-    chartInstanceRef.value = null;
+    chartInstance = null;
   });
 
   return {
     setOptions,
     echarts,
+    resize,
   };
 }

src/hooks/web/useWatermark.ts

@@ -11,7 +11,7 @@ export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.bo
       const el = unref(appendEl);
       el && el.removeChild(domId);
     }
-    window.addEventListener('resize', func);
+    window.removeEventListener('resize', func);
   };
   const createWatermark = (str: string) => {
     clear();