init

app/app/(admin)/admin/page.tsx

@@ -1,18 +1,16 @@
 // "use client";
 import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
 import UsageAnalysis from "./usage-analysis";
+import EchartsComponent from "./testchart";
 
 export default function AdminPage() {
   return (
     <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
-      <Col numColSpan={2} numColSpanLg={3}>
+      <Col numColSpan={2} numColSpanLg={2}>
         <UsageAnalysis />
       </Col>
-      <Col>
-        <Card>
-          <Text>Title</Text>
-          <Metric>KPI 2</Metric>
-        </Card>
+      <Col numColSpan={1} numColSpanLg={1}>
+        <EchartsComponent />
       </Col>
     </Grid>
   );

app/app/(admin)/admin/testchart.tsx

@@ -0,0 +1,53 @@
+"use client";
+import React, { useEffect } from "react";
+import * as echarts from "echarts"; // 导入 echarts
+
+const EchartsComponent: React.FC = () => {
+  useEffect(() => {
+    var chartDom = document.getElementById("charts");
+    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)",
+            },
+          },
+        },
+      ],
+    };
+
+    option && myChart.setOption(option);
+  }, []); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
+
+  return <div id="charts" style={{ width: "100%", height: "100%" }}></div>;
+};
+
+export default EchartsComponent;

app/app/(admin)/layout.tsx

@@ -12,13 +12,14 @@ export default async function AdminLayout({
   children: ReactNode;
 }) {
   return (
-    <div className="flex max-w-screen-xl flex-col space-y-12 p-8">
-      <div className="flex flex-col space-y-6">
-        <h1 className="font-cal text-3xl font-bold dark:text-white">
+    <div className="container mx-auto">
+      <div className="relative h-32 w-32"></div>
+      <div className="absolute inset-x-0 top-0 h-16">
+        <h1 className="font-cal text-3xl font-bold dark:text-white mx-auto">
           Admin Page
         </h1>
-        {children}
       </div>
+      {children}
     </div>
   );
 }

package.json

@@ -23,6 +23,7 @@
     "@svgr/webpack": "^8.1.0",
     "@tremor/react": "^3.12.1",
     "@vercel/analytics": "^1.1.1",
+    "echarts": "^5.4.3",
     "emoji-picker-react": "^4.5.15",
     "fuse.js": "^7.0.0",
     "html-to-image": "^1.11.11",