地图添加组件

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",

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"));
+      var each = Highcharts.each,
-      window.addEventListener("resize", () => {
+        round = Math.round,
-        this.pieChart.resize();
+        cos = Math.cos,
-      });
+        sin = Math.sin,
-      var data = [
+        deg2rad = Math.deg2rad;
-        {
+      Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, "translate", function (proceed) {
-          name: "不满意",
+        proceed.apply(this, [].slice.call(arguments, 1));
-          value: 30,
+        // Do not do this if the chart is not 3D
-          itemStyle: { color: "#00bfff" },
+        if (!this.chart.is3d()) {
-          startRatio: 0,
+          return;
-          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 series = this,
-        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          chart = series.chart,
-        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          options = chart.options,
-
+          seriesOptions = series.options,
-        for (let i = 0; i < series.length; i++) {
+          depth = seriesOptions.depth || 0,
-          endValue = startValue + series[i].pieData.value;
+          options3d = options.chart.options3d,
-          series[i].pieData.startRatio = startValue / sumValue;
+          alpha = options3d.alpha,
-          series[i].pieData.endRatio = endValue / sumValue;
+          beta = options3d.beta,
-          series[i].parametricEquation = this.getParametricEquation(
+          z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
-            series[i].pieData.startRatio,
+        z += depth / 2;
-            series[i].pieData.endRatio,
+        if (seriesOptions.grouping !== false) {
-            false,
+          z = 0;
-            false,
-            k,
-            series[i].pieData.value
-          );
-          
-          startValue = endValue;
         }
-// console.log(getParametricEquation)
+        each(series.data, function (point) {
-        let boxHeight = this.getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
+          var shapeArgs = point.shapeArgs,
-        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            angle;
-        let option = {
+          point.shapeType = "arc3d";
-          // backgroundColor: "#203598",
+          var ran = point.options.h;
-          labelLine: {
+          shapeArgs.z = z;
-            show: true,
+          shapeArgs.depth = depth * 0.75 + ran;
-            lineStyle: {
+          shapeArgs.alpha = alpha;
-              color: "#404772",
+          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: {
+          options3d: {
-            show: false,
+            enabled: true,
-            position: "outside",
+            alpha: 70,
-            rich: {
+            beta: 0,
-              b: {
-                fontSize: 24,
-                lineHeight: 30,
-                fontWeight: "bold",
-                color: "#fff",
-              },
-              c: {
-                fontSize: 18,
-                color: "#fff",
-              },
-            },
-            formatter: "{b|{b}}\n{c|{c}%}",
           },
-          tooltip: {
+          backgroundColor: null,
-            backgroundColor: "#053A8D",
+          marginTop: -45
-            formatter: (params) => {
+        },
-              if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") {
+        colors: ["#00bdff", "#52f4c1", "#00dbec"],
-                let bfb = (
+        title: {
-                  (option.series[params.seriesIndex].pieData.endRatio -
+          text: "",
-                    option.series[params.seriesIndex].pieData.startRatio) *
+        },
-                  100
+        legend: {
-                ).toFixed(2);
+          enabled: false, // 关闭图例
-                return (
+        },
-                  `${params.seriesName}<br/>` +
+        plotOptions: {
-                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+          pie: {
-                  `${bfb}%`
+            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,
+        credits: {
-          },
+          enabled: false,
-          yAxis3D: {
+        },
-            min: -1,
+        series: [
-            max: 1,
+          {
-          },
+            type: "pie",
-          zAxis3D: {
+            name: "派件入库量占比",
-            min: -1,
+            data: [
-            max: 1,
+              {
-          },
+                name: "应急物资1",
-          grid3D: {
+                y: 10,
-            show: false,
+                h: 5,
-            boxHeight: boxHeight, //圆环的高度
+              },
-            left: 0,
+              {
-            top: 0, //3d饼图的位置
+                name: "应急物资2",
-            viewControl: {
+                y: 20,
-              //3d效果可以放大、旋转等，请自己去查看官方配置
+                h: 10,
-              alpha: 20, //角度
+              },
-              distance: 250, //调整视角到主体的距离，类似调整zoom
+              {
-              rotateSensitivity: 0, //设置为0无法旋转
+                name: "应急物资3",
-              zoomSensitivity: 0, //设置为0无法缩放
+                y: 30,
-              panSensitivity: 0, //设置为0无法平移
+                h: 15,
-              autoRotate: false, //自动旋转
+              },
-            },
+            ],
           },
-          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%;
+        width: 100%;
-        background: url(~@/assets/img/pie_bg.png);
+        // 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%);
       }
 
     }