From 2fb39ca82f205ef2472eddbade7bd9514d944796 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 10 Jan 2022 19:51:14 +0800
Subject: [PATCH] refactor: update Graph component

---
 src/components/Graph.vue     | 58 +++++-------------------------------
 src/views/dashboard/Edit.vue | 36 +++++++++++-----------
 2 files changed, 25 insertions(+), 69 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index e719da7f..d31ab21a 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -13,24 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div ref="chart" :style="`height:${height};width:${width};`"></div>
+  <div ref="chartRef" :style="`height:${height};width:${width};`"></div>
 </template>
 <script lang="ts" setup>
-import {
-  onMounted,
-  watch,
-  reactive,
-  ref,
-  defineProps,
-  onBeforeUnmount,
-} from "vue";
+import { watch, ref, defineProps, Ref } from "vue";
 import type { PropType } from "vue";
-import * as echarts from "echarts";
+import { useECharts } from "@/hooks/useECharts";
 /*global Nullable*/
-const chart = ref<Nullable<HTMLElement>>(null);
-const state = reactive<{ instanceChart: any }>({
-  instanceChart: null,
-});
+const chartRef = ref<Nullable<HTMLDivElement>>(null);
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
 const props = defineProps({
   clickEvent: { type: Function as PropType<(param: unknown) => void> },
   height: { type: String, default: "100%" },
@@ -41,46 +33,10 @@ const props = defineProps({
   },
 });
 
-onMounted(() => {
-  setTimeout(() => {
-    drawEcharts();
-    window.addEventListener("resize", state.instanceChart.resize);
-  }, 50);
-});
-function drawEcharts(): void {
-  if (!chart.value) {
-    return;
-  }
-  if (state.instanceChart) {
-    return;
-  }
-  state.instanceChart = echarts.init(chart.value, "");
-  unWarp(state.instanceChart).setOption(props.option);
-  state.instanceChart.on("click", (params: any) => {
-    if (!props.clickEvent) {
-      return;
-    }
-    props.clickEvent(params);
-  });
-}
-function unWarp(obj: any) {
-  return obj && (obj.__v_raw || obj.valueOf() || obj);
-}
-
 watch(
   () => props.option,
   (opt) => {
-    if (state.instanceChart) {
-      state.instanceChart.setOption(opt, true);
-    } else {
-      drawEcharts();
-    }
+    setOptions(opt);
   }
 );
-onBeforeUnmount(() => {
-  if (state.instanceChart.dispose) {
-    state.instanceChart.dispose();
-  }
-  window.removeEventListener("resize", state.instanceChart.resize);
-});
 </script>
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index ba9da3aa..34621048 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -29,30 +29,30 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ElDialog } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
-import { LayoutConfig } from "@/types/dashboard";
+// import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";
 import WidgetConfig from "./configuration/ConfigEdit.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
-const layout: any[] = [
-  { x: 0, y: 0, w: 4, h: 12, i: "0" },
-  { x: 4, y: 0, w: 4, h: 12, i: "1" },
-  { x: 8, y: 0, w: 4, h: 15, i: "2" },
-  { x: 12, y: 0, w: 4, h: 9, i: "3" },
-  { x: 16, y: 0, w: 4, h: 9, i: "4" },
-  { x: 20, y: 0, w: 4, h: 9, i: "5" },
-  { x: 0, y: 12, w: 4, h: 15, i: "7" },
-  { x: 4, y: 12, w: 4, h: 15, i: "8" },
-  { x: 8, y: 15, w: 4, h: 12, i: "9" },
-  { x: 12, y: 9, w: 4, h: 12, i: "10" },
-  { x: 16, y: 9, w: 4, h: 12, i: "11" },
-  { x: 20, y: 9, w: 4, h: 15, i: "12" },
-  { x: 0, y: 27, w: 4, h: 12, i: "14" },
-  { x: 4, y: 27, w: 4, h: 12, i: "15" },
-  { x: 8, y: 27, w: 4, h: 15, i: "16" },
-];
+// const layout: any[] = [
+//   { x: 0, y: 0, w: 4, h: 12, i: "0" },
+//   { x: 4, y: 0, w: 4, h: 12, i: "1" },
+//   { x: 8, y: 0, w: 4, h: 15, i: "2" },
+//   { x: 12, y: 0, w: 4, h: 9, i: "3" },
+//   { x: 16, y: 0, w: 4, h: 9, i: "4" },
+//   { x: 20, y: 0, w: 4, h: 9, i: "5" },
+//   { x: 0, y: 12, w: 4, h: 15, i: "7" },
+//   { x: 4, y: 12, w: 4, h: 15, i: "8" },
+//   { x: 8, y: 15, w: 4, h: 12, i: "9" },
+//   { x: 12, y: 9, w: 4, h: 12, i: "10" },
+//   { x: 16, y: 9, w: 4, h: 12, i: "11" },
+//   { x: 20, y: 9, w: 4, h: 15, i: "12" },
+//   { x: 0, y: 27, w: 4, h: 12, i: "14" },
+//   { x: 4, y: 27, w: 4, h: 12, i: "15" },
+//   { x: 8, y: 27, w: 4, h: 15, i: "16" },
+// ];
 // dashboardStore.setLayout(layout);
 function handleClick(e: any) {
   e.stopPropagation();