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;