获取统计数据以及配置反向代理解决跨域

src/components/Charts/ChartOne.tsx

@@ -1,8 +1,20 @@
 import { ApexOptions } from 'apexcharts';
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReactApexChart from 'react-apexcharts';
+import dayjs from 'dayjs'
 
-const options: ApexOptions = {
+interface ChartOneState {
+  series: {
+    name: string;
+    data: number[];
+  }[];
+}
+
+const ChartOne = () => {
+  const [startDate, setStartDate] = useState("2024/08/13")
+  const [endDate, setEndDate] = useState("2024/08/15")
+
+  const [options, setOptions] = useState<ApexOptions>({
     legend: {
       show: false,
       position: 'top',
@@ -84,18 +96,13 @@ const options: ApexOptions = {
     xaxis: {
       type: 'category',
       categories: [
-      'Sep',
-      'Oct',
-      'Nov',
-      'Dec',
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'Jun',
-      'Jul',
-      'Aug',
+        '周一',
+        '周二',
+        '周三',
+        '周四',
+        '周五',
+        '周六',
+        '周日',
       ],
       axisBorder: {
         show: false,
@@ -113,30 +120,30 @@ const options: ApexOptions = {
       min: 0,
       max: 100,
     },
-};
+  })
 
-interface ChartOneState {
-  series: {
-    name: string;
-    data: number[];
-  }[];
-}
-
-const ChartOne: React.FC = () => {
   const [state, setState] = useState<ChartOneState>({
     series: [
       {
-        name: 'Product One',
-        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45],
+        name: '访客数量',
+        data: [23, 11, 22, 27, 13, 22, 37, 21],
       },
-
       {
-        name: 'Product Two',
-        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51],
+        name: 'IP数量',
+        data: [30, 25, 36, 30, 45, 35, 64, 52],
       },
     ],
   });
 
+  useEffect(() => {
+    const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID
+    const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN
+    // fetch(`https://openapi.baidu.com/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cvisitor_count%2Cip_count%2Cavg_visit_time&method=overview%2FgetTimeTrendRpt`).then(async res => {
+    fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cvisitor_count%2Cip_count%2Cavg_visit_time&method=overview%2FgetTimeTrendRpt`).then(async res => {
+      console.log(await res.json());
+    })
+  }, [])
+
   const handleReset = () => {
     setState((prevState) => ({
       ...prevState,
@@ -152,31 +159,37 @@ const ChartOne: React.FC = () => {
             <span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary">
               <span className="block h-2.5 w-full max-w-2.5 rounded-full bg-primary"></span>
             </span>
+
             <div className="w-full">
-              <p className="font-semibold text-primary">Total Revenue</p>
-              <p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
+              <p className="font-semibold text-primary">访客（UV）</p>
+              <p className="text-sm font-medium">{dayjs(new Date()).subtract(7, "day").format("YYYY.MM.DD")} - {dayjs(new Date()).format("YYYY.MM.DD")}</p>
             </div>
           </div>
+
           <div className="flex min-w-47.5">
             <span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary">
               <span className="block h-2.5 w-full max-w-2.5 rounded-full bg-secondary"></span>
             </span>
+
             <div className="w-full">
-              <p className="font-semibold text-secondary">Total Sales</p>
-              <p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
+              <p className="font-semibold text-secondary">IP</p>
+              <p className="text-sm font-medium">{dayjs(new Date()).subtract(7, "day").format("YYYY.MM.DD")} - {dayjs(new Date()).format("YYYY.MM.DD")}</p>
             </div>
           </div>
         </div>
+
         <div className="flex w-full max-w-45 justify-end">
           <div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
             <button className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
-              Day
+              周
             </button>
+
             <button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
-              Week
+              月
             </button>
+
             <button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
-              Month
+              年
             </button>
           </div>
         </div>

src/pages/Dashboard/ECommerce.tsx

@@ -20,8 +20,6 @@ const ECommerce: React.FC = () => {
   }
 
   useEffect(() => {
-    console.log(import.meta.env.VITE_DATA,333);
-    
     getSystemData()
   }, [])
 

src/types/env.d.ts

@@ -0,0 +1,11 @@
+interface ImportMetaEnv {
+    readonly VITE_BAIDU_TONGJI_KEY: string;
+    readonly VITE_BAIDU_TONGJI_SECRET_KEY: string;
+    readonly VITE_BAIDU_TONGJI_SITE_ID: string;
+    readonly VITE_BAIDU_TONGJI_ACCESS_TOKEN: string;
+    readonly VITE_BAIDU_TONGJI_REFRESH_TOKEN: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

vite.config.js

@@ -20,5 +20,14 @@ export default defineConfig({
         additionalData: `@import "./src/styles/var.scss";`
       }
     }
-  }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'https://openapi.baidu.com/', // 你的后端服务器地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })