From d228d194e6dcbee55db4972dc00561478e35c193 Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Sun, 29 Jan 2023 14:08:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=B7=BB=E5=8A=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |   1 +
 src/views/dashboard/home.vue | 328 +++++++++++++++++------------------
 2 files changed, 161 insertions(+), 168 deletions(-)

diff --git a/package.json b/package.json
index 51d21f4..7e68c00 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "echarts": "^5.4.0",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.12",
+    "highcharts": "^9.2.2",
     "js-cookie": "^3.0.1",
     "postcss-pxtorem": "^6.0.0",
     "screenfull": "^5.2.0",
diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue
index 9d2729f..9f09e99 100644
--- a/src/views/dashboard/home.vue
+++ b/src/views/dashboard/home.vue
@@ -165,7 +165,9 @@
       </div>
     </div>
     <div class="center_bottom">
-      <div class="charts_box"></div>
+      <div class="charts_box map_box">
+        <ShowMap :mapData="mapData"></ShowMap>
+      </div>
       <div class="charts_box">
         <div id="trendChart" class="trend_box"></div>
       </div>
@@ -195,7 +197,7 @@
           </div>
         </div>
         <div class="pie_box" id="pieChart"></div>
-        <!-- <div class="pie_bg"></div> -->
+        <div class="pie_bg"></div>
       </div>
       <div class="right_cen">
         <div class="top_title">
@@ -220,6 +222,16 @@
 </template>
 
 <script>
+import Highcharts from "highcharts/highstock";
+import HighchartsMore from "highcharts/highcharts-more";
+import HighchartsDrilldown from "highcharts/modules/drilldown";
+import Highcharts3D from "highcharts/highcharts-3d";
+import Highmaps from "highcharts/modules/map";
+
+HighchartsMore(Highcharts);
+HighchartsDrilldown(Highcharts);
+Highcharts3D(Highcharts);
+Highmaps(Highcharts);
 import 'echarts-gl'
 import axios from "axios";
 import * as XLSX from "xlsx/xlsx.mjs";
@@ -227,6 +239,7 @@ import Swiper from "swiper";
 import "swiper/css/swiper.min.css";
 import { queryWeath } from "@/api/base";
 import PathMap from "../components/pathMap";
