首页地图

package.json

@@ -25,7 +25,7 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "dayjs": "^1.8.28",
-    "echarts": "^5.1.2",
+    "echarts": "4.8.0",
     "element-ui": "^2.15.2",
     "js-cookie": "^2.2.1",
     "jsbarcode": "^3.11.5",

src/views/Home/Map/index.vue

@@ -3,16 +3,15 @@
 </template>
 <script>
 import * as echarts from "echarts"
-import axios from "axios" //采用axios动态请求数据
+import china from "./china.json"
+import allCode from "./allCode.json"
 export default {
   data() {
     return {
       //线上请求JSON文件数据地址
-      publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
+      // publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
       //allCode 区域行政编码信息
-      allCode: [
-        // {name:"廉江市",adcode:"440881"}
-      ],
+      allCode: allCode,
       locate: [
         {
           name: "安徽",
@@ -26,14 +25,8 @@ export default {
     this.initChart() //初始化地图
   },
   methods: {
-    cancel() {
-      this.initChart()
-    },
-    getGeoJson(jsonName) {
-      return axios.get(this.publicUrl + jsonName)
-    },
     initEcharts(geoJson, name, chart) {
-      console.log(geoJson.features, name)
+      // console.log(JSON.stringify(geoJson))
       let self = this
       echarts.registerMap(name, geoJson)
       let option = {
@@ -53,98 +46,94 @@ export default {
           borderColor: "rgba(0,0,0,0.3)",
         },
         geo: {
-          show: false,
+          show: true,
           map: name,
-          width: name == "中国" ? "70%" : "36%", // 约束地图大小
-          top: "4%",
+          roam: true,
+          zoom: 1.5,
+          center: [105, 34.0267395887],
+          label: {
+            emphasis: {
+              show: false,
+            },
+          },
+          itemStyle: {
+            normal: {
+              areaColor: "#EDEFFF",
+              borderColor: "#7597FA",
+              borderWidth: 1,
+            },
+            emphasis: {
+              areaColor: "#4E68FF", //悬浮背景
+            },
+          },
         },
         series: [
+          //小点
           {
-            // 小点，通过geo知道地图位置
-            name: "",
+            //文字和标志
+            name: "light",
             type: "scatter",
             coordinateSystem: "geo",
             data: this.locate,
-            symbolSize: 8,
-            encode: {
-              value: 2,
+            symbolSize: function (val) {
+              return val[2] / 8
             },
-            tooltip: {
-              show: false,
+            label: {
+              normal: {
+                // formatter: "{b}",
+                formatter: "",
+                position: "right",
+                show: true,
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#FFCF4E",
+              },
             },
-            label: {},
-            emphasis: {},
           },
           {
             type: "map",
-            map: name,
-            width: name == "中国" ? "70%" : "30%", // 约束地图大小
-            top: "5%",
-            // roam: true, //是否开启滚轮缩放
-            // zoom: 1.5, //当前视角缩放比，调节这个设置初始大小
-            // center: ["10%", 0],
-            // scaleLimit: {
-            //   min: 0.2,
-            //   max: 2,
-            // }, // 最大最小缩放比例
+            map: "china",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
             label: {
               normal: {
                 show: false,
               },
               emphasis: {
                 show: false,
+                textStyle: {
+                  color: "#fff",
+                },
               },
             },
+            roam: true,
             itemStyle: {
               normal: {
-                areaColor: "#EDEFFF",
-                borderColor: "#7597FA",
-                borderWidth: 1,
+                areaColor: "#031525",
+                borderColor: "#FFFFFF",
               },
               emphasis: {
-                areaColor: "#4E68FF", //悬浮背景
+                areaColor: "#2B91B7",
               },
             },
+            animation: false,
             data: [{ name: "安徽省", value: 50 }],
           },
         ],
       }
       chart.setOption(option, true) //加个true解决下钻的视角偏移
       chart.off("click")
-      chart.on("click", (params) => {
-        //点击区域时的行政编码，然后再进行匹配
-        let clickCode = self.allCode.filter(
-          (areaJson) => areaJson.name === params.name
-        )[0].adcode
-        console.log("行政编码:" + clickCode)
-        //1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
-        //2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
-        //声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
-        self
-          .getGeoJson(clickCode + "_full.json")
-          .then((res) => {
-            self.initEcharts(res.data, params.name, chart)
-          })
-          .catch((err) => {
-            console.log(err, "err")
-            self.getGeoJson("100000_full.json").then((China) => {
-              self.initEcharts(China.data, "中国", chart)
-            })
-          })
-        console.log(params)
-      })
     },
     //带头函数-初始化
     initChart() {
       let chart = echarts.init(this.$refs.areaRankingAll)
-      //this.allCode获取所有的区域编码信息
-      this.getGeoJson("all.json").then((all) => {
-        this.allCode = all.data
-      })
-      //初始化地图展示
-      this.getGeoJson("100000_full.json").then((China) => {
-        this.initEcharts(China.data, "中国", chart)
-      })
+      this.initEcharts(china, "中国", chart)
     },
   },
 }

yarn.lock

@@ -3916,13 +3916,12 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
-  integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
+echarts@4.8.0:
+  version "4.8.0"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
+  integrity sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==
   dependencies:
-    tslib "2.0.3"
-    zrender "5.1.1"
+    zrender "4.3.1"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -10386,11 +10385,6 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
-  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
-
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -11304,12 +11298,10 @@ zip-stream@^2.1.2:
     compress-commons "^2.1.1"
     readable-stream "^3.4.0"
 
-zrender@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
-  integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
-  dependencies:
-    tslib "2.0.3"
+zrender@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-4.3.1.tgz#baf8aa6dc8187a2f819692d7d5f9bedfa2b90fa3"
+  integrity sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ==
 
 zwitch@^1.0.0:
   version "1.0.5"