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

@@ -145,8 +145,9 @@ export default {
   },
   watch: {},
   mounted() {
-    console.log(this.mapData)
-    this.createCharts1();
+    // console.log(this.mapData)
+    // this.createCharts1();
+    this.render3DMap();
   },
   methods: {
     createCharts1() {
@@ -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>