+import ShowMap from "../components/showmap";
 import CarMile from "../components/carMile";
 import CarWarn from "../components/carWarn";
 export default {
@@ -234,6 +247,7 @@ export default {
     PathMap,
     CarMile,
     CarWarn,
+    ShowMap
   },
   data() {
     return {
@@ -542,177 +556,137 @@ export default {
       };
       this.trendCharts.setOption(option);
     },
-
     createPieChart() {
-      this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
-      window.addEventListener("resize", () => {
-        this.pieChart.resize();
-      });
-      var data = [
-        {
-          name: "不满意",
-          value: 30,
-          itemStyle: { color: "#00bfff" },
-          startRatio: 0,
-          endRatio: 0.7,
-        },
-        {
-          name: "非常满意",
-          value: 45,
-          itemStyle: { color: "#48f5c0" },
-          startRatio: 0.7,
-          endRatio: 1,
-        },
-        { name: "满意", value: 6, itemStyle: { color: "#00dced" }, startRatio: 0.7, endRatio: 1 },
-      ];
-      var optionConfig = {};
-
-      const getPie3D = (pieData, internalDiameterRatio) => {
-        //internalDiameterRatio:透明的空心占比
-        let series = [];
-        let sumValue = 0;
-        let startValue = 0;
-        let endValue = 0;
-        let k = 1;
-        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);
+      var each = Highcharts.each,
+        round = Math.round,
+        cos = Math.cos,
+        sin = Math.sin,
+        deg2rad = Math.deg2rad;
+      Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, "translate", function (proceed) {
+        proceed.apply(this, [].slice.call(arguments, 1));
+        // Do not do this if the chart is not 3D
+        if (!this.chart.is3d()) {
+          return;
         }
-
-        // 使用上一次遍历时，计算出的数据和 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 = this.getParametricEquation(
-            series[i].pieData.startRatio,
-            series[i].pieData.endRatio,
-            false,
-            false,
-            k,
-            series[i].pieData.value
-          );
-          
-          startValue = endValue;
+        var series = this,
+          chart = series.chart,
+          options = chart.options,
+          seriesOptions = series.options,
+          depth = seriesOptions.depth || 0,
+          options3d = options.chart.options3d,
+          alpha = options3d.alpha,
+          beta = options3d.beta,
+          z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
+        z += depth / 2;
+        if (seriesOptions.grouping !== false) {
+          z = 0;
         }
-// console.log(getParametricEquation)
-        let boxHeight = this.getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
-        // 准备待返回的配置项，把准备好的 legendData、series 传入。
-        let option = {
-          // backgroundColor: "#203598",
-          labelLine: {
-            show: true,
-            lineStyle: {
-              color: "#404772",
+        each(series.data, function (point) {
+          var shapeArgs = point.shapeArgs,
+            angle;
+          point.shapeType = "arc3d";
+          var ran = point.options.h;
+          shapeArgs.z = z;
+          shapeArgs.depth = depth * 0.75 + ran;
+          shapeArgs.alpha = alpha;
+          shapeArgs.beta = beta;
+          shapeArgs.center = series.center;
+          shapeArgs.ran = ran;
+          angle = (shapeArgs.end + shapeArgs.start) / 2;
+          point.slicedTranslation = {
+            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+          };
+        });
+      });
+      (function (H) {
+        H.wrap(Highcharts.SVGRenderer.prototype, "arc3dPath", function (proceed) {
+          // Run original proceed method
+          var ret = proceed.apply(this, [].slice.call(arguments, 1));
+          ret.zTop = (ret.zOut + 0.5) / 100;
+          return ret;
+        });
+      })(Highcharts);
+      Highcharts.chart('pieChart', {
+       chart: {
+          type: "pie",
+          animation: false,
+          events: {
+            load: function () {
+              var each = Highcharts.each,
+                points = this.series[0].points;
+              each(points, function (p, i) {
+                p.graphic.attr({
+                  translateY: -p.shapeArgs.ran,
+                });
+                p.graphic.side1.attr({
+                  translateY: -p.shapeArgs.ran,
+                });
+                p.graphic.side2.attr({
+                  translateY: -p.shapeArgs.ran,
+                });
+              });
             },
           },
-          label: {
-            show: false,
-            position: "outside",
-            rich: {
-              b: {
-                fontSize: 24,
-                lineHeight: 30,
-                fontWeight: "bold",
-                color: "#fff",
-              },
-              c: {
-                fontSize: 18,
-                color: "#fff",
-              },
-            },
-            formatter: "{b|{b}}\n{c|{c}%}",
+          options3d: {
+            enabled: true,
+            alpha: 70,
+            beta: 0,
           },
-          tooltip: {
-            backgroundColor: "#053A8D",
-            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}%`
-                );
-              }
+          backgroundColor: null,
+          marginTop: -45
+        },
+        colors: ["#00bdff", "#52f4c1", "#00dbec"],
+        title: {
+          text: "",
+        },
+        legend: {
+          enabled: false, // 关闭图例
+        },
+        plotOptions: {
+          pie: {
+            allowPointSelect: true,
+            cursor: "pointer",
+            depth: 35,
+            dataLabels: {
+              enabled: true,
+              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;
+              },
             },
           },
-          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: 20, //角度
-              distance: 250, //调整视角到主体的距离，类似调整zoom
-              rotateSensitivity: 0, //设置为0无法旋转
-              zoomSensitivity: 0, //设置为0无法缩放
-              panSensitivity: 0, //设置为0无法平移
-              autoRotate: false, //自动旋转
-            },
+        },
+        // 去掉右底部的文字
+        credits: {
+          enabled: false,
+        },
+        series: [
+          {
+            type: "pie",
+            name: "派件入库量占比",
+            data: [
+              {
+                name: "应急物资1",
+                y: 10,
+                h: 5,
+              },
+              {
+                name: "应急物资2",
+                y: 20,
+                h: 10,
+              },
+              {
+                name: "应急物资3",
+                y: 30,
+                h: 15,
+              },
+            ],
           },
-          series: series,
-        };
-        return option;
-      };
-
-
-      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-    
-
-      var option = getPie3D(data, 0.8);
-      console.log(option);
-      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
-      this.pieChart.setOption(option);
+        ],
+      });
    },
 
    //获取3d丙图的最高扇区的高度
@@ -1466,7 +1440,7 @@ export default {
         align-items: center;
         justify-content: center;
         font-family: "FZSK";
-        font-size: 0.22erm;
+        font-size: 0.22rem;
         color: #ffffff;
         cursor: pointer;
 
@@ -1500,6 +1474,10 @@ export default {
         height: 100%;
       }
     }
+
+    .map_box{
+      border: solid 0.01rem rgba(93, 165, 255, 0.15);
+    }
   }
   .right_box {
     width: 24%;
@@ -1572,13 +1550,27 @@ export default {
     .right_top {
       width: 100%;
       height: 34%;
+      position: relative;
 
       .pie_box {
         height: 83%;
-        width: 50%;
-        background: url(~@/assets/img/pie_bg.png);
+        width: 100%;
+        // background: url(~@/assets/img/pie_bg.png);
+        // background-size: 100% 100%;
+        // background-position: 0% 10%;
+      }
+
+      .pie_bg{
+        width: 65%;
+        height: 65%;
+        background: url(http://192.168.1.35:8080/img/pie_bg.587a605d.png) no-repeat;
+        position: absolute;
         background-size: 100% 100%;
-        background-position: 0% 10%;
+        background-position-y: 0.7rem;
+        background-position-x: -3px;
+        top: 56%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
 
     }