From 4214c290bc25b82df17eb5de5f7077189f62988c Mon Sep 17 00:00:00 2001
From: limuen <limuen_dev@163.com>
Date: Tue, 7 Mar 2023 10:26:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EechartsHook=EF=BC=8C=E5=8E=BB?=
 =?UTF-8?q?=E9=99=A4=E5=8C=85=E8=A3=B9=E7=9A=84view=E5=92=8Ccard=EF=BC=8C?=
 =?UTF-8?q?=E5=BE=85=E5=AE=8C=E5=96=84=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +-
 src/hooks/useEcharts.ts          | 51 ++++++++++++++++++++++++++++++++
 src/pages/charts/basic/index.tsx | 14 ++++-----
 src/styles/common.scss           |  7 +++++
 4 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 src/hooks/useEcharts.ts

diff --git a/package.json b/package.json
index b25ad4d..2cd1ca8 100644
--- a/package.json
+++ b/package.json
@@ -57,4 +57,4 @@
     "unplugin-auto-import": "^0.15.0",
     "vite": "^4.1.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
new file mode 100644
index 0000000..b0e4e62
--- /dev/null
+++ b/src/hooks/useEcharts.ts
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef } from 'react'
+import * as echarts from 'echarts'
+
+/**
+ * 使用Echarts
+ * @param options -  绘制echarts的参数
+ * @param data -  数据
+ */
+export const useEcharts = (options: echarts.EChartsCoreOption, data?: unknown) => {
+  const echartsRef = useRef<echarts.EChartsType>()
+  const htmlDivRef = useRef<HTMLDivElement>(null)
+
+  const dispose = () => {
+    if (htmlDivRef.current) {
+      echartsRef.current?.dispose()
+    }
+  }
+
+  const init = useCallback(() => {
+    if (options) {
+      dispose()
+      if (htmlDivRef.current) {
+        echartsRef.current = echarts.init(htmlDivRef.current)
+        echartsRef.current.setOption(options)
+        echartsRef.current?.resize()
+      }
+    }
+  }, [options])
+
+  useEffect(() => {
+    if (options) init()
+  }, [init, options])
+
+  useEffect(() => {
+    init()
+    window.addEventListener('resize', init, false)
+
+    return () => {
+      window.removeEventListener('resize', init)
+      dispose()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (data) {
+      echartsRef?.current?.setOption(options)
+    }
+  }, [data])
+
+  return [htmlDivRef, init] as const
+}
diff --git a/src/pages/charts/basic/index.tsx b/src/pages/charts/basic/index.tsx
index ae36101..c41f261 100644
--- a/src/pages/charts/basic/index.tsx
+++ b/src/pages/charts/basic/index.tsx
@@ -1,9 +1,10 @@
 import { FC } from 'react'
 import { Card } from 'antd'
 import View from '@/components/View'
-import ReactEcharts from 'echarts-for-react'
+import { useEcharts } from '@/hooks/useEcharts'
+import type { EChartsOption } from 'echarts'
 
-const option = {
+const option: EChartsOption = {
   xAxis: {
     type: 'category',
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -20,13 +21,8 @@ const option = {
 }
 
 const Basic: FC = () => {
-  return (
-    <View className="app-charts">
-      <Card type="inner" title="图表">
-        <ReactEcharts option={option} style={{ height: 700 }} />
-      </Card>
-    </View>
-  )
+  const [echartsRef] = useEcharts(option)
+  return <div ref={echartsRef} className="content-box" />
 }
 
 export default Basic
diff --git a/src/styles/common.scss b/src/styles/common.scss
index cee9523..b3470a9 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -68,3 +68,10 @@ input{
 [hidden]{
   display:none !important;
 }
+
+.content-box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
-- 
Gitee