优化热度统计 馆藏统计 切换下拉框 多次发送请求问题

houtai/src/pages/A1Hot/HotMap/index.tsx

@@ -18,19 +18,21 @@ function HotMap() {
 
   const getMapInfo = useCallback(async () => {
     const res = await getHotMapInfoAPI();
-    setArr(res.data);
-    // 取所有数据里面的最大值
-    const maxNumRes = res.data
-      .map((v: any) => v.pcs)
-      .reduce((pre: any, cur: any) => {
-        return pre > cur ? pre : cur;
-      });
+    if (res.code === 0) {
+      setArr(res.data);
+      // 取所有数据里面的最大值
+      const maxNumRes = res.data
+        .map((v: any) => v.pcs)
+        .reduce((pre: any, cur: any) => {
+          return pre > cur ? pre : cur;
+        });
 
-    setMaxNum(maxNumRes);
+      setMaxNum(maxNumRes);
+    }
 
     // 获取国内国外访客数量
     const res2 = await getHotMapInfoNumAPI();
-    setNumNation(res2.data);
+    if (res2.code === 0) setNumNation(res2.data);
   }, []);
 
   useEffect(() => {
@@ -105,8 +107,8 @@ function HotMap() {
       )}
       {/* 左下角的数据 */}
       <div className="leftNumBox">
-        <div>国内访客合计：{numNation[0].pcs}</div>
-        <div>国外访客合计：{numNation[1].pcs}</div>
+        <div>国内访客合计：{numNation[0] ? numNation[0].pcs : 0}</div>
+        <div>国外访客合计：{numNation[1] ? numNation[1].pcs : 0}</div>
       </div>
 
       <svg

houtai/src/pages/A1Hot/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ExclamationCircleFilled, CalendarOutlined } from "@ant-design/icons";
 import styles from "./index.module.scss";
 import { Empty, Select, Tooltip } from "antd";
@@ -22,7 +22,13 @@ import {
   getHotInfo5API,
   getHotInfo6API,
 } from "@/store/action/A1Hot";
-import { HotInfo1Type, HotInfo3Type, HotInfo4Type } from "@/types";
+import {
+  HotGoodsItem,
+  HotGoodsType,
+  HotInfo1Type,
+  HotInfo3Type,
+  HotInfo4Type,
+} from "@/types";
 import { hotChangeObj } from "@/utils/changeData";
 
 echarts.use([
@@ -210,18 +216,23 @@ function Hot() {
   }, [select1, select3]);
 
   // 馆藏统计---第二个饼图
+  // 把全部的第二个饼图的数据存起来
+  const goodsAllDataRef = useRef<HotGoodsType>({
+    age: [],
+    level: [],
+    texture: [],
+    total: 0,
+  });
   const getGoodsAllFu = useCallback(async () => {
     const res = await getHotInfo6API();
-    const data: any = res.data;
-    const data7: any = [];
-    setAllNum5(data.total);
-    for (const k in data) {
-      if (k === select4) {
-        data[k].forEach((v: any) => {
-          data7.push({ icon: "circle", value: v.pcs, name: v.type });
-        });
-      }
-    }
+    goodsAllDataRef.current = res.data;
+    // 第一次把  按 类别的数据 渲染出来
+    setAllNum5(goodsAllDataRef.current.total);
+    const data7 = goodsAllDataRef.current["texture"].map((v) => ({
+      icon: "circle",
+      value: v.pcs,
+      name: v.type,
+    }));
 
     // 右边饼图配置文件
     const data7Obj = {
@@ -229,7 +240,7 @@ function Hot() {
       series: { center: ["50%", "35%"], radius: ["40%", "60%"] },
     };
     echartsFu2("#echarts7", data7, data7Obj);
-  }, [echartsFu2, select4]);
+  }, [echartsFu2]);
 
   // 关于浏览总数改变重新发请求拿数据
   useEffect(() => {
@@ -246,11 +257,40 @@ function Hot() {
     getlikeData2Fu();
   }, [getlikeData2Fu]);
 
-  // 关于馆藏统计改变数据重新发请求拿数据
+  // 关于馆藏统计进页面把所有数据保存到 goodsAllDataRef 中
   useEffect(() => {
     getGoodsAllFu();
   }, [getGoodsAllFu]);
 
+  // 改变馆藏下拉框的时候修改数据
+  useEffect(() => {
+    let data7: HotGoodsItem = [];
+    setAllNum5(goodsAllDataRef.current.total);
+    for (const k in goodsAllDataRef.current) {
+      if (k === select4) {
+        const selecData: { pcs: number; type: string }[] = Reflect.get(
+          goodsAllDataRef.current,
+          k
+        );
+
+        data7 = selecData.map((v) => {
+          return {
+            icon: "circle",
+            value: v.pcs,
+            name: v.type,
+          };
+        });
+      }
+    }
+
+    // 右边饼图配置文件
+    const data7Obj = {
+      legend: { left: "center", top: 280 },
+      series: { center: ["50%", "35%"], radius: ["40%", "60%"] },
+    };
+    echartsFu2("#echarts7", data7, data7Obj);
+  }, [echartsFu2, select4]);
+
   const getInfoFu = useCallback(async () => {
     // 第一个折线 echarts----------------------------
     const res1 = await getHotInfo1API();

houtai/src/types/api/hot.d.ts

@@ -32,3 +32,21 @@ export type HotMaoType = {
   pcs: number;
   son: HotMaoTypeT[];
 };
+
+export type HotGoodsItem = {
+  icon: "circle";
+  value: number;
+  name: string;
+}[];
+
+type HotGoodsApiType = {
+  pcs: number;
+  type: string;
+}[];
+
+export type HotGoodsType = {
+  age: HotGoodsApiType;
+  level: HotGoodsApiType;
+  texture: HotGoodsApiType;
+  total: number;
+};