From 1f4299291ea35f827000516226860fcb8e1d5e4d Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 30 Dec 2021 16:37:12 +0800
Subject: [PATCH] feat: create Graph Component with echarts

---
 package-lock.json        | 15 +++++++++
 package.json             |  1 +
 src/components/Graph.vue | 73 ++++++++++++++++++++++++++++++++++++++++
 src/types/echarts.d.ts   | 17 ++++++++++
 4 files changed, 106 insertions(+)
 create mode 100644 src/components/Graph.vue
 create mode 100644 src/types/echarts.d.ts

diff --git a/package-lock.json b/package-lock.json
index ce438d01..daad03d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2139,6 +2139,15 @@
         "@types/node": "*"
       }
     },
+    "@types/echarts": {
+      "version": "4.9.12",
+      "resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.9.12.tgz",
+      "integrity": "sha512-yi5yzCRQCZDXeMcTD0W1sRENILJ98PjwG0UH/gZwADU2wsGt523RmocXakbpUOch6FHJqWwwJijsoSGNhGp4kA==",
+      "dev": true,
+      "requires": {
+        "@types/zrender": "*"
+      }
+    },
     "@types/express": {
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
@@ -2403,6 +2412,12 @@
       "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==",
       "dev": true
     },
+    "@types/zrender": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.1.tgz",
+      "integrity": "sha512-IyTRf30jPOXK1+1RChI/78U6aV9hyWYf/vhL96Vt66oDz9es/BDjeKpvbNZSOHVA7zAReOwJcmdZS5AGAqhygw==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
diff --git a/package.json b/package.json
index ef955868..cb1d3363 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/echarts": "^4.9.12",
     "@types/jest": "^24.0.19",
     "@types/three": "^0.131.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
new file mode 100644
index 00000000..05bfd907
--- /dev/null
+++ b/src/components/Graph.vue
@@ -0,0 +1,73 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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
+    class="echarts"
+    ref="chart"
+    :style="`height:${height};width:${width};`"
+  ></div>
+</template>
+<script lang="ts" setup>
+import {
+  onMounted,
+  watch,
+  reactive,
+  ref,
+  defineProps,
+  onBeforeUnmount,
+} from "vue";
+import type { PropType } from "vue";
+import * as echarts from "echarts";
+const dom = ref<any>(null);
+const state = reactive<any>({
+  instanceChart: null,
+});
+const props = defineProps({
+  clickEvent: { type: Function as PropType<(param: unknown) => void> },
+  height: { type: Number, default: 100 },
+  width: { type: Number, default: 300 },
+  option: { type: Object as PropType<any>, default: () => ({}) },
+});
+onMounted(() => {
+  drawEcharts();
+  window.addEventListener("resize", state.instanceChart.resize);
+});
+function drawEcharts(): void {
+  state.instanceChart = echarts.init(dom.value, "");
+  state.instanceChart.setOption(state.option);
+  state.instanceChart.on("click", (params: any) => {
+    if (!props.clickEvent) {
+      return;
+    }
+    props.clickEvent(params);
+  });
+}
+watch(
+  () => props.option,
+  (opt) => {
+    if (state.instanceChart) {
+      state.instanceChart.setOption(opt, true);
+    } else {
+      drawEcharts();
+    }
+  }
+);
+onBeforeUnmount(() => {
+  if (state.instanceChart.dispose) {
+    state.instanceChart.dispose();
+  }
+  window.removeEventListener("resize", state.instanceChart.resize);
+});
+</script>
diff --git a/src/types/echarts.d.ts b/src/types/echarts.d.ts
new file mode 100644
index 00000000..e5acb727
--- /dev/null
+++ b/src/types/echarts.d.ts
@@ -0,0 +1,17 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+declare module "echarts";