完善3d地图

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "axios": "^1.2.2",
     "core-js": "^3.8.3",
-    "echarts": "^5.4.0",
+    "echarts": "^5.4.1",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.12",
     "highcharts": "^9.3.3",

src/views/components/showmap.vue

@@ -178,7 +178,6 @@ export default {
         }
         return res;
       };
-
       var yMax = 0;
       for (var j = 0; j < this.mapData.length; j++) {
         if (yMax < this.mapData[j].value) {
@@ -391,7 +390,7 @@ export default {
     },
     //3d地图
     render3DMap() {
-      var color = ['#000'];
+      // var color = ['#000'];
       this.myChart = this.$echarts.init(document.getElementById("chart_map"));
       this.$echarts.registerMap("莒县", prefecture, {});
       var seriesData = [];
@@ -402,13 +401,21 @@ export default {
           }
         );
       })
+      console.log(seriesData)
       let option = {
         geo3D: {
+          show:true,
           map: '莒县',
-          roam: false,
-          top: 0,
-          bottom: 20,
-          boxWidth: 200,
+          left: "0%",
+          // environment: '/image/map_bg.png',
+          roam: true,
+          shading:'realistic',
+          zoom: 2,
+          regionHeight: 15,
+          // top: -20,
+          // bottom: 20,
+          // boxWidth: 100,
+          // boxHeight:50,
           itemStyle: {
             areaColor: 'rgb(5,101,123)',
             opacity: 1,
@@ -416,31 +423,46 @@ export default {
             borderColor: 'rgb(62,215,213)'
           },
           realisticMaterial: {
-            detailTexture: require("@/assets/images/map_bg.png")
+            detailTexture: require("@/assets/images/map_bg.png"),
+             roughness:0.8
+          },
+          viewControl: {
+            "projection": "perspective",
+            "autoRotate": false,
+            "distance": 180, // 控制地图版块的大小
+            "alpha": 35, // 地图版块垂直方向的角度
+            "beta": 10, // 地图版块水平方向的角度
+            'rotateSensitivity': 0, // 禁用旋转
+            'panSensitivity': 0, // 禁用平移
+            'zoomSensitivity': 0, // 禁用缩放
           },
         },
+        
         series: [
           {
             type: "lines3D",
             coordinateSystem: 'geo3D',
-            zlevel: 2,
+            zlevel: 1,
             tooltip: {
               trigger: "item",
               formatter(params) {
-                // console.log(params);
+                console.log(params);
               },
             },
+            animation:true,
             effect: {
-              show: true,
-              period: 6, // 箭头指向速度，值越小速度越快
-              trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
-              symbol: "arrow", // 箭头图标
-              symbolSize: 5, // 图标大小
-            },
+                    show: true,
+                    period: 10,
+                    trailLength: 0.1,
+                    trailColor: '#fff',
+                    color: '#fff', //流动点颜色
+                    symbol: 'arrow',
+                    symbolSize: 6
+                },
             lineStyle: {
               //   normal: {
-              color: color[0],
-              width: 3, // 尾迹线条宽度
+              color: "#e3c946",
+              width: 2, // 尾迹线条宽度
               opacity: 0.6, // 尾迹线条透明度
               curveness: 0.2, // 尾迹线条曲直度
               //   },

src/views/dashboard/home.vue

@@ -1568,7 +1568,7 @@ export default {
       .pie_bg{
         width: 65%;
         height: 65%;
-        background: url(http://192.168.1.35:8080/img/pie_bg.587a605d.png) no-repeat;
+        background: url(~@/assets/img/pie_bg.png) no-repeat;
         position: absolute;
         background-size: 100% 100%;
         // background-position-y: 0.5rem;

src/views/dashboard/homepage.vue

@@ -272,7 +272,7 @@ export default {
   },
   created() {
     this.getTime();
-    this.readExcelFile("http://"+location.host+"/excel/wuliu.xlsx");
+    this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
     // this.readExcelFile("/excelapi/ces.xlsx");
     this.$nextTick(() => {
       this.createCharts();