refactor: 使用useEcharts重构缓存监控

apps/web-antd/src/views/monitor/cache/components/CommandChart.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 import type { EChartsOption } from 'echarts';
 
-import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
 import { preferences } from '@vben/preferences';
 
-import * as echarts from 'echarts';
-
 export default defineComponent({
+  components: { EchartsUI },
   name: 'CommandChart',
   props: {
     data: {
@@ -18,31 +18,25 @@ export default defineComponent({
   setup(props, { expose }) {
     expose({});
 
-    const commandHtmlRef = ref<HTMLDivElement>();
-    const echartsInstance = shallowRef<echarts.ECharts | null>(null);
+    const chartRef = ref<EchartsUIType>();
+    const { renderEcharts } = useEcharts(chartRef);
 
     watch(
       () => props.data,
       () => {
-        if (!commandHtmlRef.value) return;
+        if (!chartRef.value) return;
         setEchartsOption(props.data);
       },
       { immediate: true },
     );
 
     onMounted(() => {
-      echartsInstance.value = echarts.init(
-        commandHtmlRef.value,
-        preferences.theme.mode,
-      );
       setEchartsOption(props.data);
     });
 
     watch(
       () => preferences.theme.mode,
-      (mode) => {
-        echartsInstance.value?.dispose();
-        echartsInstance.value = echarts.init(commandHtmlRef.value, mode);
+      () => {
         setEchartsOption(props.data);
       },
     );
@@ -53,7 +47,7 @@ export default defineComponent({
           {
             animationDuration: 1000,
             animationEasing: 'cubicInOut',
-            center: ['50%', '38%'],
+            center: ['50%', '50%'],
             data,
             name: '命令',
             radius: [15, 95],
@@ -66,18 +60,20 @@ export default defineComponent({
           trigger: 'item',
         },
       };
-      echartsInstance.value?.setOption(option);
+      renderEcharts(option);
     }
 
     return {
-      commandHtmlRef,
+      chartRef,
     };
   },
 });
 </script>
 
 <template>
-  <div ref="commandHtmlRef" class="h-[400px] w-full"></div>
+  <div class="flex h-[400px] w-full items-center justify-center">
+    <EchartsUI ref="chartRef" />
+  </div>
 </template>
 
 <style scoped></style>

apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 import type { EChartsOption } from 'echarts';
 
-import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
 import { preferences } from '@vben/preferences';
 
-import * as echarts from 'echarts';
-
 export default defineComponent({
+  components: { EchartsUI },
   name: 'MemoryChart',
   props: {
     data: {
@@ -18,8 +18,8 @@ export default defineComponent({
   setup(props, { expose }) {
     expose({});
 
-    const memoryHtmlRef = ref<HTMLDivElement>();
-    const echartsInstance = shallowRef<echarts.ECharts | null>(null);
+    const memoryHtmlRef = ref<EchartsUIType>();
+    const { renderEcharts } = useEcharts(memoryHtmlRef);
 
     watch(
       () => props.data,
@@ -31,18 +31,12 @@ export default defineComponent({
     );
 
     onMounted(() => {
-      echartsInstance.value = echarts.init(
-        memoryHtmlRef.value,
-        preferences.theme.mode,
-      );
       setEchartsOption(props.data);
     });
 
     watch(
       () => preferences.theme.mode,
-      (mode) => {
-        echartsInstance.value?.dispose();
-        echartsInstance.value = echarts.init(memoryHtmlRef.value, mode);
+      () => {
         setEchartsOption(props.data);
       },
     );
@@ -85,7 +79,7 @@ export default defineComponent({
           formatter: `{b} <br/>{a} : ${value}M`,
         },
       };
-      echartsInstance.value?.setOption(options);
+      renderEcharts(options);
     }
 
     return {
@@ -96,7 +90,9 @@ export default defineComponent({
 </script>
 
 <template>
-  <div ref="memoryHtmlRef" class="h-[400px] w-full"></div>
+  <div class="flex h-[400px] w-full items-center justify-center">
+    <EchartsUI ref="memoryHtmlRef" />
+  </div>
 </template>
 
 <style scoped></style>

packages/effects/chart-ui/src/echarts/echarts.ts

@@ -12,7 +12,13 @@ import type {
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
 
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  BarChart,
+  GaugeChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+} from 'echarts/charts';
 import {
   // 数据集组件
   DatasetComponent,
@@ -54,6 +60,7 @@ echarts.use([
   CanvasRenderer,
   LegendComponent,
   ToolboxComponent,
+  GaugeChart,
 ]);
 
 export default echarts;