很多时候我们需要通过地图进行数据的直观展示，并且展示下级省份、地市、区县的数据，这时我们就需要对地图进行下钻；（由于最近的项目使用的是贵州地图，所以文章中用贵州省进行演示！）
首先我们要实现功能点有以下几点（如下图）：
- 地图下钻功能；
- 鼠标经过显示地图上数据,且默认能自动轮播各地区的数据；
- 在地图上根据数据进行气泡标识；
实现思路
大概思路：1.先从后台请求会在地图上展示的数据；2.进行地图绘制，在地图绘制过程中我们就可以将下钻、气泡、数据轮播功能依次实现。具体操作如下：
一：下载地图JSON文件
首先下载贵州省及下级地市地图json文件；下载地址：http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5；
将下载的json文件放入资源目录中，以行政区划代码进行命名；
二、进行数据请求
//默认进入页面首先加载贵州省份的地图。传递行政区划代码获取下属地区的数据和行政区划代码；
GetFloatingInfo(520000,'贵州')
//请求数据时候，我们传递两个参数；
//Area：行政区划代码；address:当前地图中文名 如贵州
function GetFloatingInfo(Area,address){
$.ajax({
url:'',
type:'get',
data:{
Area:Area,
},
dataType: "json",
success:function(res){
var data = res.data;
//调用地图绘制方法
drawMap(address,data,Area)
},
error:function(res){
},
})
}
三、地图绘制
//绘制地图方法：这里需要三个参数
//darwMapType：渲染地区名如（贵州）
//data ajax请求回来的地图所对应的暂时数据；
//Area行政区划代码
async function drawMap (darwMapType, data,Area) {
//请求json文件；
var Json = await $.get('js/Bulid/'+Area+'.json', function (Json) {
return Json
});
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示
var geoCoordMap = {
};
var mapFeatures = Json.features;
mapFeatures.forEach(function(v,i) {
var name = v.properties.name;
geoCoordMap[name] = v.properties.centroid;
});
//将data数据进入方法，取需要的参数； 用于气泡显示
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: data[i].value,
cityCode:data[i].cityCode,//行政区划代码
});
}
//name和value/cityCode参数根据实际项目中后台返回的参数名走；
}
return res;
};
echarts.dispose(document.getElementById('mapEchartsBox')); //先去掉原来的地图
var chart = echarts.init(document.getElementById('mapEchartsBox'));
var option = {
//鼠标经过展示数据方法
tooltip: {
triggerOn: "mousemove",
formatter:function(params){
var html = '<span>'+params.data.name+'：</span><br/>'
html+= '<span>值：'+params.data.value+'</span><br/>'
return html
},
backgroundColor:'rgba(29, 38, 71)',
// 额外附加的阴影
extraCssText:'box-shadow:0 0 4px rgba(11, 19, 43,0.8)',
},
geo: {
show: true,
top:'15%',
map: darwMapType,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#116bda',
borderColor: '#fff',
},
emphasis: {
areaColor: '#113cda',
}
}
},
//进行气泡标点
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return 10
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color:'#fff'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
type: 'map',
map: darwMapType,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 6,
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data:convertData(data),
symbolSize: function(val) {
return 15
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false
}
},
itemStyle: {
normal: {
color: function(res){
//根据value值对标点进行不同颜色显示
if(value<500 ){
return '#ff3859'
}else if(value<1000){
return '#4ed7fa'
}else if(value<1500){
return '#fac531'
}else{
return '#01ff5b'
}
},
shadowBlur: 10,
}
},
zlevel: 1
},
]
}；
echarts.registerMap(darwMapType, Json);
chart.setOption(
option
);
//点击进行下钻功能
chart.on("click", function (param) {
var Area = param.data.cityCode; //获取行政区划代码
var darwMapType = param.name;//获取地市名
//根据点击地图获得的地区行政区划代码和地区名字再次进行数据请求；
GetFloatingInfo(Area,darwMapType)
})
chart.setOption(option);
//数据窗口自动轮播插件，需要下载引用 echarts-auto-tooltip.js
tools.loopShowTooltip(chart, option, {
loopSeries: true });
//窗口变化重新加载echarts
window.addEventListener("resize", function () {
chart.resize();
});
}
以上方法就可以实现echart地图下钻、轮播数据和气泡的显示；欢迎留言讨论~~