diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx index bd26de746..bef4e9350 100644 --- a/app/app/(admin)/admin/page.tsx +++ b/app/app/(admin)/admin/page.tsx @@ -1,7 +1,12 @@ // "use client"; import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react"; import UsageAnalysis from "./usage-analysis"; -import EchartsComponent from "./testchart"; +// import EchartsComponent from "./testchart"; +import dynamic from "next/dynamic"; + +const UsageByModelChart = dynamic(() => import("./usage-by-model"), { + ssr: false, +}); export default function AdminPage() { return ( @@ -11,7 +16,7 @@ export default function AdminPage() { - + diff --git a/app/app/(admin)/admin/testchart.tsx b/app/app/(admin)/admin/usage-by-model.tsx similarity index 75% rename from app/app/(admin)/admin/testchart.tsx rename to app/app/(admin)/admin/usage-by-model.tsx index 45513dc13..a6c84ea02 100644 --- a/app/app/(admin)/admin/testchart.tsx +++ b/app/app/(admin)/admin/usage-by-model.tsx @@ -2,9 +2,14 @@ import React, { useEffect } from "react"; import * as echarts from "echarts"; // 导入 echarts +// const isBrowser = () => typeof window !== 'undefined'; //The approach recommended by Next.js + const EchartsComponent: React.FC = () => { useEffect(() => { - var chartDom = document.getElementById("charts"); + // 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; @@ -47,7 +52,12 @@ const EchartsComponent: React.FC = () => { option && myChart.setOption(option); }, []); // 空数组作为第二个参数,表示仅在组件挂载和卸载时执行 - return
; + return ( +
+ ); }; export default EchartsComponent;