当前位置：首页 > article >正文

echarts中国旅客迁徙地图

article 2025/9/11 12:16:17

功能
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、4option.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}...
}