echarts中国旅客迁徙地图

功能
1、省份根据数据显示不同的颜色。
2、点击省份可以切换地级市。
3、增加迁徙动态图。

Springboot + thymeleaf + Vue + Echarts
Echarts学习网站

1、想要地图能够随着内容呈现不同的颜色

那么就需要使用series.map配置选项，这个配置项中， 有个geoIndex，这个参数是geo的索引。当设置了索引后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

然后在option中配置visualMap配置项，就会出现一个拖动条，可以动态的展示地图上不同的颜色块。
需要注意的是，必须要使用series.map，而不能用Option里面的geo来显示地图。

 //初始化地图之前加上
 let series = [
                    {
                        type: 'map',
                        map: 'china',
                        zoom: 1.2,
                        // top: '30',
                        zlevel: 1,
                        left: 'center',
                        align: 'right',
                        geoIndex: 0,
                        data: _this.areaData
                    }];
//在option中加上
 visualMap: {
     type:"continuous",
     min: 0,
     max: 100000,
     text: ['高', '低'],
     realtime: false,
     calculable: true,
     inRange: {
         color: ['#CFE6FE', '#006edd']
     },
     seriesIndex:0  //为了展示地图上的迁徙线
 },

2、如果想要在以上条件下增加迁徙线条
配置了visualMap后，然后在series中配置了lines，再配置了lineStyle，但是失效了。各种百度，各种查资料，后面再看官网教程才找到了方法。

出现这个问题是因为，配置了visualMap默认是作用于所有的series的，这样子会将地图上除了series.map外的所有的内容都覆盖，但是其实只需要作用于series.map这个选项就好啦。

所以就需要在visualMap中配置seriesIndex，这个Index就选择series.map所在的序列，通常是在0索引处。

3、点击省份动态展示省份内的地级市
首先需要地级市的所有JS文件，然后在代码中，监听charts的click事件。

//放在全局变量中，要是Vue就放在data中就好
let provinceArr =  [
                    ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'],
                    ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
                ];
   //初始化地图的最后一步
    let charts = echarts.init(document.getElementById("map"));
    charts.setOption(option);
    charts.on('click', function (param) {
        // 城市中文名
        let cityName = param.name;
        // 查找是否有对应城市有则加载城市
        for (let i = 0, len = provinceArr[0].length; i < len; i++) {
            if (cityName === _this.provinceArr[0][i]) {
                // 获取得城市拼音
                showCity(option, provinceArr[0][i], provinceArr[1][i]);
                return;
            }
        }
       //没有找到对应城市的话，那么返回到全国地图
       //_this.switchMap("china", option, charts, _this);
   });

点击省份展示省内地级市功能的精髓在于，能够动态的修改geo.map。但是动态修改geo.map也是没用的，还要能够动态注册。那么就需要中国以及省份的所有注册文件了。然后通过$.getScript获取文件，同步注册到echarts中，然后再修改geo.map的值，才能够动态的切换地图。

//随意放哪都好，根据使用前端框架
function showCity(option,pyName,zhName){
 $.getScript(context + "/js所在的文件夹/" + pyName + ".js", function (e) {
          option.geo.map = zhName;
          option.series[0].data = ["name":"广州","value":1938];//为了只展示颜色块，如果还需要有流向图的话，就配置1、2、3、4
          option.series[1].data = [];
          option.series[2].data = [];
          option.series[3].data = [];
          option.series[4].data = [];

          option.toolbox.show = false;
          let cityOption = JSON.parse(JSON.stringify(option));
            let charts = echarts.init(document.getElementById("map"));
                charts.setOption(cityOption);
      });
}

4、添加下载图片功能，自定义一个导出excel的按钮
该功能需要在option中配置一个toolBox工具栏，这个工具栏中有个feature，对就是它了。

有这么多个配置项，第一个就是下载图片的配置，我们只要配置好这个就好。

let option = {
	...
	toolBox:{
		feature:{
			show:true,
			saveAsImage: {
	            show: true,
                title:'保存图片',
                name:"保存图片",
                excludeComponents: ['toolbox'],//导出图片时，排除toolBox工具栏
                pixelRatio: 2
            }
		}
	}
	...
}

配置好后就会在地图上出现几个图标了。

也可以再toolBox中自定义一个按钮，只要配置要给以my开头的属性就好了。

let option = {
	...
	toolBox:{
		myExportExcelTool:{
              show:true,                
           	  icon:"image://icon图片路径，也可以使用path://矢量图路径",
              title:'导出Excel',
              onclick:function(){
					console.log("导出excel");
		}},
		feature:{
			show:true,
			saveAsImage: {
	            show: true,
                title:'保存图片',
                name:"保存图片",
                excludeComponents: ['toolbox'],//导出图片时，排除toolBox工具栏
                pixelRatio: 2
            }
		},
		right: "3%"//toolBox所在的方位，有top\bottom\right\left
	}
	...
}

以上就是旅客迁徙项目具体流程，改天再把代码放上来。

效果图如下：

代码在这：

旅客迁徙需要的两个前端页面+一个Java+地图需要的js