From 7818a11aa5548c1ffc9084de3707c53ae807d467 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 28 Jul 2022 17:54:25 +0800
Subject: [PATCH] refactor function

---
 src/components/Graph.vue | 112 ++++++++++++++++++++-------------------
 1 file changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 93f176ce..fb79a5e4 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -94,6 +94,63 @@ onMounted(async () => {
   }, 1000);
 });
 
+function updateOptions() {
+  const instance = getInstance();
+  if (!instance) {
+    return;
+  }
+  if (props.filters) {
+    if (props.filters.isRange) {
+      if (!props.filters.duration.startTime) {
+        setOptions(props.option);
+        return;
+      }
+      const list = props.option.series[0].data.map(
+        (d: (number | string)[]) => d[0]
+      );
+      if (!list.includes(props.filters.duration.endTime)) {
+        return;
+      }
+      const markArea = {
+        silent: true,
+        itemStyle: {
+          opacity: 0.3,
+        },
+        data: [
+          [
+            {
+              xAxis: props.filters.duration.startTime,
+            },
+            {
+              xAxis: props.filters.duration.endTime,
+            },
+          ],
+        ],
+      };
+      const series = (window as any).structuredClone(props.option.series);
+      for (const [key, temp] of series.entries()) {
+        if (key === 0) {
+          temp.markArea = markArea;
+        }
+      }
+      const options = {
+        ...props.option,
+        series,
+      };
+      if (JSON.stringify(options) === JSON.stringify(props.option)) {
+        return;
+      }
+      setOptions(options);
+      return;
+    }
+    instance.dispatchAction({
+      type: "showTip",
+      dataIndex: props.filters.dataIndex,
+      seriesIndex: 0,
+    });
+  }
+}
+
 watch(
   () => props.option,
   (newVal, oldVal) => {
@@ -109,60 +166,7 @@ watch(
 watch(
   () => props.filters,
   () => {
-    const instance = getInstance();
-    if (!instance) {
-      return;
-    }
-    if (props.filters) {
-      if (props.filters.isRange) {
-        if (!props.filters.duration.startTime) {
-          setOptions(props.option);
-          return;
-        }
-        const list = props.option.series[0].data.map(
-          (d: (number | string)[]) => d[0]
-        );
-        if (!list.includes(props.filters.duration.endTime)) {
-          return;
-        }
-        const markArea = {
-          silent: true,
-          itemStyle: {
-            opacity: 0.3,
-          },
-          data: [
-            [
-              {
-                xAxis: props.filters.duration.startTime,
-              },
-              {
-                xAxis: props.filters.duration.endTime,
-              },
-            ],
-          ],
-        };
-        const series = (window as any).structuredClone(props.option.series);
-        for (const [key, temp] of series.entries()) {
-          if (key === 0) {
-            temp.markArea = markArea;
-          }
-        }
-        const options = {
-          ...props.option,
-          series,
-        };
-        if (JSON.stringify(options) === JSON.stringify(props.option)) {
-          return;
-        }
-        setOptions(options);
-        return;
-      }
-      instance.dispatchAction({
-        type: "showTip",
-        dataIndex: props.filters.dataIndex,
-        seriesIndex: 0,
-      });
-    }
+    updateOptions();
   }
 );