完善3D饼图

src/views/dashboard/home.vue

@@ -456,10 +456,16 @@ export default {
       content1[0].map((item) => {
         this.pieData.push({
           name: item.快递名称,
-          value: item.收件量,
-          percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100,
+          y: item.收件量,
+          // percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100,
         });
       });
+      this.pieData = this.pieData.sort(function (a, b) {
+          return b.y - a.y;
+        });
+        this.pieData[0].h = 15
+        this.pieData[1].h = 10
+        this.pieData[2].h = 5
       console.log(this.pieData);
       this.shouData.map((item, index) => {
         if (index <= 10) {
@@ -470,7 +476,7 @@ export default {
       });
       this.$nextTick(() => {
         this.createChart();
-        // this.createCharts();
+        this.createPieChart(this.pieData);
         // this.createCharts1();
         this.run();
         this.run1();
@@ -556,7 +562,7 @@ export default {
       };
       this.trendCharts.setOption(option);
     },
-    createPieChart() {
+    createPieChart(data) {
       var each = Highcharts.each,
         round = Math.round,
         cos = Math.cos,
@@ -648,13 +654,31 @@ export default {
             allowPointSelect: true,
             cursor: "pointer",
             depth: 35,
+            // dataLabels: {
+            //   enabled: true,
+            //   formatter: function (params) {
+            //     console.log(this);
+            //     //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
+            //     return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span>
+            //     <span style="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br />
+            //     <span style="font-size:0.14rem;color:#fff;line-height: 0.12rem;font-family: 'FZSK';">${this.y}</span>`
+            //   },
+            // },
             dataLabels: {
-              enabled: true,
+              enabled: true, //是否显示饼图的线形tip
+              distance: "11%",
+              connectorWidth: 1,
+              style: {
+                // fontSize: 14,
+                // color: "#41A6FC",
+                textOutline: "none", // 去除黑色阴影
+              },
               formatter: function (params) {
                 // console.log(this);
                 //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
-                let str = '<span style="background-image: linear-gradient(to bottom,#fceece,#e39054);-webkit-background-clip: text; -webkit-text-fill-color: transparent;">' + this.key + '</span>' + "<br />" + ((this.y / this.total) * 100).toFixed(2) + "%";
-                return str;
+                return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span>
+                <span style="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br />
+                <span style="font-size:0.14rem;color:#fff;line-height: 0.12rem;font-family: 'FZSK';">${this.y}</span>`;
               },
             },
           },
@@ -667,23 +691,7 @@ export default {
           {
             type: "pie",
             name: "派件入库量占比",
-            data: [
-              {
-                name: "应急物资1",
-                y: 10,
-                h: 5,
-              },
-              {
-                name: "应急物资2",
-                y: 20,
-                h: 10,
-              },
-              {
-                name: "应急物资3",
-                y: 30,
-                h: 15,
-              },
-            ],
+            data:data
           },
         ],
       });
@@ -1555,9 +1563,6 @@ export default {
       .pie_box {
         height: 83%;
         width: 100%;
-        // background: url(~@/assets/img/pie_bg.png);
-        // background-size: 100% 100%;
-        // background-position: 0% 10%;
       }
 
       .pie_bg{
@@ -1566,9 +1571,9 @@ export default {
         background: url(http://192.168.1.35:8080/img/pie_bg.587a605d.png) no-repeat;
         position: absolute;
         background-size: 100% 100%;
-        background-position-y: 0.7rem;
-        background-position-x: -3px;
-        top: 56%;
+        // background-position-y: 0.5rem;
+        // background-position-x: -3px;
+        top: 82%;
         left: 50%;
         transform: translate(-50%, -50%);
       }