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:{
-    mapData:Array
+  props: {
+    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,7 +95,7 @@ export default {
         夏庄镇: [118.700674, 35.419525],
       },
       datas: [
-        [{ name: "夏庄镇", value:120057.34 }, { name: "莒县电子商务公共服务中心" }],
+        [{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }],
         [{ name: "安庄镇", value: 6992.6 }, { name: "莒县电子商务公共服务中心" }],
@@ -145,8 +145,9 @@ export default {
   },
   watch: {},
   mounted() {
-    console.log(this.mapData)
-    this.createCharts1();
+    // console.log(this.mapData)
+    // this.createCharts1();
+    this.render3DMap();
   },
   methods: {
     createCharts1() {
@@ -163,13 +164,13 @@ export default {
                 fromName: dataItem[0].name,
                 value: dataItem[0].value,
                 // name: dataItem[0].name,
-                            visualMap:false,
+                visualMap: false,
 
               },
               {
-                            coord:fromCoord ,
+                coord: fromCoord,
                 toName: dataItem[1].name,
-                            visualMap:false,
+                visualMap: false,
 
               },
             ]);
@@ -249,7 +250,7 @@ export default {
               },
             },
             symbol: "circle",
-            symbolSize:3,
+            symbolSize: 3,
             // itemStyle: {
             //   normal: {
             //     // show: false,
@@ -261,7 +262,7 @@ export default {
             },
             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>