优化管理面板

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

@@ -1,44 +1,75 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+
 import * as echarts from "echarts";
 import { DatePicker, DatePickerValue } from "@tremor/react";
 import { zhCN } from "date-fns/locale";
-import { param } from "ts-interface-checker"; // 导入 echarts
+import { EChartsOption } from "echarts";
+import { OptionDataItem, OptionDataValue } from "echarts/types/src/util/types";
+// import { param } from "ts-interface-checker"; // 导入 echarts
 
-// {
-//   option,
-// }: {
-//   option: echarts.EChartsOption;
-// }
 export default function UsageByModelChart() {
-  const [currentDate, setCurrentDate] = React.useState(new Date());
-  const [searchDate, setSearchDate] = React.useState("");
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [searchDate, setSearchDate] = useState("");
+
+  const [clientSide, setClientSide] = useState(false);
 
   useEffect(() => {
+    let ignore = false;
+    // console.log('windows', window.location.href)
     console.log("init", currentDate, searchDate);
     const currentDateString = currentDate.toLocaleDateString();
     if (searchDate != currentDateString) {
       async function fetchData() {
-        console.log("异步", searchDate, currentDateString);
+        // console.log("异步", searchDate, currentDateString);
         const response = await fetch("/api/charts?date=" + currentDateString, {
           method: "GET",
         });
-        return await response.json();
+        // console.log('====', searchDate, currentDateString),
+        const option: EChartsOption = await response.json();
+        option["tooltip"] = {
+          ...option["tooltip"],
+          formatter: function (params) {
+            if (!Array.isArray(params)) {
+              return "";
+            }
+            //@ts-ignore
+            let tooltipHtml = params[0].axisValue + "<br>";
+            let sum: number = 0;
+            for (let i = 0; i < params.length; i++) {
+              if (params[i].value) {
+                //@ts-ignore
+                tooltipHtml +=
+                  params[i].marker +
+                  params[i].seriesName +
+                  ": " +
+                  params[i].value +
+                  "<br>";
+                //@ts-ignore
+                sum += params[i].value;
+              }
+            }
+            tooltipHtml += "总和: " + sum;
+            return tooltipHtml;
+          },
+        };
+        return option;
       }
       fetchData().then((option) => {
-        if (option) {
+        if (!ignore && option && typeof window !== "undefined") {
           let chartDom = document.getElementById("usage-by-model-chart");
           let myChart = echarts.init(chartDom);
           option && myChart.setOption(option);
+          setSearchDate(currentDateString);
           console.log("option计数", 1);
         }
       });
       console.log("搜索开始计数", 1, searchDate, currentDateString);
     }
     return () => {
-      setSearchDate(currentDateString);
+      ignore = true;
     };
-  }, [currentDate, searchDate]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
+  }, [currentDate]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
   return (
     <div>