diff --git a/src/views/components/showmap.vue b/src/views/components/showmap.vue
index db7cf1d..45fc687 100644
--- a/src/views/components/showmap.vue
+++ b/src/views/components/showmap.vue
@@ -8,6 +8,9 @@ import prefecture from "@/assets/json/prefecture.json";
 // import 'echarts/map/js/province/guangdong.js'
 /*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
 export default {
+  props:{
+    mapData:Array
+  },
   data() {
     return {
       //下面是经纬度，用哪个地方的就填哪个地方的就可以
@@ -142,33 +145,11 @@ export default {
   },
   watch: {},
   mounted() {
+    console.log(this.mapData)
     this.createCharts1();
   },
   methods: {
     createCharts1() {
-    //   const convertData = (data) => {
-    //     const res = [];
-    //     for (let i = 0; i < data.length; i++) {
-    //       const dataItem = data[i];
-    //       const fromCoord = this.geoCoordMap[dataItem[1].name]; // 迁出点
-    //       const toCoord = this.geoCoordMap[dataItem[0].name]; // 迁入点
-    //       if (fromCoord && toCoord) {
-    //         // console.log(dataItem)
-    //         res.push([
-    //           {
-    //             coord: fromCoord,
-    //             value: dataItem[0].value,
-    //             name: dataItem[0].name,
-    //           },
-    //           {
-    //             coord: toCoord,
-    //           },
-    //         ]);
-    //       }
-    //     }
-
-    //     return res;
-    //   };
      var convertData = (data) => {
              var res = [];
              for (var i = 0; i < data.length; i++) {
@@ -198,9 +179,9 @@ export default {
          };
 
       var yMax = 0;
-      for (var j = 0; j < this.chardata1.length; j++) {
-        if (yMax < this.chardata1[j].value) {
-          yMax = this.chardata1[j].value;
+      for (var j = 0; j < this.mapData.length; j++) {
+        if (yMax < this.mapData[j].value) {
+          yMax = this.mapData[j].value;
         }
       }
       const series = [];
@@ -317,7 +298,7 @@ export default {
                 },
               },
             },
-            data: this.chardata1,
+            data: this.mapData,
           }
         );
       });
@@ -331,9 +312,9 @@ export default {
         // this.myCharts1.resize();
       });
       var yMax = 0;
-      for (var j = 0; j < this.chardata1.length; j++) {
-        if (yMax < this.chardata1[j].value) {
-          yMax = this.chardata1[j].value;
+      for (var j = 0; j < this.mapData.length; j++) {
+        if (yMax < this.mapData[j].value) {
+          yMax = this.mapData[j].value;
         }
       }
       this.myChart1.hideLoading();
diff --git a/src/views/dashboard/homepage.vue b/src/views/dashboard/homepage.vue
index aded199..3599bb4 100644
--- a/src/views/dashboard/homepage.vue
+++ b/src/views/dashboard/homepage.vue
@@ -102,7 +102,8 @@
       </div>
       <div class="cen_bot">
         <div class="echarts">
-          <ShowMap></ShowMap>
+          <!-- <ShowMap :mapData="mapData" :data1="datas"></ShowMap> -->
+          <div class="map_box" id="chart_map"></div>
         </div>
         <div class="echarts">
           <div id="trendChart" class="trend_box"></div>
@@ -129,7 +130,6 @@
             </div>
           </div>
         </div>
-        
       </div>
       <div class="right_center">
         <div class="title_box">
@@ -148,6 +148,7 @@
 </template>
 
 <script>
+import prefecture from "@/assets/json/prefecture.json";
 import Swiper from "swiper";
 import axios from "axios";
 import * as XLSX from "xlsx/xlsx.mjs";
@@ -233,11 +234,37 @@ export default {
         "#00b2cd",
         "#ec3c3c",
       ],
+      mapData:[],
+      datas:[],
+      geoCoordMap: {
+        棋山镇: [118.895378, 35.877537],
+        东莞镇: [118.972146, 35.991826],
+        安庄镇: [118.815076, 35.812024],
+        果庄乡: [118.769212, 35.77904], //果庄乡
+        洛河镇: [118.833803, 35.753576], //洛河镇
+        库山乡: [118.979909, 35.92304], //库山乡
+        招贤镇: [118.929219, 35.723248], //招贤镇
+        桑园镇: [119.046012, 35.678553], //桑园镇
+        阎庄镇: [118.834585, 35.670621], //阎庄镇
+        莒县电子商务公共服务中心: [118.901658, 35.60688],
+        店子集镇:[118.914151,35.5844],
+        城阳街道: [118.82472, 35.583488], //城阳街道
+        峤山镇: [118.946005, 35.657339], //峤山镇
+        龙山镇: [119.003747, 35.515955],
+        陵阳镇: [118.890825, 35.545056],
+        寨里河镇: [118.931584, 35.469982],
+        莒县经济开发区: [118.851312, 35.626514],
+        浮来山镇: [118.744789, 35.596051],
+        刘官庄镇: [118.801123, 35.522202],
+        长岭镇: [118.844125, 35.484677],
+        小店镇: [118.81007, 35.422484],
+        夏庄镇: [118.700674, 35.419525],
+      },
     };
   },
   created() {
     this.getTime();
-    this.readExcelFile("http://192.168.1.36:8080/excel/wuliu.xlsx");
+    this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
     this.$nextTick(() =>{
       this.createCharts()
     })
@@ -501,6 +528,8 @@ export default {
         this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
       });
       content1[2].map((item, index) => {
+        this.mapData.push({name:item.名称,value:item.收件量})
+        this.datas.push([{ name: item.名称, value:item.收件量 }, { name: "莒县电子商务公共服务中心" }])
         this.shouData.push({ name: item.名称, count: item.收件量 });
         this.shouData = this.shouData.sort(function (a, b) {
           return b.count - a.count;
@@ -535,7 +564,8 @@ export default {
       });
       this.$nextTick(() => {
         this.createChart();
-        this.createCharts()
+        this.createCharts();
+        this.createCharts1()
         this.run();
       });
     },
@@ -561,16 +591,6 @@ export default {
           this.isFullFlag = true;
         }
       }
-      // console.log(this.isFullFlag);
-      // this.isFullFlag =!this.isFullFlag
-      // if (!screenfull.enabled) {
-      // 	this.$message({
-      // 		 message: 'Your browser does not work',
-      // 		 type: 'warning'
-      // 	})
-      // 	return false
-      // }
-      // screenfull.toggle()
     },
 
     createChart() {
@@ -586,12 +606,15 @@ export default {
             fontSize: 15,
             color: "#fff",
           },
+          top:12
         },
         legend: {
           data: ["到件量", "派件量"],
           textStyle: {
             color: "#fff",
           },
+          top:12,
+          right:10
         },
         tooltip: {
           trigger: "axis",
@@ -600,6 +623,7 @@ export default {
           left: "3%",
           right: "4%",
           bottom: "3%",
+          top:"18%",
           containLabel: true,
         },
         xAxis: {
@@ -636,6 +660,247 @@ export default {
       };
       this.trendChart.setOption(option);
     },
+    createCharts1() {
+     var convertData = (data) => {
+             var res = [];
+             for (var i = 0; i < data.length; i++) {
+                 var dataItem = data[i];
+                 var fromCoord = this.geoCoordMap[dataItem[0].name];
+                 var toCoord = this.geoCoordMap[dataItem[1].name];
+                 if (fromCoord && toCoord) {
+                     res.push([
+                         {
+                            coord: toCoord,
+                            fromName: dataItem[0].name,
+                            value: dataItem[0].value,
+                            // name: dataItem[0].name,
+                            visualMap:false,
+
+                          },
+                          {
+                            coord:fromCoord ,
+                            toName: dataItem[1].name,
+                            visualMap:false,
+
+                          },
+                     ]);
+                 }
+             }
+             return res;
+         };
+
+      var yMax = 0;
+      for (var j = 0; j < this.mapData.length; j++) {
+        if (yMax < this.mapData[j].value) {
+          yMax = this.mapData[j].value;
+        }
+      }
+      const series = [];
+      var color = ['#000'];
+      // 迁入地特殊显示//广东
+      [[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
+        console.log(item)
+        console.log(convertData(item[1]));
+        series.push(
+          {
+            type: "lines",
+            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[i],
+                width: 3, // 尾迹线条宽度
+                opacity: 0.6, // 尾迹线条透明度
+                curveness: 0.2, // 尾迹线条曲直度
+            //   },
+            },
+            data: convertData(item[1]),
+          },
+          {
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            zlevel: 2,
+            rippleEffect: {
+              // 涟漪特效
+              period: 4, // 动画时间，值越小速度越快
+              brushType: "stroke", // 波纹绘制方式 stroke, fill
+              scale: 3, // 波纹圆环最大限制，值越大波纹越大
+            },
+             tooltip: {
+              trigger: "item",
+              formatter(params) {
+                return params.data.name + ':' + params.data.value[2]
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: "right", // 显示位置
+                offset: [5, 0], // 偏移设置
+                formatter(params) {
+                  // 圆环显示文字
+                  return '';
+                },
+                fontSize: 13,
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            symbol: "circle",
+            symbolSize:3,
+            // itemStyle: {
+            //   normal: {
+            //     // show: false,
+            //     color: "#000",
+            //   },
+            // },
+             itemStyle: {
+                color: "#000"
+            },
+            data: item[1].map((dataItem) => {
+              return {
+                visualMap:false,
+                name: dataItem[0].name,
+                // value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
+              };
+            }),
+          },
+          {
+            name: "数据名称",
+            type: "map",
+            zlevel: 0,
+            mapType: "莒县",
+            selectedMode: "multiple",
+            tooltip: {
+              trigger: "item",
+              formatter: "{b}<br/>{c} (件)",
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                borderColor: "#0e94eb",
+                label: {
+                  show: false,
+                },
+              },
+              emphasis: {
+                // 也是选中样式
+                borderWidth: 1,
+                borderColor: "#fff",
+                backgroundColor: "red",
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#fff",
+                  },
+                },
+              },
+            },
+            data: this.mapData,
+          }
+        );
+      });
+      console.log(series);
+      this.myChart1 = this.$echarts.init(document.getElementById("chart_map"));
+      // this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps'));
+      // this.$echarts.registerMap("china1", china1, {});
+      this.$echarts.registerMap("莒县", prefecture, {});
+      window.addEventListener("resize", function () {
+        this.myChart1.resize();
+        // this.myCharts1.resize();
+      });
+      var yMax = 0;
+      for (var j = 0; j < this.mapData.length; j++) {
+        if (yMax < this.mapData[j].value) {
+          yMax = this.mapData[j].value;
+        }
+      }
+      this.myChart1.hideLoading();
+      // this.myCharts1.hideLoading();
+      var option = {
+        animation: true,
+        tooltip: {
+          show: true,
+        },
+        visualMap: {
+          min: 0,
+          max: yMax,
+          text: ["高", "低"],
+          orient: "horizontal",
+          itemWidth: 15,
+          itemHeight: 200,
+          right: 0,
+          bottom: 30,
+          inRange: {
+            color: ["#75ddff", "#0e94eb"],
+          },
+          textStyle: {
+            color: "#fff",
+          },
+          bottom:"2%",
+          itemWidth: 10,
+        },
+        geo: {
+          map: "莒县",
+          //   zoom: 1.2,
+          label: {
+            emphasis: {
+              show: false,
+            },
+          },
+          roam: true, // 是否允许缩放
+          itemStyle: {
+            normal: {
+              borderColor: "rgba(147, 235, 248, 1)",
+              borderWidth: 1,
+              areaColor: {
+                type: "radial",
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(175,238,238, 0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(47,79,79, .1)", // 100% 处的颜色
+                  },
+                ],
+                globalCoord: false, // 缺省为 false
+              },
+              shadowColor: "rgba(128, 217, 248, 1)",
+              // shadowColor: 'rgba(255, 255, 255, 1)',
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 10,
+            },
+            emphasis: {
+              areaColor: "#389BB7",
+              borderWidth: 0,
+            },
+          },
+        },
+        series,
+      };
+
+      this.myChart1.setOption(option);
+      // this.myCharts1.setOption(option);
+    },
 
     fn(str) {
       let num = null;
@@ -967,7 +1232,7 @@ export default {
 
         .data_box {
           width: 20%;
-          height: 100%;
+          height: 90%;
           // background: green;
           display: flex;
           flex-direction: column;
@@ -996,6 +1261,10 @@ export default {
       .echarts {
         width: 50%;
         height: 100%;
+        .map_box{
+          width:100%;
+          height: 100%;
+        }
         .trend_box {
           width: 100%;
           height: 100%;