解决图表数据传递问题

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,19 +1,13 @@
-"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;
-    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",
@@ -48,16 +42,9 @@ const EchartsComponent: React.FC = () => {
       },
     ],
   };
-
-    option && myChart.setOption(option);
-  }, []); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
-
   return (
-    <div
+    <>
-      id="usage-by-model-chart"
+      <UsageByModelChart option={usageByModelOption} />
-      style={{ width: "100%", height: "400px" }}
+    </>
-    ></div>
   );
-};
+}
-
-export default EchartsComponent;