fix(): 解决大屏饼图显示问题

src/components/MapComponets/MarkCenter/index.jsx

@@ -44,7 +44,7 @@ function Markers(props) {
     let marker = new AMap.Marker({
       position: new AMap.LngLat(data.lng, data.lat),
       content: markerContent,
-      offset: new AMap.Pixel(-13, -30),
+      offset: new AMap.Pixel(-8, -23),
     });
     map.add(marker);
     // .bindTooltip(`<span>${data.name}</span>`, {

src/components/MapComponets/ParkViewCirMar/index.jsx

@@ -81,8 +81,9 @@ function Markers(props) {
         content: retext(elem.type),
         name: elem.text,
         id: elem.roadId || elem.id,
+        // title: `${elem.text} (${elem?.userTotal}/${elem?.berthTotal})`,
         option: elem,
-        offset: new AMap.Pixel(-15, -15),
+        offset: new AMap.Pixel(-15, -30),
       });
       mark.on("click", function (e) {
         clickCb(e.target.w.option);
@@ -92,6 +93,7 @@ function Markers(props) {
         // clearTimeout(timer);
         Mapmove.setPosition(e.target.getPosition());
         Mapmove.setLabel({
+          offset: new AMap.Pixel(22, 2),
           content: `${data.name} (${data?.option?.userTotal}/${data?.option?.berthTotal})`,
         });
       });

src/pages/DataAnalysisPrediction/ParkingOverview/Map.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { EnvironmentOutlined, SearchOutlined } from "@ant-design/icons";
+import mgreen from "@/assets/images/equip/home/mark_green.png";
 function BaseMap(props) {
   const {
     id = "map",
@@ -10,7 +11,12 @@ function BaseMap(props) {
     Option = "",
     setOption = [],
   } = props;
-
+  const retext = (val) => {
+    var str = mgreen;
+    return `<div className="mark_ju">
+                <img src='${str}' alt="" />
+              </div>`;
+  };
   const mapConfig = {
     center: sysConfig.map.center,
     zoom: sysConfig.map.zoom,
@@ -46,6 +52,13 @@ function BaseMap(props) {
     if (onClick) {
       _map.on("click", function (info) {
         onClick(info);
+        // console.log(info);
+        // let mark = new AMap.Marker({
+        //   position: [info.lnglat.lng, info.lnglat.lat],
+        //   content: retext(),
+        //   offset: new AMap.Pixel(-15, -30),
+        // });
+        // _map.add(mark);
       });
     }
     mapRef.current = map;

src/pages/DataAnalysisPrediction/ParkingOverview/index.scss

@@ -451,7 +451,7 @@ $color-primary : var(--color-primary);
   }
 
   .right_home {
-    z-index: 1000;
+    z-index: 1001;
     position: absolute;
     top: 90px;
     right: 50px;

src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx

@@ -60,6 +60,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
   };
 })((props) => {
   const navigate = useNavigate();
+  let selectedIndex = "";
+  let hoveredIndex = "";
   //地图数据展示is
   const MapS = [
     {
@@ -89,7 +91,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
   //右侧时间选择
   const Dayfour = [
     {
-      text: "昨日",
+      text: "当日",
       value: "1",
     },
 
@@ -98,11 +100,11 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       value: "2",
     },
     {
-      text: "近7日",
+      text: "近7天",
       value: "3",
     },
     {
-      text: "近30日",
+      text: "近30天",
       value: "4",
     },
   ];
@@ -616,7 +618,333 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       return 0;
     }
   }
+  const getPie3D = (pieData, internalDiameterRatio) => {
+    //internalDiameterRatio:透明的空心占比
+    let series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    let k = 1;
+    let legendData = [];
+    pieData.sort((a, b) => {
+      return b.value - a.value;
+    });
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i++) {
+      sumValue += pieData[i].value;
+      let seriesItem = {
+        name:
+          typeof pieData[i].name === "undefined"
+            ? `series${i}`
+            : pieData[i].name,
+        type: "surface",
+        parametric: true,
+        wireframe: {
+          show: false,
+        },
+        pieData: pieData[i],
+        pieStatus: {
+          selected: false,
+          hovered: false,
+          k: k,
+        },
+        radius: "50%",
+        center: ["10%", "10%"],
+      };
+
+      if (typeof pieData[i].itemStyle != "undefined") {
+        let itemStyle = {};
+        typeof pieData[i].itemStyle.color != "undefined"
+          ? (itemStyle.color = pieData[i].itemStyle.color)
+          : null;
+        typeof pieData[i].itemStyle.opacity != "undefined"
+          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+          : null;
+        seriesItem.itemStyle = itemStyle;
+      }
+      series.push(seriesItem);
+    }
+
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+
+    // for (let i = 0; i < series.length; i++) {
+    //   endValue = startValue + series[i].pieData.value;
+    //   series[i].pieData.startRatio = startValue / sumValue;
+    //   series[i].pieData.endRatio = endValue / sumValue;
+    //   series[i].parametricEquation = getParametricEquation(
+    //     series[i].pieData.startRatio,
+    //     series[i].pieData.endRatio,
+    //     false,
+    //     false,
+    //     k,
+    //     series[i].pieData.value
+    //   );
+    //   startValue = endValue;
+    // }
+    for (let i = 0; i < series.length; i++) {
+      endValue = startValue + series[i].pieData.value;
+
+      series[i].pieData.startRatio = startValue / sumValue;
+      series[i].pieData.endRatio = endValue / sumValue;
+      series[i].parametricEquation = getParametricEquation(
+        series[i].pieData.startRatio,
+        series[i].pieData.endRatio,
+        false,
+        false,
+        k,
+        series[i].pieData.value
+      );
+
+      startValue = endValue;
+
+      legendData.push(series[i].name);
+    }
+
+    let boxHeight = getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
+    // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    let option = {
+      // backgroundColor: "#203598",
+      // labelLine: {
+      //   show: true,
+      //   lineStyle: {
+      //     color: "#fff",
+      //   },
+      // },
+      legend: {
+        selectedMode: false,
+        data: legendData,
+        // formatter: function (name) {
+        //   return `${name}:\n{|1000}}`;
+        // },
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      label: {
+        show: true,
+        position: "outside",
+        formatter: "{b|{b}}\n{c|{c}%}",
+        rich: {
+          b: {
+            fontSize: 16,
+            lineHeight: 16,
+            // fontWeight: "bold",
+            color: "#fff",
+          },
+          c: {
+            fontSize: 12,
+            color: "#fff",
+          },
+        },
+      },
+      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);
+            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}%`
+            );
+          }
+        },
+      },
+      xAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      yAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      zAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      grid3D: {
+        show: false,
+        boxHeight: boxHeight, //圆环的高度
+        left: 0,
+        top: 0, //3d饼图的位置
+        viewControl: {
+          //3d效果可以放大、旋转等，请自己去查看官方配置
+          alpha: 30, //角度
+          distance: 250, //调整视角到主体的距离，类似调整zoom
+          rotateSensitivity: 0, //设置为0无法旋转
+          zoomSensitivity: 0, //设置为0无法缩放
+          panSensitivity: 0, //设置为0无法平移
+          autoRotate: false, //自动旋转
+        },
+      },
+      series: series,
+    };
+    return option;
+  };
+
+  //获取3d丙图的最高扇区的高度
+  const getHeight3D = (series, height) => {
+    series.sort((a, b) => {
+      return b.pieData.value - a.pieData.value;
+    });
+    return (height * 25) / series[0].pieData.value;
+  };
 
+  // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+  const getParametricEquation = (
+    startRatio,
+    endRatio,
+    isSelected,
+    isHovered,
+    k,
+    h
+  ) => {
+    // 计算
+    let midRatio = (startRatio + endRatio) / 2;
+    let startRadian = startRatio * Math.PI * 2;
+    let endRadian = endRatio * Math.PI * 2;
+    let midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+      isSelected = true;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = typeof k !== "undefined" ? k : 1 / 3;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    let hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+      u: {
+        min: -Math.PI,
+        max: Math.PI * 3,
+        step: Math.PI / 32,
+      },
+      v: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        if (u < startRadian) {
+          return (
+            offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          );
+        }
+        if (u > endRadian) {
+          return (
+            offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          );
+        }
+        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+      },
+      y: function (u, v) {
+        if (u < startRadian) {
+          return (
+            offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          );
+        }
+        if (u > endRadian) {
+          return (
+            offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          );
+        }
+        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+      },
+      z: function (u, v) {
+        if (u < -Math.PI * 0.5) {
+          return Math.sin(u);
+        }
+        if (u > Math.PI * 2.5) {
+          return Math.sin(u) * h * 0.1;
+        }
+        return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+      },
+    };
+  };
+  const onEvents = {
+    mouseover: (params) => {
+      // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      // 准备重新渲染扇形所需的参数
+      let option = RightTwo;
+      let isSelected;
+      let isHovered;
+      let startRatio;
+      let endRatio;
+      let k;
+
+      // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+      if (hoveredIndex === params.seriesIndex) {
+        return;
+
+        // 否则进行高亮及必要的取消高亮操作
+      } else {
+        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+          isSelected = option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          startRatio = option.series[hoveredIndex].pieData.startRatio;
+          endRatio = option.series[hoveredIndex].pieData.endRatio;
+          k = option.series[hoveredIndex].pieStatus.k;
+
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          option.series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              option.series[hoveredIndex].pieData.value
+            );
+          option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+
+        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+        if (params.seriesName !== "mouseoutSeries") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = option.series[params.seriesIndex].pieStatus.selected;
+          isHovered = true;
+          startRatio = option.series[params.seriesIndex].pieData.startRatio;
+          endRatio = option.series[params.seriesIndex].pieData.endRatio;
+          k = option.series[params.seriesIndex].pieStatus.k;
+
+          // 对当前点击的扇形，执行高亮操作（对 option 更新）
+          option.series[params.seriesIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              option.series[params.seriesIndex].pieData.value + 5
+            );
+          option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+          // 记录上次高亮的扇形对应的系列号 seriesIndex
+          hoveredIndex = params.seriesIndex;
+        }
+
+        // 使用更新后的 option，渲染图表
+        setRightTwo(option);
+      }
+    },
+    // 其他事件处理程序也可以在这里添加
+  };
   const getRingOption = (
     datas = [
       {
@@ -626,92 +954,65 @@ const ParkingOverview = connect(function mapStateToProps(state) {
     ]
   ) => {
     // 获取所有地区名称
-
-    const arrRight =
+    const data =
       datas.map((ele) => {
         return {
           name: ele.key,
           value: ele.value,
+          startRatio: 0.7,
+          endRatio: 1,
         };
       }) || [];
-    setRightTwo({
-      title: {
-        text: "{a|" + sum(datas.map((ele) => ele.value)).toFixed(2) + "}",
-        x: "center",
-        y: "center",
-        subtext: "营业收入",
-        subtextStyle: {
-          color: "#fff",
-          fontSize: 14,
-        },
-        textStyle: {
-          rich: {
-            a: {
-              fontSize: 30,
-              color: "#4DC3FF",
-            },
 
-            c: {
-              fontSize: 14,
-              color: "#4DC3FF",
-              // padding: [5,0]
-            },
-          },
-        },
+    let option = getPie3D(data, 0.8);
+    // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+    option.series.push({
+      // name: "pie2d",
+      // type: "pie",
+      // labelLine: {
+      //   length: 10,
+      //   length2: 10,
+      // },
+      // startAngle: -25, //起始角度，支持范围[0, 360]。
+      // clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+      // radius: ["65%", "65%"],
+      // center: ["55%", "48%"], //指示线的位置
+      // data: data,
+      // itemStyle: {
+      //   opacity: 0,
+      // },
+      name: "mouseoutSeries",
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
       },
-      tooltip: {
-        trigger: "item",
-        formatter: (params) => {
-          return `<div class="ttopi">${params.marker} ${params.name} ${params.value} ${params.percent}%</div>`;
-        },
+      itemStyle: {
+        opacity: 0,
       },
-      legend: {
-        type: "scroll",
-        //right: "5%",
-        top: "bottom",
-        bottom: "center",
-        //data: areaNames,
-        data: datas.map((ele) => ele.key),
-        itemWidth: 18,
-        itemHeight: 12,
-        textStyle: {
-          fontSize: 14,
-          color: "white",
+      parametricEquation: {
+        u: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
         },
-      },
-
-      // color: ["#34F3B6", "#4DC3FF"],
-      //series: seriesData,
-      series: [
-        {
-          //  name: 'Access From',
-          type: "pie",
-          radius: ["58%", "70%"],
-          avoidLabelOverlap: false,
-          label: {
-            show: false,
-            position: "center",
-          },
-          // emphasis: {
-          //   label: {
-          //     show: true,
-          //     fontSize: 40,
-          //     fontWeight: "bold",
-          //   },
-          // },
-          labelLine: {
-            show: false,
-          },
-          data: arrRight,
+        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;
         },
-      ],
-      grid: {
-        x: 20,
-        y: 25,
-        x2: 20,
-        y2: 50,
       },
     });
+    setRightTwo(option);
   };
   //右下
   const getRevenueOption = (
@@ -735,8 +1036,9 @@ const ParkingOverview = connect(function mapStateToProps(state) {
         trigger: "axis",
         formatter: (params) => {
           return `<div class="ttopi">
-            ${params[0].axisValue}   ${params[0].seriesName}  ${params[0].value}
-            </div>`;
+                    <div>${params[0].marker}${params[0].axisValue}   ${params[0].seriesName}  ${params[0].value} </div>
+                    <div>${params[1].marker}${params[1].axisValue}   ${params[1].seriesName}  ${params[1].value} </div>
+                  </div>`;
         },
       },
       legend: {
@@ -767,6 +1069,37 @@ const ParkingOverview = connect(function mapStateToProps(state) {
           },
         },
       },
