From 158aa5fc1b4183febdab14b68f5a07fab5724817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=9F=E5=BD=A6=E7=A5=96?= <mj_0729@163.com>
Date: Wed, 7 Aug 2024 16:25:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8useEcharts?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=BC=93=E5=AD=98=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitor/cache/components/CommandChart.vue | 30 ++++++++-----------
 .../monitor/cache/components/MemoryChart.vue  | 24 +++++++--------
 .../effects/chart-ui/src/echarts/echarts.ts   |  9 +++++-
 3 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue b/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
index 219799c3..70837494 100644
--- a/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue b/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
index c6a47bb1..7e952087 100644
--- a/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
+++ b/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>
diff --git a/packages/effects/chart-ui/src/echarts/echarts.ts b/packages/effects/chart-ui/src/echarts/echarts.ts
index 85323a42..294f29e2 100644
--- a/packages/effects/chart-ui/src/echarts/echarts.ts
+++ b/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;