解决图表数据传递问题

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 UsageByModel from "./usage-by-model";
-import dynamic from "next/dynamic";
-
-const UsageByModelChart = dynamic(() => import("./usage-by-model"), {
-  ssr: false,
-});
 
 export default function AdminPage() {
   return (
@@ -16,7 +11,7 @@ export default function AdminPage() {
           <UsageAnalysis />
         </Col>
         <Col numColSpan={1} numColSpanLg={2}>
-          <UsageByModelChart />
+          <UsageByModel />
         </Col>
       </Grid>
     </>

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;

app/app/(admin)/admin/usage-by-model.tsx

@@ -1,63 +1,50 @@
-"use client";
+import * as echarts from "echarts";
-import React, { useEffect } from "react";
+import { EChartsOption } from "echarts";
-import * as echarts from "echarts"; // 导入 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 = () => {
+export default function UsageByModel() {
-  useEffect(() => {
+  const usageByModelOption: EChartsOption = {
-    // if (!isBrowser()) return;
+    title: {
-    var chartDom = document.getElementById("usage-by-model-chart");
+      text: "Referer of a Website",
-    // if (!chartDiv.current) return;
+      subtext: "Fake Data",
-    // var myChart = echarts.init(chartDiv.current)
+      left: "center",
-    var myChart = echarts.init(chartDom);
+    },
-    var option;
+    tooltip: {
-
+      trigger: "item",
-    option = {
+    },
-      title: {
+    legend: {
-        text: "Referer of a Website",
+      orient: "vertical",
-        subtext: "Fake Data",
+      left: "left",
-        left: "center",
+    },
-      },
+    series: [
-      tooltip: {
+      {
-        trigger: "item",
+        name: "Access From",
-      },
+        type: "pie",
-      legend: {
+        radius: "50%",
-        orient: "vertical",
+        data: [
-        left: "left",
+          { value: 1048, name: "Search Engine" },
-      },
+          { value: 735, name: "Direct" },
-      series: [
+          { value: 580, name: "Email" },
-        {
+          { value: 484, name: "Union Ads" },
-          name: "Access From",
+          { value: 300, name: "Video Ads" },
-          type: "pie",
+        ],
-          radius: "50%",
+        emphasis: {
-          data: [
+          itemStyle: {
-            { value: 1048, name: "Search Engine" },
+            shadowBlur: 10,
-            { value: 735, name: "Direct" },
+            shadowOffsetX: 0,
-            { value: 580, name: "Email" },
+            shadowColor: "rgba(0, 0, 0, 0.5)",
-            { 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"
+      <UsageByModelChart option={usageByModelOption} />
-      style={{ width: "100%", height: "400px" }}
+    </>
-    ></div>
   );
-};
+}
-
-export default EchartsComponent;