u

code/link56/link56-frontend-new/src/hooks/echarts.ts

@@ -1,12 +1,12 @@
-import { effectScope, nextTick, onScopeDispose, ref, watch } from "vue";
-import { useElementSize } from "@vueuse/core";
-import * as echarts from "echarts/core";
-import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart, RadarChart, ScatterChart } from "echarts/charts";
-import type { BarSeriesOption, GaugeSeriesOption, LineSeriesOption, PictorialBarSeriesOption, PieSeriesOption, RadarSeriesOption, ScatterSeriesOption } from "echarts/charts";
-import { DatasetComponent, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent } from "echarts/components";
-import type { DatasetComponentOption, GridComponentOption, LegendComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption } from "echarts/components";
-import { LabelLayout, UniversalTransition } from "echarts/features";
-import { CanvasRenderer } from "echarts/renderers";
+import type { BarSeriesOption, GaugeSeriesOption, LineSeriesOption, PictorialBarSeriesOption, PieSeriesOption, RadarSeriesOption, ScatterSeriesOption } from 'echarts/charts'
+import type { DatasetComponentOption, GridComponentOption, LegendComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption } from 'echarts/components'
+import { useElementSize } from '@vueuse/core'
+import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts'
+import { DatasetComponent, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent } from 'echarts/components'
+import * as echarts from 'echarts/core'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue'
 
 export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
@@ -22,7 +22,7 @@ export type ECOption = echarts.ComposeOption<
   | GridComponentOption
   | ToolboxComponentOption
   | DatasetComponentOption
->;
+>
 
 echarts.use([
   TitleComponent,
@@ -41,13 +41,13 @@ echarts.use([
   GaugeChart,
   LabelLayout,
   UniversalTransition,
-  CanvasRenderer
-]);
+  CanvasRenderer,
+])
 
 interface ChartHooks {
-  onRender?: (chart: echarts.ECharts) => void | Promise<void>;
-  onUpdated?: (chart: echarts.ECharts) => void | Promise<void>;
-  onDestroy?: (chart: echarts.ECharts) => void | Promise<void>;
+  onRender?: (chart: echarts.ECharts) => void | Promise<void>
+  onUpdated?: (chart: echarts.ECharts) => void | Promise<void>
+  onDestroy?: (chart: echarts.ECharts) => void | Promise<void>
 }
 
 /**
@@ -57,33 +57,33 @@ interface ChartHooks {
  * @param darkMode dark mode
  */
 export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: ChartHooks = {}) {
-  const scope = effectScope();
+  const scope = effectScope()
 
-  const darkMode = ref(false);
+  const darkMode = ref(false)
 
-  const domRef = ref<HTMLElement | null>(null);
-  const initialSize = { width: 0, height: 0 };
-  const { width, height } = useElementSize(domRef, initialSize);
+  const domRef = ref<HTMLElement | null>(null)
+  const initialSize = { width: 0, height: 0 }
+  const { width, height } = useElementSize(domRef, initialSize)
 
-  let chart: echarts.ECharts | null = null;
-  const chartOptions: T = optionsFactory();
+  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)";
+      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({
         textColor,
         fontSize: 14,
-        maskColor
-      });
+        maskColor,
+      })
     },
     onUpdated = (instance) => {
-      instance.hideLoading();
+      instance.hideLoading()
     },
-    onDestroy
-  } = hooks;
+    onDestroy,
+  } = hooks
 
   /**
    * whether can render chart
@@ -91,12 +91,12 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
    * when domRef is ready and initialSize is valid
    */
   function canRender() {
-    return domRef.value && initialSize.width > 0 && initialSize.height > 0;
+    return domRef.value && initialSize.width > 0 && initialSize.height > 0
   }
 
   /** is chart rendered */
   function isRendered() {
-    return Boolean(domRef.value && chart);
+    return Boolean(domRef.value && chart)
   }
 
   /**
@@ -105,59 +105,61 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
    * @param callback callback function
    */
   async function updateOptions(callback: (opts: T, optsFactory: () => T) => ECOption = () => chartOptions) {
-    if (!isRendered()) return;
+    if (!isRendered())
+      return
 
-    const updatedOpts = callback(chartOptions, optionsFactory);
+    const updatedOpts = callback(chartOptions, optionsFactory)
 
-    Object.assign(chartOptions, updatedOpts);
+    Object.assign(chartOptions, updatedOpts)
 
     if (isRendered()) {
-      chart?.clear();
+      chart?.clear()
     }
 
-    chart?.setOption({ ...updatedOpts, backgroundColor: "transparent" });
+    chart?.setOption({ ...updatedOpts, backgroundColor: 'transparent' })
 
-    await onUpdated?.(chart!);
+    await onUpdated?.(chart!)
   }
 
   function setOptions(options: T) {
-    chart?.setOption(options);
+    chart?.setOption(options)
   }
 
   /** render chart */
   async function render() {
     if (!isRendered()) {
-      const chartTheme = darkMode.value ? "dark" : "light";
+      const chartTheme = darkMode.value ? 'dark' : 'light'
 
-      await nextTick();
+      await nextTick()
 
-      chart = echarts.init(domRef.value, chartTheme);
+      chart = echarts.init(domRef.value, chartTheme)
 
-      chart.setOption({ ...chartOptions, backgroundColor: "transparent" });
+      chart.setOption({ ...chartOptions, backgroundColor: 'transparent' })
 
-      await onRender?.(chart);
+      await onRender?.(chart)
     }
   }
 
   /** resize chart */
   function resize() {
-    chart?.resize();
+    chart?.resize()
   }
 
   /** destroy chart */
   async function destroy() {
-    if (!chart) return;
+    if (!chart)
+      return
 
-    await onDestroy?.(chart);
-    chart?.dispose();
-    chart = null;
+    await onDestroy?.(chart)
+    chart?.dispose()
+    chart = null
   }
 
   /** change chart theme */
   async function changeTheme() {
-    await destroy();
-    await render();
-    await onUpdated?.(chart!);
+    await destroy()
+    await render()
+    await onUpdated?.(chart!)
   }
 
   /**
@@ -167,47 +169,47 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
    * @param h height
    */
   async function renderChartBySize(w: number, h: number) {
-    initialSize.width = w;
-    initialSize.height = h;
+    initialSize.width = w
+    initialSize.height = h
 
     // size is abnormal, destroy chart
     if (!canRender()) {
-      await destroy();
+      await destroy()
 
-      return;
+      return
     }
 
     // resize chart
     if (isRendered()) {
-      resize();
+      resize()
     }
 
     // render chart
-    await render();
+    await render()
 
     if (chart) {
-      await onUpdated?.(chart);
+      await onUpdated?.(chart)
     }
   }
 
   scope.run(() => {
     watch([width, height], ([newWidth, newHeight]) => {
-      renderChartBySize(newWidth, newHeight);
-    });
+      renderChartBySize(newWidth, newHeight)
+    })
 
     watch(darkMode, () => {
-      changeTheme();
-    });
-  });
+      changeTheme()
+    })
+  })
 
   onScopeDispose(() => {
-    destroy();
-    scope.stop();
-  });
+    destroy()
+    scope.stop()
+  })
 
   return {
     domRef,
     updateOptions,
-    setOptions
-  };
+    setOptions,
+  }
 }