功能
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
}
...
}
以上就是旅客迁徙项目具体流程,改天再把代码放上来。
效果图如下:
代码在这: