From d5e05adbe49226d4122bda38d7343cd559a6ab57 Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Fri, 22 Dec 2023 16:11:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=9B=BE=E8=A1=A8=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E4=BC=A0=E9=80=92=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app/(admin)/admin/page.tsx                |   9 +-
 .../(admin)/admin/usage-by-model-chart.tsx    |  30 ++++++
 app/app/(admin)/admin/usage-by-model.tsx      | 101 ++++++++----------
 3 files changed, 76 insertions(+), 64 deletions(-)
 create mode 100644 app/app/(admin)/admin/usage-by-model-chart.tsx

diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx
index bef4e9350..e653a425b 100644
--- a/app/app/(admin)/admin/page.tsx
+++ b/app/app/(admin)/admin/page.tsx
@@ -1,12 +1,7 @@
 // "use client";
 import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
 import UsageAnalysis from "./usage-analysis";
-// import EchartsComponent from "./testchart";
-import dynamic from "next/dynamic";
-
-const UsageByModelChart = dynamic(() => import("./usage-by-model"), {
-  ssr: false,
-});
+import UsageByModel from "./usage-by-model";
 
 export default function AdminPage() {
   return (
@@ -16,7 +11,7 @@ export default function AdminPage() {
           <UsageAnalysis />
         </Col>
         <Col numColSpan={1} numColSpanLg={2}>
-          <UsageByModelChart />
+          <UsageByModel />
         </Col>
       </Grid>
     </>
diff --git a/app/app/(admin)/admin/usage-by-model-chart.tsx b/app/app/(admin)/admin/usage-by-model-chart.tsx
new file mode 100644
index 000000000..b327d2dbb
--- /dev/null
+++ b/app/app/(admin)/admin/usage-by-model-chart.tsx
@@ -0,0 +1,30 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import * as echarts from "echarts"; // 导入 echarts
+
+export default function UsageByModelChart({
+  option,
+}: {
+  option: echarts.EChartsOption;
+}) {
+  // const EchartsComponent: React.FC = ({ data: any }) => {
+  //   const [option, setOption] = useState({});
+  console.log("======", option);
+
+  useEffect(() => {
+    var chartDom = document.getElementById("usage-by-model-chart");
+    // if (chartDom) echarts.dispose(chartDom);
+    var myChart = echarts.init(chartDom);
+    // console.log('=======[option]', option)
+    option && myChart.setOption(option);
+  }, []); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
+
+  return (
+    <div
+      id="usage-by-model-chart"
+      style={{ width: "100%", height: "400px" }}
+    ></div>
+  );
+}
+
+// export default EchartsComponent;
diff --git a/app/app/(admin)/admin/usage-by-model.tsx b/app/app/(admin)/admin/usage-by-model.tsx
index a6c84ea02..ea432fec5 100644
--- a/app/app/(admin)/admin/usage-by-model.tsx
+++ b/app/app/(admin)/admin/usage-by-model.tsx
@@ -1,63 +1,50 @@
-"use client";
-import React, { useEffect } from "react";
-import * as echarts from "echarts"; // 导入 echarts
+import * as echarts from "echarts";
+import { EChartsOption } from "echarts";
+import dynamic from "next/dynamic";
 
-// const isBrowser = () => typeof window !== 'undefined'; //The approach recommended by Next.js
+const UsageByModelChart = dynamic(() => import("./usage-by-model-chart"), {
+  ssr: false,
+});
 
-const EchartsComponent: React.FC = () => {
-  useEffect(() => {
-    // if (!isBrowser()) return;
-    var chartDom = document.getElementById("usage-by-model-chart");
-    // if (!chartDiv.current) return;
-    // var myChart = echarts.init(chartDiv.current)
-    var myChart = echarts.init(chartDom);
-    var option;
-
-    option = {
-      title: {
-        text: "Referer of a Website",
-        subtext: "Fake Data",
-        left: "center",
-      },
-      tooltip: {
-        trigger: "item",
-      },
-      legend: {
-        orient: "vertical",
-        left: "left",
-      },
-      series: [
-        {
-          name: "Access From",
-          type: "pie",
-          radius: "50%",
-          data: [
-            { value: 1048, name: "Search Engine" },
-            { value: 735, name: "Direct" },
-            { value: 580, name: "Email" },
-            { value: 484, name: "Union Ads" },
-            { value: 300, name: "Video Ads" },
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-            },
+export default function UsageByModel() {
+  const usageByModelOption: EChartsOption = {
+    title: {
+      text: "Referer of a Website",
+      subtext: "Fake Data",
+      left: "center",
+    },
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      left: "left",
+    },
+    series: [
+      {
+        name: "Access From",
+        type: "pie",
+        radius: "50%",
+        data: [
+          { value: 1048, name: "Search Engine" },
+          { value: 735, name: "Direct" },
+          { value: 580, name: "Email" },
+          { value: 484, name: "Union Ads" },
+          { value: 300, name: "Video Ads" },
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
           },
         },
-      ],
-    };
-
-    option && myChart.setOption(option);
-  }, []); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
-
+      },
+    ],
+  };
   return (
-    <div
-      id="usage-by-model-chart"
-      style={{ width: "100%", height: "400px" }}
-    ></div>
+    <>
+      <UsageByModelChart option={usageByModelOption} />
+    </>
   );
-};
-
-export default EchartsComponent;
+}