Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution

package.json

@@ -13,7 +13,7 @@
     "echarts": "^5.4.0",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.12",
-    "highcharts": "^9.2.2",
+    "highcharts": "^9.3.3",
     "js-cookie": "^3.0.1",
     "postcss-pxtorem": "^6.0.0",
     "screenfull": "^5.2.0",

src/views/components/showmap.vue

@@ -8,8 +8,8 @@ import prefecture from "@/assets/json/prefecture.json";
 // import 'echarts/map/js/province/guangdong.js'
 /*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
 export default {
-  props:{
+  props: {
-    mapData:Array
+    mapData: Array
   },
   data() {
     return {
@@ -81,7 +81,7 @@ export default {
         桑园镇: [119.046012, 35.678553], //桑园镇
         阎庄镇: [118.834585, 35.670621], //阎庄镇
         莒县电子商务公共服务中心: [118.901658, 35.60688],
-        店子集镇:[118.914151,35.5844],
+        店子集镇: [118.914151, 35.5844],
         城阳街道: [118.82472, 35.583488], //城阳街道
         峤山镇: [118.946005, 35.657339], //峤山镇
         龙山镇: [119.003747, 35.515955],
@@ -95,8 +95,8 @@ export default {
         夏庄镇: [118.700674, 35.419525],
       },
       datas: [
-        [{ name: "夏庄镇", value:120057.34 }, { name: "莒县电子商务公共服务中心" }],
+        [{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }],
-        [{ name: "库山乡", value: 15477.48  }, { name: "莒县电子商务公共服务中心" }],
+        [{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "安庄镇", value: 6992.6 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "果庄乡", value: 44045.49 }, { name: "莒县电子商务公共服务中心" }],
@@ -113,7 +113,7 @@ export default {
         [{ name: "刘官庄镇", value: 9172.94 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "陵阳镇", value: 3368 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "长岭镇", value: 306.98 }, { name: "莒县电子商务公共服务中心" }],
-        [{ name: "寨里河镇", value:  810.66  }, { name: "莒县电子商务公共服务中心" }],
+        [{ name: "寨里河镇", value: 810.66 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "东莞镇", value: 542.2 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "小店镇", value: 256.38 }, { name: "莒县电子商务公共服务中心" }],
       ],
@@ -145,38 +145,39 @@ export default {
   },
   watch: {},
   mounted() {
-    console.log(this.mapData)
+    // console.log(this.mapData)
-    this.createCharts1();
+    // this.createCharts1();
+    this.render3DMap();
   },
   methods: {
     createCharts1() {
-     var convertData = (data) => {
+      var convertData = (data) => {
-             var res = [];
+        var res = [];
-             for (var i = 0; i < data.length; i++) {
+        for (var i = 0; i < data.length; i++) {
-                 var dataItem = data[i];
+          var dataItem = data[i];
-                 var fromCoord = this.geoCoordMap[dataItem[0].name];
+          var fromCoord = this.geoCoordMap[dataItem[0].name];
-                 var toCoord = this.geoCoordMap[dataItem[1].name];
+          var toCoord = this.geoCoordMap[dataItem[1].name];
-                 if (fromCoord && toCoord) {
+          if (fromCoord && toCoord) {
-                     res.push([
+            res.push([
-                         {
+              {
-                            coord: toCoord,
+                coord: toCoord,
-                            fromName: dataItem[0].name,
+                fromName: dataItem[0].name,
-                            value: dataItem[0].value,
+                value: dataItem[0].value,
-                            // name: dataItem[0].name,
+                // name: dataItem[0].name,
-                            visualMap:false,
+                visualMap: false,
 
-                          },
+              },
-                          {
+              {
-                            coord:fromCoord ,
+                coord: fromCoord,
-                            toName: dataItem[1].name,
+                toName: dataItem[1].name,
-                            visualMap:false,
+                visualMap: false,
 
-                          },
+              },
-                     ]);
+            ]);
-                 }
+          }
-             }
+        }
-             return res;
+        return res;
-         };
+      };
 
       var yMax = 0;
       for (var j = 0; j < this.mapData.length; j++) {
@@ -208,12 +209,12 @@ export default {
               symbolSize: 5, // 图标大小
             },
             lineStyle: {
-            //   normal: {
+              //   normal: {
-                color: color[i],
+              color: color[i],
-                width: 3, // 尾迹线条宽度
+              width: 3, // 尾迹线条宽度
-                opacity: 0.6, // 尾迹线条透明度
+              opacity: 0.6, // 尾迹线条透明度
-                curveness: 0.2, // 尾迹线条曲直度
+              curveness: 0.2, // 尾迹线条曲直度
-            //   },
+              //   },
             },
             data: convertData(item[1]),
           },
@@ -227,7 +228,7 @@ export default {
               brushType: "stroke", // 波纹绘制方式 stroke, fill
               scale: 3, // 波纹圆环最大限制，值越大波纹越大
             },
-             tooltip: {
+            tooltip: {
               trigger: "item",
               formatter(params) {
                 return params.data.name + ':' + params.data.value[2]
@@ -249,19 +250,19 @@ export default {
               },
             },
             symbol: "circle",
-            symbolSize:3,
+            symbolSize: 3,
             // itemStyle: {
             //   normal: {
             //     // show: false,
             //     color: "#000",
             //   },
             // },
-             itemStyle: {
+            itemStyle: {
-                color: "#000"
+              color: "#000"
             },
             data: item[1].map((dataItem) => {
               return {
-                visualMap:false,
+                visualMap: false,
                 name: dataItem[0].name,
                 value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
               };
@@ -388,6 +389,68 @@ export default {
       this.myChart1.setOption(option);
       // this.myCharts1.setOption(option);
     },
+    //3d地图
+    render3DMap() {
+      var color = ['#000'];
+      this.myChart = this.$echarts.init(document.getElementById("chart_map"));
+      this.$echarts.registerMap("莒县", prefecture, {});
+      var seriesData = [];
+      this.datas.map((item, i) => {
+        seriesData.push(
+          {
+            coords: [this.geoCoordMap[item[1].name], this.geoCoordMap[item[0].name]]
+          }
+        );
+      })
+      let option = {
+        geo3D: {
+          map: '莒县',
+          roam: false,
+          top: 0,
+          bottom: 20,
+          boxWidth: 200,
+          itemStyle: {
+            areaColor: 'rgb(5,101,123)',
+            opacity: 1,
+            borderWidth: 0.8,
+            borderColor: 'rgb(62,215,213)'
+          },
+          realisticMaterial: {
+            detailTexture: require("@/assets/images/map_bg.png")
+          },
+        },
+        series: [
+          {
+            type: "lines3D",
+            coordinateSystem: 'geo3D',
+            zlevel: 2,
+            tooltip: {
+              trigger: "item",
+              formatter(params) {
+                // console.log(params);
+              },
+            },
+            effect: {
+              show: true,
+              period: 6, // 箭头指向速度，值越小速度越快
+              trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
+              symbol: "arrow", // 箭头图标
+              symbolSize: 5, // 图标大小
+            },
+            lineStyle: {
+              //   normal: {
+              color: color[0],
+              width: 3, // 尾迹线条宽度
+              opacity: 0.6, // 尾迹线条透明度
+              curveness: 0.2, // 尾迹线条曲直度
+              //   },
+            },
+            data: seriesData,
+          },
+        ]
+      }
+      this.myChart.setOption(option);
+    },
   },
 };
 </script>