refactor: package chart-ui integrated into plugins (#4238)

* refactor: package chart-ui integrated into plugins

* fix: lint error

packages/effects/plugins/src/echarts/echarts-ui.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  height?: string;
+  width?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  height: '300px',
+  width: '100%',
+});
+</script>
+
+<template>
+  <div v-bind="$attrs" :style="{ height, width }"></div>
+</template>

packages/effects/plugins/src/echarts/echarts.ts

@@ -0,0 +1,59 @@
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption,
+} from 'echarts/charts';
+import type {
+  DatasetComponentOption,
+  GridComponentOption,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+} from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  // 数据集组件
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | DatasetComponentOption
+  | GridComponentOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  PieChart,
+  RadarChart,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LegendComponent,
+  ToolboxComponent,
+]);
+
+export default echarts;

packages/effects/plugins/src/echarts/index.ts

@@ -0,0 +1,3 @@
+export * from './echarts';
+export { default as EchartsUI } from './echarts-ui.vue';
+export * from './use-echarts';

packages/effects/plugins/src/echarts/use-echarts.ts

@@ -0,0 +1,113 @@
+import type { EChartsOption } from 'echarts';
+
+import type EchartsUI from './echarts-ui.vue';
+
+import type { Ref } from 'vue';
+import { computed, nextTick, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import {
+  tryOnUnmounted,
+  useDebounceFn,
+  useResizeObserver,
+  useTimeoutFn,
+  useWindowSize,
+} from '@vueuse/core';
+
+import echarts from './echarts';
+
+type EchartsUIType = typeof EchartsUI | undefined;
+
+type EchartsThemeType = 'dark' | 'light' | null;
+
+function useEcharts(chartRef: Ref<EchartsUIType>) {
+  let chartInstance: echarts.ECharts | null = null;
+  let cacheOptions: EChartsOption = {};
+
+  const { isDark } = usePreferences();
+  const { height, width } = useWindowSize();
+  const resizeHandler: () => void = useDebounceFn(resize, 200);
+
+  const getOptions = computed((): EChartsOption => {
+    if (!isDark.value) {
+      return cacheOptions;
+    }
+
+    return {
+      backgroundColor: 'transparent',
+      ...cacheOptions,
+    };
+  });
+
+  const initCharts = (t?: EchartsThemeType) => {
+    const el = chartRef?.value?.$el;
+    if (!el) {
+      return;
+    }
+    chartInstance = echarts.init(el, t || isDark.value ? 'dark' : null);
+
+    return chartInstance;
+  };
+
+  const renderEcharts = (options: EChartsOption, clear = true) => {
+    cacheOptions = options;
+    return new Promise((resolve) => {
+      if (chartRef.value?.offsetHeight === 0) {
+        useTimeoutFn(() => {
+          renderEcharts(getOptions.value);
+          resolve(null);
+        }, 30);
+        return;
+      }
+      nextTick(() => {
+        useTimeoutFn(() => {
+          if (!chartInstance) {
+            const instance = initCharts();
+            if (!instance) return;
+          }
+          clear && chartInstance?.clear();
+          chartInstance?.setOption(getOptions.value);
+          resolve(null);
+        }, 30);
+      });
+    });
+  };
+
+  function resize() {
+    chartInstance?.resize({
+      animation: {
+        duration: 300,
+        easing: 'quadraticIn',
+      },
+    });
+  }
+
+  watch([width, height], () => {
+    resizeHandler?.();
+  });
+
+  useResizeObserver(chartRef as never, resizeHandler);
+
+  watch(isDark, () => {
+    if (chartInstance) {
+      chartInstance.dispose();
+      initCharts();
+      renderEcharts(cacheOptions);
+      resize();
+    }
+  });
+
+  tryOnUnmounted(() => {
+    // 销毁实例，释放资源
+    chartInstance?.dispose();
+  });
+  return {
+    renderEcharts,
+    resize,
+  };
+}
+
+export { useEcharts };
+
+export type { EchartsUIType };