+      dataZoom: [
+        {
+          type: "slider",
+          height: 10,
+          textStyle: {
+            color: "B5BAC2",
+          },
+          handleIcon:
+            "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
+          dataBackground: {
+            areaStyle: {
+              color: "#72afff",
+            },
+            lineStyle: {
+              opacity: 0.8,
+              color: "#72afff",
+            },
+            // brushSelect: false,
+          },
+          borderColor: "#3974D6",
+          start: 46,
+          end: 100,
+          // minSpan: flowMountType == "year" ? 0 : 46,
+          bottom: 20,
+        },
+        {
+          type: "inside",
+          // moveOnMousewheel: true, //
+          // moveonMouseMove: true, //鼠标
+        },
+      ],
       yAxis: {
         type: "value",
         name: "金额(元)",
@@ -797,21 +1130,45 @@ const ParkingOverview = connect(function mapStateToProps(state) {
       //series: seriesData,
       series: [
         {
-          name: "停车收入",
+          name: "应收",
           type: "line",
           areaStyle: {
             //color: '#94C9EC'
 
             color: "rgba(13,225,250, .31)",
           },
+          showSymbol: false,
+          lineStyle: {
+            color: "rgba(13,225,250, 1)",
+          },
+          itemStyle: {
+            color: "rgba(13,225,250, 1)", // 设置曲线上的点的颜色为蓝色
+          },
           data: data.map((ele) => ele.value),
         },
+        {
+          name: "实收",
+          type: "line",
+          areaStyle: {
+            //color: 'red'
+
+            color: "rgba(235, 39, 39,.31)",
+          },
+          showSymbol: false,
+          lineStyle: {
+            color: "rgba(235, 39, 39,1)",
+          },
+          itemStyle: {
+            color: "rgba(235, 39, 39,1)", // 设置曲线上的点的颜色为蓝色
+          },
+          data: data.map((ele) => ele.value + 100),
+        },
       ],
       grid: {
         x: 50,
         y: 35,
         x2: 30,
-        y2: 30,
+        y2: 50,
       },
     });
   };
