diff --git a/src/assets/images/map.jpg b/src/assets/images/map.jpg
new file mode 100644
index 0000000..88d855c
Binary files /dev/null and b/src/assets/images/map.jpg differ
diff --git a/src/views/components/showmap.vue b/src/views/components/showmap.vue
index cfc1f6a..f7ee790 100644
--- a/src/views/components/showmap.vue
+++ b/src/views/components/showmap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="chart_map" class="map_box"></div>
+  <div  id="chart_map" class="map_box"></div>               
 </template>
 <script>
 import prefecture from "@/assets/json/prefecture.json";
@@ -9,7 +9,9 @@ import prefecture from "@/assets/json/prefecture.json";
 /*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
 export default {
   props: {
-    mapData: Array
+    mapData:{
+      type:Array,
+    }
   },
   data() {
     return {
@@ -143,11 +145,29 @@ export default {
       myChart1: null,
     };
   },
-  watch: {},
   mounted() {
-    // console.log(this.mapData)
     // this.createCharts1();
-    this.render3DMap();
+    
+      this.myChart = this.$echarts.init(document.getElementById("chart_map"));
+      this.$echarts.registerMap("莒县", prefecture, {});
+      this.render3DMap();
+  },
+  created() {
+    this.$nextTick(() =>{
+      console.log(this.$parent.mapData)
+    console.log(JSON.parse(JSON.stringify(this.$parent.mapData)))
+    })
+  }, 
+  watch:{
+    mapData:{
+      handler(newValue,oldValue){
+        console.log(newValue)
+        // if(newValue.length !== 0){
+          // this.render3DMap();
+
+        // }
+      }
+    }
   },
   methods: {
     createCharts1() {
@@ -159,19 +179,28 @@ export default {
           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: toCoord,
+              //   fromName: dataItem[0].name,
+              //   value: dataItem[0].value,
+              //   // name: dataItem[0].name,
+              //   visualMap: false,
 
-              },
+              // },
+              // {
+              //   coord: fromCoord,
+              //   toName: dataItem[1].name,
+              //   visualMap: false,
+
+              // },
               {
-                coord: fromCoord,
-                toName: dataItem[1].name,
-                visualMap: false,
+                  fromName:  dataItem[0].name,
+                  toName: dataItem[1].name,
+                  coords: [
+                      toCoord,
+                      fromCoord,
 
+                  ]
               },
             ]);
           }
@@ -188,8 +217,8 @@ export default {
       var color = ['#000'];
       // 迁入地特殊显示//广东
       [[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
-        console.log(item)
-        console.log(convertData(item[1]));
+        console.log(item[1])
+        console.log(convertData(this.datas));
         series.push(
           {
             type: "lines",
@@ -390,9 +419,32 @@ export default {
     },
     //3d地图
     render3DMap() {
+      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(
+              {
+                  fromName:  dataItem[1].name,
+                  toName: dataItem[0].name,
+                  coords: [
+                      toCoord,
+                      fromCoord,
+
+                  ],
+                visualMap: false,
+              },
+            );
+          }
+        }
+        return res;
+      };
+      console.log(convertData(this.datas))
       // 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(
@@ -402,75 +454,177 @@ export default {
         );
       })
       console.log(seriesData)
+      var yMax = 0;
+      for (var j = 0; j < this.mapData.length; j++) {
+        if (yMax < this.mapData[j].value) {
+          yMax = this.mapData[j].value;
+        }
+      }
+      this.mapData = this.mapData.sort(function (a, b) {
+        return b.value - a.value;
+      });
+      this.mapData.map((item,index) =>{
+        if(index > 2){
+          this.mapData[index].label = {show:false}
+        }
+      })
+      console.log(this.mapData)
+
       let option = {
-        geo3D: {
-          show:true,
-          map: '莒县',
-          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,
-            borderWidth: 0.8,
-            borderColor: 'rgb(62,215,213)'
-          },
-          realisticMaterial: {
-            detailTexture: require("@/assets/images/map_bg.png"),
-             roughness:0.8
+        // backgroundColor: '#000f1e',
+         visualMap: {
+          min: 0,
+          max: yMax,
+          text: ["高", "低"],
+          orient: "horizontal",
+          itemWidth: 15,
+          itemHeight: 200,
+          right: 0,
+          bottom: 5,
+          inRange: {
+            color: ["#1e73dd", "#04296f"],
           },
-          viewControl: {
-            "projection": "perspective",
-            "autoRotate": false,
-            "distance": 180, // 控制地图版块的大小
-            "alpha": 35, // 地图版块垂直方向的角度
-            "beta": 10, // 地图版块水平方向的角度
-            'rotateSensitivity': 0, // 禁用旋转
-            'panSensitivity': 0, // 禁用平移
-            'zoomSensitivity': 0, // 禁用缩放
+          textStyle: {
+            color: "#fff",
           },
         },
-        
+        geo3D: {
+            map: '莒县',
+            show: false,
+            zlevel: -10,
+             top:-30,
+            boxWidth: 200,
+            boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
+            regionHeight: 15,
+            shading: 'lambert',
+            viewControl: {
+                projection: 'perspective',
+                autoRotate: false,
+                damping: 0,
+                rotateSensitivity: 2, //旋转操作的灵敏度
+                rotateMouseButton: 'left', //旋转操作使用的鼠标按键
+                zoomSensitivity: 2, //缩放操作的灵敏度
+                panSensitivity: 2, //平移操作的灵敏度
+                panMouseButton: 'right', //平移操作使用的鼠标按键
+
+                distance: 350, //默认视角距离主体的距离
+                alpha: 40, // 地图版块垂直方向的角度
+                beta: 10, // 地图版块水平方向的角度
+                center: [0, 0, 0],
+
+                animation: true,
+                animationDurationUpdate: 1000,
+                animationEasingUpdate: 'cubicInOut'
+            },
+        },
+
         series: [
-          {
-            type: "lines3D",
-            coordinateSystem: 'geo3D',
-            zlevel: 1,
-            tooltip: {
-              trigger: "item",
-              formatter(params) {
-                console.log(params);
-              },
+            {
+                type: 'map3D',
+                map: '莒县',
+                show: true,
+                zlevel: 1,
+                top:-30,
+                boxWidth: 200,
+                //boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
+                regionHeight: 15,
+                shading: 'lambert',
+                label: { // 标签的相关设置
+                    show: true,
+                    textStyle: {
+                            color: '#fff',// 字体背景色
+                        }
+                },
+
+                itemStyle: {
+                    color: '#025894',
+                    areaColor: '#025894',
+                    opacity: 1,
+                    borderWidth: 1,
+                    borderColor: '#1cccff'
+                },
+                emphasis: {
+                    label: {
+                        show: false,
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 14,
+                            backgroundColor: 'transparent' // 字体背景色
+                        }
+                    },
+                    borderColor: '#333',
+                    borderWidth: 5,
+                    itemStyle: {
+                        color: '#025894',
+                        areaColor: '#025894',
+
+                    }
+                },
+                light: {
+                    main: {
+
+                        shadow: true,
+                        shadowQuality: 'ultra',
+                    },
+
+                },
+
+
+
+                viewControl: {
+                    projection: 'perspective',
+                    autoRotate: false,
+                    damping: 0,
+                    rotateSensitivity: 2, //旋转操作的灵敏度
+                    rotateMouseButton: 'left', //旋转操作使用的鼠标按键
+                    zoomSensitivity: 2, //缩放操作的灵敏度
+                    panSensitivity: 2, //平移操作的灵敏度
+                    panMouseButton: 'right', //平移操作使用的鼠标按键
+
+                    distance: 350, //默认视角距离主体的距离
+                    alpha: 40, // 地图版块垂直方向的角度
+                    beta: 10, // 地图版块水平方向的角度
+                    center: [0, 0, 0],
+
+                    animation: true,
+                    animationDurationUpdate: 1000,
+                    animationEasingUpdate: 'cubicInOut'
+                },
+
+                data:this.mapData
             },
-            animation:true,
-            effect: {
+            // 线 和 点
+            {
+                type: 'lines3D',
+                coordinateSystem: 'geo3D',
+                zlevel: 2, //设置这个才会有轨迹线的小尾巴
+                polyline: false,
+                effect: {
                     show: true,
                     period: 10,
                     trailLength: 0.1,
-                    trailColor: '#fff',
+                    trailColor: '#ffd419',
                     color: '#fff', //流动点颜色
                     symbol: 'arrow',
                     symbolSize: 6
                 },
-            lineStyle: {
-              //   normal: {
-              color: "#e3c946",
-              width: 2, // 尾迹线条宽度
-              opacity: 0.6, // 尾迹线条透明度
-              curveness: 0.2, // 尾迹线条曲直度
-              //   },
+                lineStyle: {
+                    normal: {
+                        color: '#ffd419', //线条颜色
+                        width: 2,
+                        curveness: 0.5,
+                        shadowColor: '#fff',
+                    }
+                },
+                blendMode: 'lighter',
+                data: convertData(this.datas),
+
             },
-            data: seriesData,
-          },
+
+
         ]
-      }
+    };
       this.myChart.setOption(option);
     },
   },
diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue
index d8e4243..9fcacac 100644
--- a/src/views/dashboard/home.vue
+++ b/src/views/dashboard/home.vue
@@ -165,8 +165,9 @@
       </div>
     </div>
     <div class="center_bottom">
-      <div class="charts_box map_box">
-        <ShowMap :mapData="mapData"></ShowMap>
+      <div class="charts_box map-box">
+        <!-- <ShowMap :mapData="mapData"></ShowMap> -->
+      <div  id="chart_map" class="map_box"></div>
       </div>
       <div class="charts_box">
         <div id="trendChart" class="trend_box"></div>
@@ -176,6 +177,7 @@
       <a
         @click="backMap"
         href="javascript:;"
+        class="toback"
         style="
           position: absolute;
           right: 10px;
@@ -232,7 +234,7 @@ HighchartsMore(Highcharts);
 HighchartsDrilldown(Highcharts);
 Highcharts3D(Highcharts);
 Highmaps(Highcharts);
-import 'echarts-gl'
+import "echarts-gl";
 import axios from "axios";
 import * as XLSX from "xlsx/xlsx.mjs";
 import Swiper from "swiper";
@@ -242,12 +244,13 @@ import PathMap from "../components/pathMap";
 import ShowMap from "../components/showmap";
 import CarMile from "../components/carMile";
 import CarWarn from "../components/carWarn";
+import prefecture from "@/assets/json/prefecture.json";
 export default {
   components: {
     PathMap,
     CarMile,
     CarWarn,
-    ShowMap
+    ShowMap,
   },
   data() {
     return {
@@ -258,6 +261,7 @@ export default {
       week: "",
       isFullFlag: false,
       isSupport: false,
+      mapChart:null,
       dayData: [],
       monthData: [],
       totalData: [],
@@ -329,16 +333,16 @@ export default {
         库山乡: [118.979909, 35.92304], //库山乡
         招贤镇: [118.929219, 35.723248], //招贤镇
         桑园镇: [119.046012, 35.678553], //桑园镇
-        阎庄镇: [118.834585, 35.670621], //阎庄镇
+        阎庄街道: [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],
-        陵阳镇: [118.890825, 35.545056],
+        陵阳街道: [118.890825, 35.545056],
         寨里河镇: [118.931584, 35.469982],
-        莒县经济开发区: [118.851312, 35.626514],
-        浮来山镇: [118.744789, 35.596051],
+        经济开发区: [118.851312, 35.626514],
+        浮来山街道: [118.744789, 35.596051],
         刘官庄镇: [118.801123, 35.522202],
         长岭镇: [118.844125, 35.484677],
         小店镇: [118.81007, 35.422484],
@@ -350,15 +354,14 @@ export default {
     this.getTime();
   },
   mounted() {
-    this.readExcelFile("http://"+location.host+"/excel/wuliu.xlsx");
+    this.readExcelFile("http://" + location.host + "/excel/wuliu.xlsx");
     queryWeath().then((res) => {
       this.temp = res.result.now.temp;
       this.weather = res.result.now.text;
     });
-  this.$nextTick(() =>{
-    this.createPieChart()
-
-  })
+    this.$nextTick(() => {
+      this.createPieChart();
+    });
   },
   methods: {
     backMap() {
@@ -374,17 +377,12 @@ export default {
           responseType: "arraybuffer",
         })
         .then((res) => {
-          // console.log(res);
           let data = new Uint8Array(res);
-          //   console.log(data);
           let wb = XLSX.read(data, {
             type: "array",
           });
-          //   console.log(wb);
           let sheets = wb.Sheets; // 获取文档数据
-          // console.log(sheets);
           this.content = this.transformSheets(sheets);
-          // this.$message('读取成功');
         })
         .catch((err) => {
           this.$message.error(err);
@@ -395,7 +393,6 @@ export default {
       for (const key in sheets) {
         content1.push(XLSX.utils.sheet_to_json(sheets[key]));
       }
-      console.log(content1);
       this.dayData.push(
         { name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 },
         { name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 },
@@ -461,12 +458,11 @@ export default {
         });
       });
       this.pieData = this.pieData.sort(function (a, b) {
-          return b.y - a.y;
-        });
-        this.pieData[0].h = 15
-        this.pieData[1].h = 10
-        this.pieData[2].h = 5
-      console.log(this.pieData);
+        return b.y - a.y;
+      });
+      this.pieData[0].h = 15;
+      this.pieData[1].h = 10;
+      this.pieData[2].h = 5;
       this.shouData.map((item, index) => {
         if (index <= 10) {
           this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
@@ -477,12 +473,211 @@ export default {
       this.$nextTick(() => {
         this.createChart();
         this.createPieChart(this.pieData);
-        // this.createCharts1();
+        this.render3DMap()
         this.run();
         this.run1();
       });
     },
 
+     render3DMap() {
+      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(
+              {
+                  fromName:  dataItem[1].name,
+                  toName: dataItem[0].name,
+                  coords: [
+                      toCoord,
+                      fromCoord,
+
+                  ],
+                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;
+        }
+      }
+      this.mapData = this.mapData.sort(function (a, b) {
+        return b.value - a.value;
+      });
+      this.mapData.map((item,index) =>{
+        if(index > 2){
+          this.mapData[index].label = {show:false}
+        }
+      })
+      this.mapChart = this.$echarts.init(document.getElementById("chart_map"));
+      this.$echarts.registerMap("莒县", prefecture, {});
+
+      let option = {
+        // backgroundColor: '#000f1e',
+         visualMap: {
+          min: 0,
+          max: yMax,
+          text: ["高", "低"],
+          orient: "horizontal",
+          itemWidth: 15,
+          itemHeight: 200,
+          right: 0,
+          bottom: 5,
+          inRange: {
+            color: ["#1e73dd", "#04296f"],
+          },
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        geo3D: {
+            map: '莒县',
+            show: false,
+            zlevel: -10,
+             top:-30,
+            boxWidth: 200,
+            boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
+            regionHeight: 15,
+            shading: 'lambert',
+            viewControl: {
+                projection: 'perspective',
+                autoRotate: false,
+                damping: 0,
+                rotateSensitivity: 2, //旋转操作的灵敏度
+                rotateMouseButton: 'left', //旋转操作使用的鼠标按键
+                zoomSensitivity: 2, //缩放操作的灵敏度
+                panSensitivity: 2, //平移操作的灵敏度
+                panMouseButton: 'right', //平移操作使用的鼠标按键
+
+                distance: 350, //默认视角距离主体的距离
+                alpha: 40, // 地图版块垂直方向的角度
+                beta: 10, // 地图版块水平方向的角度
+                center: [0, 0, 0],
+
+                animation: true,
+                animationDurationUpdate: 1000,
+                animationEasingUpdate: 'cubicInOut'
+            },
+        },
+
+        series: [
+            {
+                type: 'map3D',
+                map: '莒县',
+                show: true,
+                zlevel: 1,
+                top:-30,
+                boxWidth: 200,
+                //boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
+                regionHeight: 15,
+                shading: 'lambert',
+                label: { // 标签的相关设置
+                    show: true,
+                    textStyle: {
+                            color: '#fff',// 字体背景色
+                        }
+                },
+
+                itemStyle: {
+                    color: '#025894',
+                    areaColor: '#025894',
+                    opacity: 1,
+                    borderWidth: 1,
+                    borderColor: '#1cccff'
+                },
+                emphasis: {
+                    label: {
+                        show: false,
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 14,
+                            backgroundColor: 'transparent' // 字体背景色
+                        }
+                    },
+                    borderColor: '#333',
+                    borderWidth: 5,
+                    itemStyle: {
+                        color: '#025894',
+                        areaColor: '#025894',
+
+                    }
+                },
+                light: {
+                    main: {
+
+                        shadow: true,
+                        shadowQuality: 'ultra',
+                    },
+
+                },
+
+
+
+                viewControl: {
+                    projection: 'perspective',
+                    autoRotate: false,
+                    damping: 0,
+                    rotateSensitivity: 2, //旋转操作的灵敏度
+                    rotateMouseButton: 'left', //旋转操作使用的鼠标按键
+                    zoomSensitivity: 2, //缩放操作的灵敏度
+                    panSensitivity: 2, //平移操作的灵敏度
+                    panMouseButton: 'right', //平移操作使用的鼠标按键
+
+                    distance: 350, //默认视角距离主体的距离
+                    alpha: 40, // 地图版块垂直方向的角度
+                    beta: 10, // 地图版块水平方向的角度
+                    center: [0, 0, 0],
+
+                    animation: true,
+                    animationDurationUpdate: 1000,
+                    animationEasingUpdate: 'cubicInOut'
+                },
+
+                data:this.mapData
+            },
+            // 线 和 点
+            {
+                type: 'lines3D',
+                coordinateSystem: 'geo3D',
+                zlevel: 2, //设置这个才会有轨迹线的小尾巴
+                polyline: false,
+                effect: {
+                    show: true,
+                    period: 10,
+                    trailLength: 0.1,
+                    trailColor: '#ffd419',
+                    color: '#fff', //流动点颜色
+                    symbol: 'arrow',
+                    symbolSize: 6
+                },
+                lineStyle: {
+                    normal: {
+                        color: '#ffd419', //线条颜色
+                        width: 2,
+                        curveness: 0.5,
+                        shadowColor: '#fff',
+                    }
+                },
+                blendMode: 'lighter',
+                data: convertData(this.datas),
+
+            },
+
+
+        ]
+    };
+      this.mapChart.setOption(option);
+    },
+
     createChart() {
       this.trendCharts = this.$echarts.init(document.getElementById("trendChart"));
       window.addEventListener("resize", () => {
@@ -613,8 +808,8 @@ export default {
           return ret;
         });
       })(Highcharts);
-      Highcharts.chart('pieChart', {
-       chart: {
+      Highcharts.chart("pieChart", {
+        chart: {
           type: "pie",
           animation: false,
           events: {
@@ -640,7 +835,7 @@ export default {
             beta: 0,
           },
           backgroundColor: null,
-          marginTop: -45
+          marginTop: -45,
         },
         colors: ["#00bdff", "#52f4c1", "#00dbec"],
         title: {
@@ -657,7 +852,6 @@ export default {
             // dataLabels: {
             //   enabled: true,
             //   formatter: function (params) {
-            //     console.log(this);
             //     //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
             //     return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span>
             //     <span style="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br />
@@ -674,11 +868,17 @@ export default {
                 textOutline: "none", // 去除黑色阴影
               },
               formatter: function (params) {
-                // console.log(this);
                 //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
-                return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span>
-                <span style="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br />
-                <span style="font-size:0.14rem;color:#fff;line-height: 0.12rem;font-family: 'FZSK';">${this.y}</span>`;
+                return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${
+                  this.key
+                }:</span>
+                <span style="color:#e39054;font-size:0.14rem;">${(
+                  (this.y / this.total) *
+                  100
+                ).toFixed(2)}%</span><br />
+                <span style="font-size:0.14rem;color:#fff;line-height: 0.12rem;font-family: 'FZSK';">${
+                  this.y
+                }</span>`;
               },
             },
           },
@@ -691,78 +891,78 @@ export default {
           {
             type: "pie",
             name: "派件入库量占比",
-            data:data
+            data: data,
           },
         ],
       });
-   },
+    },
 
-   //获取3d丙图的最高扇区的高度
-      getHeight3D(series, height){
-        series.sort((a, b) => {
-          return b.pieData.value - a.pieData.value;
-        });
-        return (height * 25) / series[0].pieData.value;
-      },
+    //获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value;
+      });
+      return (height * 25) / series[0].pieData.value;
+    },
 
-      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-        // 计算
-        let midRatio = (startRatio + endRatio) / 2;
-        let startRadian = startRatio * Math.PI * 2;
-        let endRadian = endRatio * Math.PI * 2;
-        let midRadian = midRatio * Math.PI * 2;
-        // 如果只有一个扇形，则不实现选中效果。
-        if (startRatio === 0 && endRatio === 1) {
-          isSelected = true;
-        }
-        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-        k = typeof k !== "undefined" ? k : 1 / 3;
-        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-        // 计算高亮效果的放大比例（未高亮，则比例为 1）
-        let hoverRate = isHovered ? 1.05 : 1;
-        // 返回曲面参数方程
-        return {
-          u: {
-            min: -Math.PI,
-            max: Math.PI * 3,
-            step: Math.PI / 32,
-          },
-          v: {
-            min: 0,
-            max: Math.PI * 2,
-            step: Math.PI / 20,
-          },
-          x: (u, v) => {
-            if (u < startRadian) {
-              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-          },
-          y: (u, v)=> {
-            if (u < startRadian) {
-              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-          },
-          z:  (u, v)=> {
-            if (u < -Math.PI * 0.5) {
-              return Math.sin(u);
-            }
-            if (u > Math.PI * 2.5) {
-              return Math.sin(u) * h * 0.1;
-            }
-            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-          },
-        };
-      },
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2;
+      let startRadian = startRatio * Math.PI * 2;
+      let endRadian = endRatio * Math.PI * 2;
+      let midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = true;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== "undefined" ? k : 1 / 3;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: (u, v) => {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: (u, v) => {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: (u, v) => {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
     // 按照日月更换数据
     changeData(val) {
       this.active = val;
@@ -853,7 +1053,6 @@ export default {
       //   this.isSlide = true;
       // }
       this.$nextTick(() => {
-        //   console.log(this.slideList)
         this.mySwiper.destroy();
 
         this.run();
@@ -1469,9 +1668,10 @@ export default {
     height: 25%;
     position: absolute;
     left: 28%;
-    bottom: 2%;
+    top: 71%;
     z-index: 11;
     display: flex;
+    justify-content: space-around;
 
     .charts_box {
       width: 50%;
@@ -1481,10 +1681,18 @@ export default {
         width: 100%;
         height: 100%;
       }
+
+      .map_box{
+        width: 100%;
+        height: 100%;
+      }
     }
 
-    .map_box{
+    .map-box {
+      width: 48%;
+      height: 98%;
       border: solid 0.01rem rgba(93, 165, 255, 0.15);
+      box-shadow: -5px 5px 3px 1px rgba(0, 0, 0, 0.4);
     }
   }
   .right_box {
@@ -1563,9 +1771,10 @@ export default {
       .pie_box {
         height: 83%;
         width: 100%;
+        // background: url(~@/assets/img/pie_bg.png) no-repeat;
       }
 
-      .pie_bg{
+      .pie_bg {
         width: 65%;
         height: 65%;
         background: url(~@/assets/img/pie_bg.png) no-repeat;
@@ -1573,11 +1782,10 @@ export default {
         background-size: 100% 100%;
         // background-position-y: 0.5rem;
         // background-position-x: -3px;
-        top: 82%;
+        top: 2.2rem;
         left: 50%;
         transform: translate(-50%, -50%);
       }
-
     }
 
     .right_cen {
@@ -1595,7 +1803,25 @@ export default {
     left: 5.2rem;
     top: 28%;
     width: 8.82rem;
-    height: 4.2rem;
+    // height: 4.2rem;
+    height: 42%;
+
+    .toback {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      display: inline-block;
+      width: 0.8rem;
+      color: #ffffff;
+      font-size: 0.14rem;
+      font-style: italic;
+      line-height: 0.2rem;
+      text-align: center;
+      border-radius: 0.1rem 0.08rem 0.1rem 0.08rem;
+      text-decoration: none;
+      background-color: #16da85;
+      z-index: 99;
+    }
   }
 }
 </style>