Echarts实现省级地图的两种方法（以浙江省为例）

Echarts实现省级地图的两种方法（以浙江省为例）

在echarts调用地图时，我们往往会使用GeoJson格式的数据，根据网上的资料，会发现官网会提供世界、中国以及各省的数据。但是，访问下载最新的echarts组件时，会发现echarts暂不提供地图下载。所以，我们需要自己找GeoJson数据，仔细一点会发现，其实在安装echarts依赖时，已经将数据下载到项目中了。你想要的省级Js、Json文件，node_modules文件下全都有。
echarts下载地址https://echarts.apache.org/zh/download-map.html.

所以，要好好的用echarts提供的数据进行地图数据可视化。

引用js格式的数据

第一步 js数据引用

在main文件中引用

import ‘…/node_modules/echarts/map/js/province/zhejiang.js’;

第二步 主体结构

let mychart = this.$echarts.init(document.getElementById("mychart"));
let option = {
	geo: {
      	map: 'china'
  	}
}
mapChart.setOption(option);

第三步 具体实现

initZheJiang() {
    let that = this;
    this.mychart = this.$echarts.init(document.getElementById("mychart"));
    // 绘制图表
    this.mychart.setOption({
        backgroundColor: "#404a59",
        title: {
          text: "浙江",
          top: 25,
          left: "center",
          textStyle: {
            fontSize: 25,
            fontWeight: 650,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (val) {
            return val.data.name + "<br>人数: " + val.data.value + "人";
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            type: "map",
            map: "浙江",//这里需要注意呀,
            //mapType: "浙江",
            // 是否开启鼠标缩放和平移漫游 默认不开启
            itemStyle: {
              normal: {
                areaColor: "#323c48",
                borderColor: "#111",
              },
              emphasis: {
                areaColor: "#2a333d",
                label: {
                  show: true,
                  color: "white",
                },
              },
            },
            roam: true,
            top: 70,
            label: {
              show: true, // 是否显示对应地名
            },
            data: this.cityDatas,
          },
        ],
      });
      this.mychart.on("click", function (params) {
        console.log(params);
        that.selCity = params.name;
        console.log(this);
        console.log(that);
        for (let i = 0; i < that.cityList.length; i++) {
          if (that.selCity === that.cityList[i].name) {
            that.geoJson = that.cityList[i].cityJson;
            console.log(that.geoJson);
          } else {
            console.log("不符合");
          }
        }
        console.log(that.selCity);
        debugger;
        that.onLoadMap(that.geoJson);
      });
    },

对于mapType/map的值需要说一句

中国、世界地图是英文，省份是中文。比如 ‘china’ ，'浙江’等，若填写’zhejiang’是找不到的。
引用之前可以查看一下js文件啦。一定要引对。

主要看echarts.registerMap(’ ')中注册的名字。

引用json格式的数据

第一步 json数据引用

在main文件中引用

import ‘…/node_modules/echarts/map/json/province/zhejiang.json’;

第二步 主体结构

mapJsonPath = "";//json文件的相对路径
    $.get(mapJsonPath, function (mapJson) {
        echarts.registerMap("浙江", mapJson);// 注册地图
        let option = {
          series: [
            {
              name: this.selCity,
              type: "map",
              mapType: "浙江", // 自定义扩展图表类型
              label: {
                show: true,
              },
            },
          ],
        };
     that.mychart.setOption(option);
     });

同样，我们也可以将地图进行可视化。
那么，我们同样也可以将外部的json数据引入使用。可以从http://datav.aliyun.com/tools/atlas/进行下载需要的json数据。（数据只到区县级）

要想数据到更下一级，则可以访问 http://geojson.io进行手动绘制。

let mapJsonPath = "";
mapJsonPath = "./static/echartsgeoJson/" + geoJson + ".json";
$.get(mapJsonPath, function (mapJson) {
     echarts.registerMap("chosenMap", mapJson);
     let option = {
         series: [
            {
              name: this.selCity,
              type: "map",
              mapType: "chosenMap", // 自定义扩展图表类型
              label: {
                show: true,
              },
            },
          ],
        };
        console.log(that);//问什么此处为that，之前的文章中有写过
        that.mychart.setOption(option);
     }); 

这样对代码进行整理编写，用if语句，减少代码的重复率，可实现地图下钻。会在之后进行更新。