@@ -1618,50 +1975,59 @@ const ParkingOverview = connect(function mapStateToProps(state) {
           <div className="pkh_title">
             {CarRoad[CarShow]?.type == 2 ? "实时收入占比" : "路段收费率排行榜"}
           </div>
-          <div className="day_select">
-            {CarRoad[CarShow]?.type != 2
-              ? Dayfour.map((ele) => {
-                  return (
-                    <span
-                      key={ele.text}
-                      className={
-                        DaySet == ele.value
-                          ? "day_checked day_item"
-                          : "day_item"
-                      }
-                      onClick={() => SelectDay(2, ele.value)}
-                    >
-                      {ele.text}
-                    </span>
-                  );
-                })
-              : ""}
-          </div>
+
+          {CarRoad[CarShow]?.type != 2 ? (
+            <div className="day_select">
+              {Dayfour.map((ele) => {
+                return (
+                  <span
+                    key={ele.text}
+                    className={
+                      DaySet == ele.value ? "day_checked day_item" : "day_item"
+                    }
+                    onClick={() => SelectDay(2, ele.value)}
+                  >
+                    {ele.text}
+                  </span>
+                );
+              })}
+            </div>
+          ) : (
+            ""
+          )}
+
           {CarRoad[CarShow]?.type == 1 ? (
             <div className="topcarlv">
               <div className="tpph topt">
                 {/* <img src={TOP2} alt="" /> */}
                 <span>TOP2</span>
-                <p>周转率{Cartop[1]?.rate || 0}</p>
+                <p>
+                  {Cartop[1]?.rate || 0}/{Cartop[1]?.rate || 0}
+                </p>
                 <div title={Cartop[1]?.name || ""}>{Cartop[1]?.name || ""}</div>
               </div>
               <div className="tpph topo">
                 {/* <img src={TOP1} alt="" /> */}
                 <span>TOP1</span>
-                <p>周转率{Cartop[0]?.rate || 0}</p>
+                <p>
+                  {Cartop[0]?.rate || 0}/{Cartop[0]?.rate || 0}
+                </p>
                 <div title={Cartop[0]?.name || ""}>{Cartop[0]?.name || ""}</div>
               </div>
               <div className="tpph tops">
                 {/* <img src={TOP3} alt="" /> */}
                 <span>TOP3</span>
-                <p>周转率{Cartop[2]?.rate || 0}</p>
+                <p>
+                  {Cartop[2]?.rate || 0}/{Cartop[2]?.rate || 0}
+                </p>
                 <div title={Cartop[2]?.name || ""}>{Cartop[2]?.name || ""}</div>
               </div>
             </div>
           ) : (
             <ReactEcharts
+              onEvents={onEvents}
               option={RightTwo}
-              style={{ height: "180px", width: "100%" }}
+              style={{ height: "200px", width: "100%" }}
             />
           )}
         </div>