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

src/components/Charts/ChartOne.tsx

@@ -1,119 +1,7 @@
 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 = {
-  legend: {
-    show: false,
-    position: 'top',
-    horizontalAlign: 'left',
-  },
-  colors: ['#3C50E0', '#80CAEE'],
-  chart: {
-    fontFamily: 'Satoshi, sans-serif',
-    height: 335,
-    type: 'area',
-    dropShadow: {
-      enabled: true,
-      color: '#623CEA14',
-      top: 10,
-      blur: 4,
-      left: 0,
-      opacity: 0.1,
-    },
-
-    toolbar: {
-      show: false,
-    },
-  },
-  responsive: [
-    {
-      breakpoint: 1024,
-      options: {
-        chart: {
-          height: 300,
-        },
-      },
-    },
-    {
-      breakpoint: 1366,
-      options: {
-        chart: {
-          height: 350,
-        },
-      },
-    },
-  ],
-  stroke: {
-    width: [2, 2],
-    curve: 'straight',
-  },
-  // labels: {
-  //   show: false,
-  //   position: "top",
-  // },
-  grid: {
-    xaxis: {
-      lines: {
-        show: true,
-      },
-    },
-    yaxis: {
-      lines: {
-        show: true,
-      },
-    },
-  },
-  dataLabels: {
-    enabled: false,
-  },
-  markers: {
-    size: 4,
-    colors: '#fff',
-    strokeColors: ['#3056D3', '#80CAEE'],
-    strokeWidth: 3,
-    strokeOpacity: 0.9,
-    strokeDashArray: 0,
-    fillOpacity: 1,
-    discrete: [],
-    hover: {
-      size: undefined,
-      sizeOffset: 5,
-    },
-  },
-  xaxis: {
-    type: 'category',
-    categories: [
-      'Sep',
-      'Oct',
-      'Nov',
-      'Dec',
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'Jun',
-      'Jul',
-      'Aug',
-    ],
-    axisBorder: {
-      show: false,
-    },
-    axisTicks: {
-      show: false,
-    },
-  },
-  yaxis: {
-    title: {
-      style: {
-        fontSize: '0px',
-      },
-    },
-    min: 0,
-    max: 100,
-  },
-};
 
 interface ChartOneState {
   series: {
@@ -122,21 +10,140 @@ interface ChartOneState {
   }[];
 }
 
-const ChartOne: React.FC = () => {
+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',
+      horizontalAlign: 'left',
+    },
+    colors: ['#3C50E0', '#80CAEE'],
+    chart: {
+      fontFamily: 'Satoshi, sans-serif',
+      height: 335,
+      type: 'area',
+      dropShadow: {
+        enabled: true,
+        color: '#623CEA14',
+        top: 10,
+        blur: 4,
+        left: 0,
+        opacity: 0.1,
+      },
+
+      toolbar: {
+        show: false,
+      },
+    },
+    responsive: [
+      {
+        breakpoint: 1024,
+        options: {
+          chart: {
+            height: 300,
+          },
+        },
+      },
+      {
+        breakpoint: 1366,
+        options: {
+          chart: {
+            height: 350,
+          },
+        },
+      },
+    ],
+    stroke: {
+      width: [2, 2],
+      curve: 'straight',
+    },
+    // labels: {
+    //   show: false,
+    //   position: "top",
+    // },
+    grid: {
+      xaxis: {
+        lines: {
+          show: true,
+        },
+      },
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    markers: {
+      size: 4,
+      colors: '#fff',
+      strokeColors: ['#3056D3', '#80CAEE'],
+      strokeWidth: 3,
+      strokeOpacity: 0.9,
+      strokeDashArray: 0,
+      fillOpacity: 1,
+      discrete: [],
+      hover: {
+        size: undefined,
+        sizeOffset: 5,
+      },
+    },
+    xaxis: {
+      type: 'category',
+      categories: [
+        '周一',
+        '周二',
+        '周三',
+        '周四',
+        '周五',
+        '周六',
+        '周日',
+      ],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    yaxis: {
+      title: {
+        style: {
+          fontSize: '0px',
+        },
+      },
+      min: 0,
+      max: 100,
+    },
+  })
+
   const [state, setState] = useState<ChartOneState>({
     series: [
       {
-        name: 'Product One',
+        name: '访客数量',
-        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45],
+        data: [23, 11, 22, 27, 13, 22, 37, 21],
       },
-
       {
-        name: 'Product Two',
+        name: 'IP数量',
-        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51],
+        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="font-semibold text-primary">访客（UV）</p>
-              <p className="text-sm font-medium">12.04.2022 - 12.05.2022</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="font-semibold text-secondary">IP</p>
-              <p className="text-sm font-medium">12.04.2022 - 12.05.2022</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/, ''),
+      },
+    },
+  },
 })