diff --git a/app/app/(admin)/admin/usage-by-model-chart.tsx b/app/app/(admin)/admin/usage-by-model-chart.tsx index 3906de5b0..619a644db 100644 --- a/app/app/(admin)/admin/usage-by-model-chart.tsx +++ b/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 + "
"; + 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 + + "
"; + //@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 (