更新

src/view/echarts/pie3d.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width:100%;height:100%;"></div>
+    <div ref="chart" style="width:100%;height:200px;"></div>
 </template>
 
 <script setup>
@@ -8,89 +8,74 @@ import { onMounted, reactive, ref } from "vue";
 import * as echarts from 'echarts'
 import 'echarts-gl';
 
-const chart =ref(); // 创建DOM引用
+const chart = ref(); // 创建DOM引用
+
+const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 244, 245)', 'rgba(7, 166, 255)', 'rgba(255, 208, 118)', 'rgba(109, 148, 198)', 'rgba(255, 255, 255)']
 
 const pieData = [
     {
         name: "A", //名称
         value: 10, //值
-        itemStyle: {
-            color: "#8fd7fce8",//半透明
-        },
     },
     {
         name: "B",
         value: 8,
-        itemStyle: {
-            color: "#466BE7e8",
-        },
     },
     {
         name: "C",
         value: 2,
-        itemStyle: {
-            color: "#F4BB29e8",
-        },
     },
     {
         name: "D",
         value: 6,
-        itemStyle: {
-            color: "#FF8329",
-        },
     },
     {
         name: "E",
         value: 5,
-        itemStyle: {
-            color: "#11EFC7",
-        },
     },
     {
         name: "F",
         value: 1,
-        itemStyle: {
-            color: "#006EF5",
-        },
     },
     {
         name: "G",
-        value: 5,
+        value: 5
-        itemStyle: {
-            color: "#846BCE",
-        },
     },
 ]
 
+const serData = pieData.map((dItem, index) => {
+      return {
+        ...dItem,
+        value: Number(dItem.value),
+        itemStyle: {
+          color: colorList[index]
+        },
+      }
+    })
+
 //设置图表配置项
-const option = getPie3D(pieData, 0.8)
+const option = getPie3D(serData, 0.8)
 
