From 2b3db8f8915908f05a276b3e6f78b36d308cf31e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyu=E2=80=9D?= <“winebunny@163.com”>
Date: Tue, 16 Jul 2024 23:23:59 +0800
Subject: [PATCH] qw

---
 src/views/pages/homePage/3Dechart2.vue |  16 +-
 src/views/pages/homePage/Treepie.vue   | 524 +++++++++++++++++++++++++
 src/views/pages/homePage/index.vue     |   1 +
 3 files changed, 534 insertions(+), 7 deletions(-)
 create mode 100644 src/views/pages/homePage/Treepie.vue

diff --git a/src/views/pages/homePage/3Dechart2.vue b/src/views/pages/homePage/3Dechart2.vue
index d14535a..0b5d878 100644
--- a/src/views/pages/homePage/3Dechart2.vue
+++ b/src/views/pages/homePage/3Dechart2.vue
@@ -180,30 +180,32 @@ export default {
       // 传入数据生成 option
       const optionsData = [
         {
-          name: "充电桩",
-          value: 4256,
+          name: "35kV",
+          value: 3,
           itemStyle: {
             //   opacity: 0.5,
             color: "rgba(102, 235, 287, 1)",
           },
         },
         {
-          name: "空调",
-          value: 2356,
+          name: "10kV",
+          value: 5,
           itemStyle: {
             //   opacity: 0.5,
             color: "rgba(250, 179, 109, 1)",
           },
         },
         {
-          name: "微网",
-          value: 2018,
+          name: "0.4kV",
+          value: 393,
           itemStyle: {
             //   opacity: 0.5,
             color: "rgba(1, 164,242, 1)",
           },
         },
+        
       ];
+      
       const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
       series.push({
         name: "pie2d",
@@ -357,6 +359,6 @@ export default {
   // width: 100%;
   // height: 300px;
   width: 150%;
-  height: 150%;;
+  height: 150%;
 }
 </style>
diff --git a/src/views/pages/homePage/Treepie.vue b/src/views/pages/homePage/Treepie.vue
new file mode 100644
index 0000000..d5c25ef
--- /dev/null
+++ b/src/views/pages/homePage/Treepie.vue
@@ -0,0 +1,524 @@
+<!-- 光伏页面 -->
+<template>
+    <div class="threeD-pie">
+        <div ref="dom"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, inject, nextTick, getCurrentInstance } from "vue";
+import "echarts-gl";
+// 通过Vue全局注册方式获取F
+const { proxy }: any = getCurrentInstance();
+// 通过 inject 接收Echarts
+const Echarts = inject("$echarts");
+
+const props = defineProps<{
+    threeDPieData: any;
+}>();
+
+let dom = ref()
+onMounted(() => {
+    handelColumnEcharts()
+});
+
+// 柱状图
+let handelColumnEcharts = () => {
+    let myChart = proxy.$echarts.init(dom.value);
+    console.log(props.threeDPieData, 'props.threeDPieData');
+
+
+    let option: any = []
+    console.log(props.threeDPieData.pieData, 'props.threeDPieData.pieData');
+
+    const pieData = props.threeDPieData.pieData
+    console.log(pieData, 'pieData');
+    //设置图表配置项
+    option = getPie3D(pieData, props.threeDPieData.center)
+    //设置交互事件 鼠标移入 点击
+
+    //获取配置项
+    function getPie3D(pieData, internalDiameterRatio) {
+        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: ['50%', '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: true,
+                icon: "rect",
+                itemHeight: 10,
+                itemWidth: 10,
+                textStyle: {
+                    //图例字体大小
+                    fontSize: transformFontSize(18),
+                    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(230)}px;max-height:${transformFontSize(80)}px`,
+                formatter: (params) => {
+                    if (
+                        params.seriesName !== "mouseoutSeries" &&
+                        params.seriesName !== "pie2d"
+                    ) {
+                        console.log(option.series, params, 'params');
+
+                        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:40px;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} ` +
+                            // `<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 (width > 3000) {
+        ratio = width / 3140;
+    } else {
+        ratio = width / 2220;
+        // 宁波分辨率
+        ratio = width / 3220;
+    }
+    // 取下整
+    return parseInt(fontsize * ratio);
+};
+</script>
+
+<style lang="scss">
+.threeD-pie {
+    width: 100%;
+    height: 100%;
+
+    div {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pages/homePage/index.vue b/src/views/pages/homePage/index.vue
index b97caf5..fb85d53 100644
--- a/src/views/pages/homePage/index.vue
+++ b/src/views/pages/homePage/index.vue
@@ -685,6 +685,7 @@ import load_echart from "./oneLine.vue";
 import storage_echart from "./oneLine.vue";
 import threeEchart from "./3Dechart.vue";
 import threeEchart2 from "./3Dechart2.vue";
+import Treepie from "./Treepie.vue";
 
 import runListenPage from "./runListenPage.vue";