fix(): 解决实时收入数据缺失时的问题

src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx

@@ -60,6 +60,11 @@ const ParkingOverview = connect(function mapStateToProps(state) {
   };
 })((props) => {
   const navigate = useNavigate();
+  let isSelected;
+  let isHovered;
+  let startRatio;
+  let endRatio;
+  let k;
   let hoveredIndex = "";
   //地图数据展示is
   const MapS = [
@@ -628,7 +633,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       return 0;
     }
   }
-  const getPie3D = (pieData, internalDiameterRatio) => {
+  const getPie3D = (pieData, bool) => {
     //internalDiameterRatio:透明的空心占比
     let series = [];
     let sumValue = 0;
@@ -710,9 +715,43 @@ const ParkingOverview = connect(function mapStateToProps(state) {
 
       legendData.push(series[i].name);
     }
+    // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
 
     let boxHeight = getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
     // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    // series.push({
+    //   name: "mouseoutSeries",
+    //   type: "surface",
+    //   parametric: true,
+    //   wireframe: {
+    //     show: false,
+    //   },
+    //   itemStyle: {
+    //     opacity: 0,
+    //   },
+    //   parametricEquation: {
+    //     u: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       return Math.sin(v) * Math.sin(u) + Math.sin(u);
+    //     },
+    //     y: function (u, v) {
+    //       return Math.sin(v) * Math.cos(u) + Math.cos(u);
+    //     },
+    //     z: function (u, v) {
+    //       return Math.cos(v) > 0 ? 0.1 : -0.1;
+    //     },
+    //   },
+    // });
+
     let option = {
       // backgroundColor: "#203598",
       // labelLine: {
@@ -751,6 +790,26 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       },
       tooltip: {
         backgroundColor: "#fff",
+        // formatter: (params) => {
+        //   if (
+        //     params.seriesName !== "mouseoutSeries" &&
+        //     params.seriesName !== "pie2d"
+        //   ) {
+        //     let bfb = (
+        //       (option.series[params.seriesIndex].pieData.endRatio -
+        //         option.series[params.seriesIndex].pieData.startRatio) *
+        //       100
+        //     ).toFixed(2);
+        //     if (bfb == "NaN") {
+        //       bfb = 0;
+        //     }
+        //     return (
+        //       `${params.seriesName}<br/>` +
+        //       `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //       `${bfb}%`
+        //     );
+        //   }
+        // },
         formatter: (params) => {
           if (
             params.seriesName !== "mouseoutSeries" &&
@@ -761,13 +820,23 @@ const ParkingOverview = connect(function mapStateToProps(state) {
                 option.series[params.seriesIndex].pieData.startRatio) *
               100
             ).toFixed(2);
-            return (
-              `${params.seriesName}<br/>` +
-              `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-              `${bfb}%`
-            );
+            if (bfb == "NaN") {
+              bfb = 0;
+            }
+            if (params.seriesName !== "mouseoutSeries") {
+              return `<div class="pojj">${params.seriesName}
+            <br/>${params.marker} ${
+                bool ? "0" : option.series[params.seriesIndex].pieData.value
+              }元  ${bfb}%
+            </div>`;
+            }
           }
         },
+        rich: {
+          a: {
+            color: "#FFF",
+          },
+        },
       },
       xAxis3D: {
         min: -1,
@@ -806,6 +875,12 @@ const ParkingOverview = connect(function mapStateToProps(state) {
     series.sort((a, b) => {
       return b.pieData.value - a.pieData.value;
     });
+    if ((height * 25) / series[0].pieData.value > 30) {
+      return 30;
+    }
+    // if (!(height * 25) / series[0].pieData.value > 30) {
+    //   return 20;
+    // }
     return (height * 25) / series[0].pieData.value;
   };
 
@@ -888,17 +963,10 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
       // 准备重新渲染扇形所需的参数
       let option = RightTwo;
-      console.log(option);
-      let isSelected;
-      let isHovered;
-      let startRatio;
-      let endRatio;
-      let k;
 
       // 如果触发 mouseover 的扇形当前已高亮，则不做操作
       if (hoveredIndex === params.seriesIndex) {
         return;
-
         // 否则进行高亮及必要的取消高亮操作
       } else {
         // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
@@ -922,7 +990,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
             );
           option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
-          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 重置
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
           hoveredIndex = "";
         }
 
@@ -952,8 +1020,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
         }
 
         // 使用更新后的 option，渲染图表
-        setRightTwo(option);
       }
+      setRightTwo(option);
     },
     globalout: (params) => {
       // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
@@ -961,11 +1029,11 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       let option = RightTwo;
       if (hoveredIndex !== "") {
         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-        let isSelected = option.series[hoveredIndex].pieStatus.selected;
-        let isHovered = false;
-        let k = option.series[hoveredIndex].pieStatus.k;
-        let startRatio = option.series[hoveredIndex].pieData.startRatio;
-        let endRatio = option.series[hoveredIndex].pieData.endRatio;
+        isSelected = option.series[hoveredIndex].pieStatus.selected;
+        isHovered = false;
+        k = option.series[hoveredIndex].pieStatus.k;
+        startRatio = option.series[hoveredIndex].pieData.startRatio;
+        endRatio = option.series[hoveredIndex].pieData.endRatio;
 
         // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
         option.series[hoveredIndex].parametricEquation = getParametricEquation(
@@ -978,7 +1046,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
         );
         option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
-        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 重置
+        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
         hoveredIndex = "";
       }
       // 使用更新后的 option，渲染图表
@@ -995,8 +1063,12 @@ const ParkingOverview = connect(function mapStateToProps(state) {
     ]
   ) => {
     // 获取所有地区名称
+    let bfg = true;
     const data =
       datas.map((ele) => {
+        if (ele.value != 0) {
+          bfg = false;
+        }
         return {
           name: ele.key,
           value: ele.value,
@@ -1004,8 +1076,23 @@ const ParkingOverview = connect(function mapStateToProps(state) {
           endRatio: 1,
         };
       }) || [];
+    let option;
+    if (bfg) {
+      //全为0
+      option = getPie3D(
+        data.map((ele) => {
+          return {
+            ...ele,
+            value: 1,
+          };
+        }),
+        true
+      );
+    } else {
+      //全不为0
+      option = getPie3D(data, false);
+    }
 
-    let option = getPie3D(data, 0.8);
     // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
     option.series.push({
       // name: "pie2d",