-
+// 生成模拟 3D 饼图的配置项
-//获取配置项
 function getPie3D(pieData, internalDiameterRatio) {
     let series = [];
     let sumValue = 0;
     let startValue = 0;
     let endValue = 0;
     let legendData = [];
-    let legendBfb = [];
+    let k =
-    let k = 1 - internalDiameterRatio;
+        typeof internalDiameterRatio !== 'undefined'
-    pieData.sort((a, b) => {
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
-        return b.value - a.value;
+            : 1 / 3;
-    });
+
-    // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    // 为每一个饼图数据，生成一个 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,
-            name:
+            type: 'surface',
-                typeof pieData[i].name === "undefined"
-                    ? `series${i}`
-                    : pieData[i].name,
-            type: "surface",
-            //是否为参数曲面（是）
             parametric: true,
-            //曲面图网格线（否）上面一根一根的
             wireframe: {
                 show: false,
             },
@@ -98,22 +83,18 @@ function getPie3D(pieData, internalDiameterRatio) {
             pieStatus: {
                 selected: false,
                 hovered: false,
-                k: k,
+                k: 1 / 10,
             },
-
-            //设置饼图在容器中的位置(目前没发现啥用)
-            //   center: ['50%', '100%']
         };
 
-        //曲面的颜色、不透明度等样式。
+        if (typeof pieData[i].itemStyle != 'undefined') {
-        if (typeof pieData[i].itemStyle != "undefined") {
             let itemStyle = {};
-            typeof pieData[i].itemStyle.color != "undefined"
+
-                ? (itemStyle.color = pieData[i].itemStyle.color)
+            typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
-                : null;
+            typeof pieData[i].itemStyle.opacity != 'undefined'
-            typeof pieData[i].itemStyle.opacity != "undefined"
                 ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                 : null;
+
             seriesItem.itemStyle = itemStyle;
         }
         series.push(seriesItem);
@@ -121,10 +102,9 @@ function getPie3D(pieData, internalDiameterRatio) {
 
     // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
     // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-    legendData = [];
-    legendBfb = [];
     for (let i = 0; i < series.length; i++) {
-        endValue = startValue + series[i].pieData.value * 1;
+        endValue = startValue + series[i].pieData.value;
+
         series[i].pieData.startRatio = startValue / sumValue;
         series[i].pieData.endRatio = endValue / sumValue;
         series[i].parametricEquation = getParametricEquation(
@@ -135,23 +115,84 @@ function getPie3D(pieData, internalDiameterRatio) {
             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 传入。
 
+        startValue = endValue;
+
+        legendData.push(series[i].name);
+    }
+
+    // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+    // series.push({
+    //     name: 'mouseoutSeries',
+    //     type: 'surface',
+    //     parametric: true,
+    //     wireframe: {
+    //         show: false,
+    //     },
+    //     width: '30px',
+    //     itemStyle: {
+    //         opacity: 0.7,
+    //         color: '#fff',
+    //     },
+    //     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)) / Math.PI);
+    //         },
+    //         y: function (u, v) {
+    //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
+    //         },
+    //         z: function (u, v) {
+    //             return Math.cos(v) > 0 ? -4 : -4;
+    //         },
+    //     },
+    // });
+    // series.push({
+    //     name: 'mouseoutSeries',
+    //     type: 'surface',
+    //     parametric: true,
+    //     wireframe: {
+    //         show: false,
+    //     },
+    //     itemStyle: {
+    //         opacity: 0.5,
+    //         color: '#fff',
+    //     },
+    //     parametricEquation: {
+    //         u: {
+    //             min: 0,
+    //             max: Math.PI * 2,
+    //             step: Math.PI / 20,
+    //         },
+    //         v: {
+    //             min: 1.5,
+    //             max: 3,
+    //             step: Math.PI / 20,
+    //         },
+    //         x: function (u, v) {
+    //             return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) *1;
+    //         },
+    //         y: function (u, v) {
+    //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI)*1;
+    //         },
+    //         z: function (u, v) {
+    //             return Math.cos(v) > 0 ? -4 : -4;
+    //         },
+    //     },
+    // });
+
+    // 准备待返回的配置项，把准备好的 legendData、series 传入。
     let option = {
-        // backgroundColor: '#000',
+        //animation: false,
         //图例组件
         legend: {
             data: legendData,
@@ -165,35 +206,36 @@ function getPie3D(pieData, internalDiameterRatio) {
                 "#F4BB29",
                 "#49C384",
             ],
+            width: '30%',
             //图例列表的布局朝向。
             // orient: "vertical",
-            // right: 20,
+            right: 0,
             // bottom: 20,
-            bottom: '5%',
+            top: 'center',
-            left: 'center',
+            // left: '10px',
             //图例文字每项之间的间隔
-            itemGap: 5,
+            itemGap: 20,
             show: true,
             icon: "rect",
             itemHeight: 10,
             itemWidth: 10,
             textStyle: {
                 //图例字体大小
-                fontSize: 12,
+                fontSize: 14,
                 color: "#B8DDFF",
                 lineHeight: 20,
             },
 
             //格式化图例文本
-            formatter: function (name) {
+            // formatter: function (name) {
-                var target;
+            //     var target;
-                for (var i = 0, l = pieData.length; i < l; i++) {
+            //     for (var i = 0, l = pieData.length; i < l; i++) {
-                    if (pieData[i].name == name) {
+            //         if (pieData[i].name == name) {
-                        target = pieData[i].value;
+            //             target = pieData[i].value;
-                    }
+            //         }
-                }
+            //     }
-                return `${name}   ${target}`;
+            //     return `${name}   ${target}`;
-            },
+            // },
         },
         //移动上去提示的文本内容
         tooltip: {
@@ -221,40 +263,28 @@ function getPie3D(pieData, internalDiameterRatio) {
                 }
             },
         },
-        //这个可以变形
+        xAxis3D: {},
-        xAxis3D: {
+        yAxis3D: {},
-            min: -1,
+        zAxis3D: {},
-            max: 1,
-        },
-        yAxis3D: {
-            min: -1,
-            max: 1,
-        },
-        zAxis3D: {
-            min: -1,
-            max: 1,
-        },
-        //此处是修改样式的重点
         grid3D: {
-            show: false,
-            boxHeight: boxHeight, //圆环的高度
-            //这是饼图的位置
-            left: 0,
-            top: 0,
             viewControl: {
-                //3d效果可以放大、旋转等，请自己去查看官方配置
+                autoRotate: true,
-                alpha: 30, //角度(这个很重要 调节角度的)
+                rotateSensitivity: 1, //设置为0无法旋转
-                distance: 200, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+                zoomSensitivity: 1, //设置为0无法缩放
-                rotateSensitivity: 0, //设置为0无法旋转
-                zoomSensitivity: 0, //设置为0无法缩放
                 panSensitivity: 0, //设置为0无法平移
-                autoRotate: true, //自动旋转
+                alpha: 25, //角度(这个很重要 调节角度的)
+                distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
             },
+            top: '0',
+            left: '-100',
+            width: '100%',
+            show: false,
+            boxHeight: 20,
         },
         series: series,
     };
     return option;
-};
+}
 
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
@@ -325,32 +355,7 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
         },
     };
 };
-//这是一个自定义计算的方法
+
-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 * 20) / series[0].pieData.value;
-}
 // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
 function bindListen(myChart) {
     let selectedIndex = "";
@@ -505,7 +510,7 @@ onMounted(() => {
     // Vue3中： 需要引入
     var myChart = echarts.init(chart.value)
     //设置交互事件 鼠标移入 点击
-    bindListen(myChart)
+    // bindListen(myChart)
     // init(); // vue3.2没有this
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);