功能
1、省份根据数据显示不同的颜色。
2、点击省份可以切换地级市。
3、增加迁徙动态图。
JavaWeb端使用Vue整合Echarts
Echarts学习网站
1、想要地图能够随着内容呈现不同的颜色
那么就需要使用series.map配置选项，这个配置项中， 有个geoIndex，这个是选用的geo的索引。当设置了索引后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
然后在option中配置visualMap配置项，就可以通过拖动条，动态显示地图省份。
2、如果想要在以上条件下增加迁徙线条
我们配置了visualMap后，在series的lines配置选项中，配置的lineStyle失效了，不再展示线条。这是因为，visualMap需要配置seriesIndex，这个Index就选择series.map所在的序列，通常是在0索引处。
否则visualMap会应用于所有的series，这样就会把lines的配置项的lineStyle给压掉，地图上就没办法展示出来。
3、点击省份动态展示省份内的地级市
首先需要地级市的所有JS文件，然后在代码中，监听charts的click事件。
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);
});
function showCity(option,pyName,zhName){
$.getScript(context + "/js所在的文件夹/" + pyName + ".js", function (e) {
option.geo.map = zhName;
option.series[0].data = ["name":"广州","value":1938];
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);
});
}
点击省份展示省内地级市功能的精髓在于，能够动态的修改geo.map，动态修改也没用，还要能够动态注册。那么就需要中国以及省份的所有注册文件了。然后通过$.getScript获取文件，同步注册到echarts中。
然后再修改geo.map的值，才能够动态的切换地图。
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
}
...
}
以上旅客迁徙项目具体流程就这样，改天再把代码放上来。