diff --git a/dist.zip b/dist.zip
index 7caa40c..2b21263 100644
Binary files a/dist.zip and b/dist.zip differ
diff --git a/src/views/commonPage/3DPie.vue b/src/views/commonPage/3DPie.vue
index c3cab5f..a65133d 100644
--- a/src/views/commonPage/3DPie.vue
+++ b/src/views/commonPage/3DPie.vue
@@ -1,8 +1,8 @@
 <!-- 光伏页面 -->
 <template>
-    <div class="threeD-pie">
-        <div ref="dom"></div>
-    </div>
+  <div class="threeD-pie">
+    <div ref="dom"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -14,506 +14,517 @@ const { proxy }: any = getCurrentInstance();
 const Echarts = inject("$echarts");
 
 const props = defineProps<{
-    threeDPieData: any;
+  threeDPieData: any;
 }>();
 
-let dom = ref()
+let dom = ref();
 onMounted(() => {
-    handelColumnEcharts()
+  handelColumnEcharts();
 });
 
 // 柱状图
 let handelColumnEcharts = () => {
-    let myChart = proxy.$echarts.init(dom.value);
-    // console.log(props.threeDPieData);
+  let myChart = proxy.$echarts.init(dom.value);
+  // console.log(props.threeDPieData);
 
+  let option: any = [];
+  const pieData = props.threeDPieData.pieData;
 
-    let option: any = []
-    const pieData = props.threeDPieData.pieData
+  //设置图表配置项
+  option = getPie3D(pieData, props.threeDPieData.center);
+  //设置交互事件 鼠标移入 点击
 
-    //设置图表配置项
-    option = getPie3D(pieData, props.threeDPieData.center)
-    //设置交互事件 鼠标移入 点击
-
-    //获取配置项
-    function getPie3D(pieData:any, internalDiameterRatio:any) {
-        let series = [];
-        let sumValue = 0;
-        let startValue = 0;
-        let endValue = 0;
-        let legendData = [];
-        let legendBfb = [];
-        let k = 1 - internalDiameterRatio;
-        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,
-                },
-
-                //设置饼图在容器中的位置(目前没发现啥用)
-                //   center: ['20%', '100%']
-            };
-
-            //曲面的颜色、不透明度等样式。
-            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，也就是实现每一个扇形。
-        legendData = [];
-        legendBfb = [];
-        for (let i = 0; i < series.length; i++) {
-            endValue = startValue + series[i].pieData.value * 1;
-            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;
-            let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
-            legendData.push({
-                name: series[i].name,
-                value: bfb,
-            });
-            legendBfb.push({
-                name: series[i].name,
-                value: bfb,
-            });
-        }
-        //(第二个参数可以设置你这个环形的高低程度)
-        let boxHeight = getHeight3D(series, 15); //通过传参设定3d饼/环的高度
-        // 准备待返回的配置项，把准备好的 legendData、series 传入。
-        // series.push({
-        //     name: "pie2d",
-        //     type: "pie",
-        //     label: {
-        //         opacity: 1,
-        //         fontSize: transformFontSize(15),
-        //         lineHeight: 20,
-        //         textStyle: {
-        //             fontSize: transformFontSize(15),
-        //             color: "#fff",
-        //         },
-        //         formatter: function (params) {
-        //             console.log(params);
-        //             return params.name + '\n' + params.percent + '%'
-        //         }
-        //     },
-        //     labelLine: {
-        //         length: 15,
-        //         length2: 30,
-        //         lineStyle: {
-        //             color: '#FFFFFF'
-        //         }
-        //     },
-        //     startAngle: -10, //起始角度，支持范围[0, 360]。
-        //     clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-        //     radius: ["40%", "40%"],
-        //     center: ["50%", "50%"],
-        //     data: pieData,
-        //     itemStyle: {
-        //         opacity: 0,
-        //     },
-        // });
-        let option = {
-            //图例组件
-            // legend: {
-            //     //图例列表的布局朝向。
-            //     orient: props.threeDPieData.legend.orient,
-            //     right: props.threeDPieData.legend.right,
-            //     top: props.threeDPieData.legend.top,
-            //     //图例文字每项之间的间隔
-            //     itemGap: props.threeDPieData.legend.itemGap,
-            //     show: false,
-            //     icon: "rect",
-            //     itemHeight: 10,
-            //     itemWidth: 10,
-            //     textStyle: {
-            //         //图例字体大小
-            //         fontSize: transformFontSize(15),
-            //         color: "#FFFFFF",
-            //         lineHeight: 20,
-            //     },
-            //     formatter: function (params) {
-            //         for (let i = 0; i < pieData.length; i++) {
-            //             if (pieData[i].name === params) {
-            //                 return `${pieData[i].name} ${(pieData[i].value / props.threeDPieData.total*100).toFixed(0)}%`
-            //             }
-            //         }
-            //     }
-            // },
-            //移动上去提示的文本内容
-            tooltip: {
-                backgroundColor: "rgba(18, 55, 85, 0.8);",
-                borderColor: "transparent",
-                extraCssText: `max-width:${transformFontSize(150)}px;max-height:${transformFontSize(80)}px`,
-                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);
-                        const value = option.series[params.seriesIndex].pieData.value;
-                        return (
-                            `<div style='width:10px;color:rgba(214, 243, 255, 0.9);'>` +
-                            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-                            `${params.seriesName}<br/>` +
-                            `<span style='margin-right:20px'>${value}</span>` +
-                            `<span >${bfb}%</span>` +
-                            `</div>`
-                        );
-                    }
-                },
-            },
-            //这个可以变形
-            xAxis3D: {
-                min: -1,
-                max: 1,
-            },
-            yAxis3D: {
-                min: -1,
-                max: 1,
-            },
-            zAxis3D: {
-                min: -1,
-                max: 1,
-            },
-            //此处是修改样式的重点
-            grid3D: {
-                show: false,
-                boxHeight: boxHeight, //圆环的高度
-                //这是饼图的位置
-                left: 0,
-                top: 0,
-                viewControl: {
-                    //3d效果可以放大、旋转等，请自己去查看官方配置
-                    alpha: props.threeDPieData.grid3D.viewControl.alpha, //角度(这个很重要 调节角度的)
-                    distance: props.threeDPieData.grid3D.viewControl.distance, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-                    rotateSensitivity: 0, //设置为0无法旋转
-                    zoomSensitivity: 0, //设置为0无法缩放
-                    panSensitivity: 0, //设置为0无法平移
-                    autoRotate: false, //自动旋转
-                },
-            },
-            series: series,
-        };
-        return option;
-    };
-
-    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-    function 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 = false;
-        }
-        // 通过扇形内径/外径的值，换算出辅助参数 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;
-            },
-        };
-    };
-    //这是一个自定义计算的方法
-    function fomatFloat(num, n) {
-        var f = parseFloat(num);
-        if (isNaN(f)) {
-            return false;
-        }
-        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
-        var s = f.toString();
-        var rs = s.indexOf(".");
-        //判定如果是整数，增加小数点再补0
-        if (rs < 0) {
-            rs = s.length;
-            s += ".";
-        }
-        while (s.length <= rs + n) {
-            s += "0";
-        }
-        return s;
-    };
-    //获取3d丙图的最高扇区的高度
-    function getHeight3D(series, height) {
-        series.sort((a, b) => {
-            return b.pieData.value - a.pieData.value;
-        });
-        return (height * props.threeDPieData.getHeight3D) / series[0].pieData.value;
-    }
-    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-    function bindListen() {
-        let selectedIndex = "";
-        let hoveredIndex = "";
-        // 监听点击事件，实现选中效果（单选）
-        myChart.on("click", function (params) {
-            //  从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-            let isSelected =
-                !option.series[params.seriesIndex].pieStatus.selected;
-            let isHovered =
-                option.series[params.seriesIndex].pieStatus.hovered;
-            let k = option.series[params.seriesIndex].pieStatus.k;
-            let startRatio =
-                option.series[params.seriesIndex].pieData.startRatio;
-            let endRatio = option.series[params.seriesIndex].pieData.endRatio;
-            // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-            if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
-                option.series[selectedIndex].parametricEquation =
-                    getParametricEquation(
-                        option.series[selectedIndex].pieData.startRatio,
-                        option.series[selectedIndex].pieData.endRatio,
-                        false,
-                        false,
-                        k,
-                        option.series[selectedIndex].pieData.value
-                    );
-                option.series[selectedIndex].pieStatus.selected = false;
-            }
-            // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-            option.series[params.seriesIndex].parametricEquation =
-                getParametricEquation(
-                    startRatio,
-                    endRatio,
-                    isSelected,
-                    isHovered,
-                    k,
-                    option.series[params.seriesIndex].pieData.value
-                );
-            option.series[params.seriesIndex].pieStatus.selected = isSelected;
-            // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-            isSelected ? (selectedIndex = params.seriesIndex) : null;
-            // 使用更新后的 option，渲染图表
-            myChart.setOption(option);
-        });
-        // 监听 mouseover，近似实现高亮（放大）效果
-        myChart.on("mouseover", function (params) {
-            // 准备重新渲染扇形所需的参数
-            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" &&
-                    params.seriesName !== "pie2d"
-                ) {
-                    // 从 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，渲染图表
-                myChart.setOption(option);
-            }
-        });
-        // 修正取消高亮失败的 bug
-        myChart.on("globalout", function () {
-            // 准备重新渲染扇形所需的参数
-            let isSelected;
-            let isHovered;
-            let startRatio;
-            let endRatio;
-            let k;
-            if (hoveredIndex !== "") {
-                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                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(
-                        startRatio,
-                        endRatio,
-                        isSelected,
-                        isHovered,
-                        k,
-                        option.series[hoveredIndex].pieData.value
-                    );
-                option.series[hoveredIndex].pieStatus.hovered = isHovered;
-                // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                hoveredIndex = "";
-            }
-            // 使用更新后的 option，渲染图表
-            myChart.setOption(option);
-        });
-    }
-    bindListen(myChart)
-
-    myChart.setOption(option);
-
-    // 根据页面大小自动响应图表大小
-    window.addEventListener("resize", function () {
-        myChart.resize();
+  //获取配置项
+  function getPie3D(pieData: any, internalDiameterRatio: any) {
+    let series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    let legendData = [];
+    let legendBfb = [];
+    let k = 1 - internalDiameterRatio;
+    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,
+        },
+
+        //设置饼图在容器中的位置(目前没发现啥用)
+        //   center: ['20%', '100%']
+      };
+
+      //曲面的颜色、不透明度等样式。
+      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，也就是实现每一个扇形。
+    legendData = [];
+    legendBfb = [];
+    for (let i = 0; i < series.length; i++) {
+      endValue = startValue + series[i].pieData.value * 1;
+      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;
+      let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
+      legendData.push({
+        name: series[i].name,
+        value: bfb,
+      });
+      legendBfb.push({
+        name: series[i].name,
+        value: bfb,
+      });
+    }
+    //(第二个参数可以设置你这个环形的高低程度)
+    let boxHeight = getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    // series.push({
+    //     name: "pie2d",
+    //     type: "pie",
+    //     label: {
+    //         opacity: 1,
+    //         fontSize: transformFontSize(15),
+    //         lineHeight: 20,
+    //         textStyle: {
+    //             fontSize: transformFontSize(15),
+    //             color: "#fff",
+    //         },
+    //         formatter: function (params) {
+    //             console.log(params);
+    //             return params.name + '\n' + params.percent + '%'
+    //         }
+    //     },
+    //     labelLine: {
+    //         length: 15,
+    //         length2: 30,
+    //         lineStyle: {
+    //             color: '#FFFFFF'
+    //         }
+    //     },
+    //     startAngle: -10, //起始角度，支持范围[0, 360]。
+    //     clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    //     radius: ["40%", "40%"],
+    //     center: ["50%", "50%"],
+    //     data: pieData,
+    //     itemStyle: {
+    //         opacity: 0,
+    //     },
+    // });
+    let option = {
+      //图例组件
+      legend: {
+        //图例列表的布局朝向。
+        orient: props.threeDPieData.legend.orient,
+        right: props.threeDPieData.legend.right,
+        top: props.threeDPieData.legend.top,
+
+        //图例文字每项之间的间隔
+          itemGap: props.threeDPieData.legend.itemGap,
+        show: false, //工具栏不展示
+        tooltip: {
+          show: true,
+        },
+        icon: "rect",
+        itemHeight: 10,
+        itemWidth: 10,
+        textStyle: {
+          //图例字体大小
+          fontSize: transformFontSize(15),
+          color: "#FFFFFF",
+          lineHeight: 20,
+        },
+        formatter: function (params) {
+          for (let i = 0; i < pieData.length; i++) {
+            if (pieData[i].name === params) {
+              return `${pieData[i].name} ${(
+                (pieData[i].value / props.threeDPieData.total) *
+                100
+              ).toFixed(0)}%`;
+            }
+          }
+        },
+      },
+      //移动上去提示的文本内容
+      tooltip: {
+        backgroundColor: "rgba(18, 55, 85, 0.8);",
+        borderColor: "transparent",
+        extraCssText: `max-width:${transformFontSize(
+          150
+        )}px;max-height:${transformFontSize(80)}px`,
+        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);
+            const value = option.series[params.seriesIndex].pieData.value;
+            return (
+              `<div style='width:10px;color:rgba(214, 243, 255, 0.9);'>` +
+              `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+              `${params.seriesName}<br/>` +
+              `<span style='margin-right:20px'>${value}</span>` +
+              `<span >${bfb}%</span>` +
+              `</div>`
+            );
+          }
+        },
+      },
+      //这个可以变形
+      xAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      yAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      zAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      //此处是修改样式的重点
+      grid3D: {
+        show: false,
+        boxHeight: boxHeight, //圆环的高度
+        //这是饼图的位置
+        left: 0,
+        top: 0,
+        viewControl: {
+          //3d效果可以放大、旋转等，请自己去查看官方配置
+          alpha: props.threeDPieData.grid3D.viewControl.alpha, //角度(这个很重要 调节角度的)
+          distance: props.threeDPieData.grid3D.viewControl.distance, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+          rotateSensitivity: 0, //设置为0无法旋转
+          zoomSensitivity: 0, //设置为0无法缩放
+          panSensitivity: 0, //设置为0无法平移
+          autoRotate: false, //自动旋转
+        },
+      },
+      series: series,
+    };
+    return option;
+  }
+
+  // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+  function 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 = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 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;
+      },
+    };
+  }
+  //这是一个自定义计算的方法
+  function fomatFloat(num, n) {
+    var f = parseFloat(num);
+    if (isNaN(f)) {
+      return false;
+    }
+    f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+    var s = f.toString();
+    var rs = s.indexOf(".");
+    //判定如果是整数，增加小数点再补0
+    if (rs < 0) {
+      rs = s.length;
+      s += ".";
+    }
+    while (s.length <= rs + n) {
+      s += "0";
+    }
+    return s;
+  }
+  //获取3d丙图的最高扇区的高度
+  function getHeight3D(series, height) {
+    series.sort((a, b) => {
+      return b.pieData.value - a.pieData.value;
+    });
+    return (height * props.threeDPieData.getHeight3D) / series[0].pieData.value;
+  }
+  // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+  function bindListen() {
+    let selectedIndex = "";
+    let hoveredIndex = "";
+    // 监听点击事件，实现选中效果（单选）
+    myChart.on("click", function (params) {
+      //  从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
+      let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
+      let k = option.series[params.seriesIndex].pieStatus.k;
+      let startRatio = option.series[params.seriesIndex].pieData.startRatio;
+      let endRatio = option.series[params.seriesIndex].pieData.endRatio;
+      // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+        option.series[selectedIndex].parametricEquation = getParametricEquation(
+          option.series[selectedIndex].pieData.startRatio,
+          option.series[selectedIndex].pieData.endRatio,
+          false,
+          false,
+          k,
+          option.series[selectedIndex].pieData.value
+        );
+        option.series[selectedIndex].pieStatus.selected = false;
+      }
+      // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      option.series[params.seriesIndex].parametricEquation =
+        getParametricEquation(
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          option.series[params.seriesIndex].pieData.value
+        );
+      option.series[params.seriesIndex].pieStatus.selected = isSelected;
+      // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      isSelected ? (selectedIndex = params.seriesIndex) : null;
+      // 使用更新后的 option，渲染图表
+      myChart.setOption(option);
+    });
+    // 监听 mouseover，近似实现高亮（放大）效果
+    myChart.on("mouseover", function (params) {
+      // 准备重新渲染扇形所需的参数
+      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" &&
+          params.seriesName !== "pie2d"
+        ) {
+          // 从 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，渲染图表
+        myChart.setOption(option);
+      }
+    });
+    // 修正取消高亮失败的 bug
+    myChart.on("globalout", function () {
+      // 准备重新渲染扇形所需的参数
+      let isSelected;
+      let isHovered;
+      let startRatio;
+      let endRatio;
+      let k;
+      if (hoveredIndex !== "") {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+        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(
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          option.series[hoveredIndex].pieData.value
+        );
+        option.series[hoveredIndex].pieStatus.hovered = isHovered;
+        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+        hoveredIndex = "";
+      }
+      // 使用更新后的 option，渲染图表
+      myChart.setOption(option);
+    });
+  }
+  bindListen(myChart);
+
+  myChart.setOption(option);
+
+  // 根据页面大小自动响应图表大小
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+};
 
 // 根据不同的屏幕宽度换算字体大小
 const transformFontSize = (fontsize: number) => {
-    // 获取屏幕宽度
+  // 获取屏幕宽度
 
-    const width = window.screen.width;
-    const height = window.screen.height;
-    let ratio: any = 0
-    if (height < 1920) {
-        ratio = width / 2220;
-    } else {
-        ratio = width / 3440;
-    }
-    // 取下整
-    return parseInt(fontsize * ratio);
+  const width = window.screen.width;
+  const height = window.screen.height;
+  let ratio: any = 0;
+  if (height < 1920) {
+    ratio = width / 2220;
+  } else {
+    ratio = width / 3440;
+  }
+  // 取下整
+  return parseInt(fontsize * ratio);
 };
 </script>
 
 <style lang="scss">
 .threeD-pie {
-    width: 100%;
-    height: 100%;
-
-    div {
-        width: 100%;
-        height: 100%;
-    }
+  width: 100%;
+  height: 100%;
+  width: 200%;
+  height: 200%;
+  div {
+    width: 200%;
+    height: 200%;
+  }
 }
-</style>
\ No newline at end of file
+#myCanvas {
+  width: 450px;
+  height: 300px;
+  border: 1px solid red;
+}
+</style>
diff --git a/src/views/pages/homePage/index.vue b/src/views/pages/homePage/index.vue
index 24ca10b..d0a16c5 100644
--- a/src/views/pages/homePage/index.vue
+++ b/src/views/pages/homePage/index.vue
@@ -49,10 +49,10 @@
                     <div class="total_load_3dEchart">
                       <div class="title_load fs40">负荷户数比例</div>
                       <div class="echarts">
-                        <!-- <Threepie
+                        <Threepie
                           v-if="show"
                           :threeDPieData="leftData.threeDPieData"
-                        ></Threepie> -->
+                        ></Threepie>
                       </div>
                     </div>
                   </div>
@@ -163,12 +163,12 @@
                         <p>可调负荷</p>
                       </div>
                       <div class="total_load_3dEchart">
-                        <div class="title_load fs40">负荷户数比例</div>
+                        <div class="title_load fs40">充电桩户数比例</div>
                         <div class="echarts">
-                          <!-- <Threepie
-                          v-if="show"
-                          :threeDPieData="leftData.threeDPieData1"
-                        ></Threepie> -->
+                          <Threepie
+                            v-if="show"
+                            :threeDPieData="leftData.threeDPieData1"
+                          ></Threepie>
                         </div>
 
                         <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
@@ -1073,12 +1073,12 @@ const getStatInfo = async () => {
 // 资源总览
 // 荷
 interface leftDataInfo {
-  businessValue: string,
-  residentValue: string,
-  tableData: tableInfo1[][]
-  tableData1: tableInfo1[][],
-  threeDPieData: any
-  threeDPieData1:any
+  businessValue: string;
+  residentValue: string;
+  tableData: tableInfo1[][];
+  tableData1: tableInfo1[][];
+  threeDPieData: any;
+  threeDPieData1: any;
 }
 interface tableInfo1 {
   index: string;
@@ -1089,113 +1089,106 @@ interface tableInfo1 {
 }
 let show = ref(true);
 let leftData = reactive<leftDataInfo>({
-  businessValue: '0',
-  residentValue: '0',
+  businessValue: "0",
+  residentValue: "0",
   tableData: [],
   tableData1: [],
   // 3d饼图数据
   threeDPieData: {
     pieData: [
       {
-        name: "谷段", //名称
-        value: 10, //值
+        name: "35kV", //名称
+        value: 3, //值
         itemStyle: {
-          color: "#EE5944",//半透明
+          color: "#EE5944", //半透明 232 158 205
+          // color: "rgba(250,189,101,.8)",//半透明 232 158 205
         },
       },
       {
-        name: "高峰",
-        value: 20,
-        itemStyle: {
-          color: "#2E53F5",
-        },
-      },
-      {
-        name: "尖峰",
-        value: 40,
+        name: "10kV",
+        value: 5,
         itemStyle: {
+          // color: "#2E53F5",
           color: "#F1BA50",
         },
       },
       {
-        name: "平段",
-        value: 40,
+        name: "0.4kV",
+        value: 393,
         itemStyle: {
-          color: "#6FFBF7",
+          // color: "#F1BA50",
+          color: "#2E53F5",
         },
-      }
+      },
     ],
     total: 108,
-    center: 0.9,   // 是否圆环
+    center: 0.85, // 是否圆环
     legend: {
-      show:false,
-      orient: 'horizontal',
-      left: 'center',
-      top: '-3%',
-      itemGap: 20
+      // show:false,
+      orient: "horizontal",
+      show: false,
+      left: "center",
+      top: "10%",
+      itemGap: 1990,
     },
     grid3D: {
       viewControl: {
-        distance: 350,    // 缩放视角
-        alpha: 45,        // 角度
-      }
+        distance: 250, // 缩放视角
+        alpha: 45, // 角度
+      },
     },
-    // radius: ["40%", "40%"],
-        // center: ["50%", "50%"],
-    getHeight3D: 40,          // 高度
+    getHeight3D: 20, // 高度
   },
   // 3d饼图数据1
   threeDPieData1: {
     pieData: [
       {
-        name: "谷段", //名称
+        name: "居民充电桩", //名称
         value: 10, //值
         itemStyle: {
-          color: "#EE5944",//半透明
+          color: "#EE5944", //半透明 232 158 205
+          // color: "rgba(250,189,101,.8)",//半透明 232 158 205
         },
       },
       {
-        name: "高峰",
+        name: "商业充电桩",
         value: 20,
         itemStyle: {
           color: "#2E53F5",
         },
       },
       {
-        name: "尖峰",
+        name: "V2G充电桩",
         value: 40,
         itemStyle: {
           color: "#F1BA50",
         },
       },
-      {
-        name: "平段",
-        value: 40,
-        itemStyle: {
-          color: "#6FFBF7",
-        },
-      }
     ],
     total: 108,
-    center: 0.9,   // 是否圆环
+    center: 0.85, // 是否圆环
     legend: {
+      // show:false,
+      show: false, //工具栏不展示
+      tooltip: {
+        show: true,
+      },
+      orient: "horizontal",
 
-      orient: 'horizontal',
-      left: 'center',
-      top: '-30%',
-      itemGap: 20
+      left: "center",
+
+      top: "2%",
+      itemGap: 1990,
     },
     grid3D: {
       viewControl: {
-        distance: 350,    // 缩放视角
-        alpha: 45,        // 角度
-      }
+        distance: 250, // 缩放视角
+        alpha: 35, // 角度
+      },
     },
-    // radius: ["40%", "40%"],
-        // center: ["50%", "50%"],
-    getHeight3D: 40,          // 高度
-  }
-})
+    getHeight3D: 30, // 高度
+  },
+});
 // 网
 // 网盒子得标识
 let networkContentFlag = ref(true);
@@ -1870,6 +1863,12 @@ const styleVar = computed(() => {
             top: changeHeight(-20);
             width: changeWidth(506.97);
             height: changeHeight(325.41);
+            left: changeHeight(-200);
+            top: changeHeight(-120);
+            width: changeWidth(506.97);
+            height: changeHeight(325.41);
+            width: changeWidth(1006.97);
+            height: changeHeight(625.41);
           }
         }
       }
@@ -1995,10 +1994,12 @@ const styleVar = computed(() => {
             }
             .echarts {
               position: absolute;
-              left: changeHeight(-100);
-              top: changeHeight(-20);
+              left: changeHeight(-220);
+              top: changeHeight(-120);
               width: changeWidth(506.97);
               height: changeHeight(325.41);
+              width: changeWidth(1006.97);
+              height: changeHeight(625.41);
             }
           }
         }