2020.02.22
利用echarts中的中国地图，并将各省疫情相关数据显示在图上，此问题主要为地图的显示和数据的传输
下面代码为该地图的显示，其利用了各个省的现成json数据来显示，并将疫情数据通过ajax异步传输给前端。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>地图</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="ditu" style="height:100%"></div>
<script type="text/javascript">
$(function() {
$.get('${pageContext.request.contextPath}/servlet?method=quanguo',
function(data) {
init(data);
});
});
function init(data) {
var allData=data;
var dom = document.getElementById("ditu");
var myChart = echarts.init(dom);
var app = {};
option = null;
//各省份的地图json文件
var provinces = {
'上海': 'ss/data-1482909900836-H1BC_1WHg.json',
'河北': 'ss/data-1482909799572-Hkgu_yWSg.json',
'山西': 'ss/data-1482909909703-SyCA_JbSg.json',
'内蒙古': 'ss/data-1482909841923-rkqqdyZSe.json',
'辽宁': 'ss/data-1482909836074-rJV9O1-Hg.json',
'吉林': 'ss/data-1482909832739-rJ-cdy-Hx.json',
'黑龙江': 'ss/data-1482909803892-Hy4__J-Sx.json',
'江苏': 'ss/data-1482909823260-HkDtOJZBx.json',
'浙江': 'ss/data-1482909960637-rkZMYkZBx.json',
'安徽': 'ss/data-1482909768458-HJlU_yWBe.json',
'福建': 'ss/data-1478782908884-B1H6yezWe.json',
'江西': 'ss/data-1482909827542-r12YOJWHe.json',
'山东': 'ss/data-1482909892121-BJ3auk-Se.json',
'河南': 'ss/data-1482909807135-SJPudkWre.json',
'湖北': 'ss/data-1482909813213-Hy6u_kbrl.json',
'湖南': 'ss/data-1482909818685-H17FOkZSl.json',
'广东': 'ss/data-1482909784051-BJgwuy-Sl.json',
'广西': 'ss/data-1482909787648-SyEPuJbSg.json',
'海南': 'ss/data-1482909796480-H12P_J-Bg.json',
'四川': 'ss/data-1482909931094-H17eKk-rg.json',
'贵州': 'ss/data-1482909791334-Bkwvd1bBe.json',
'云南': 'ss/data-1482909957601-HkA-FyWSx.json',
'西藏': 'ss/data-1482927407942-SkOV6Qbrl.json',
'陕西': 'ss/data-1482909918961-BJw1FyZHg.json',
'甘肃': 'ss/data-1482909780863-r1aIdyWHl.json',
'青海': 'ss/data-1482909853618-B1IiOyZSl.json',
'宁夏': 'ss/data-1482909848690-HJWiuy-Bg.json',
'新疆': 'ss/data-1482909952731-B1YZKkbBx.json',
'北京': 'ss/data-1482818963027-Hko9SKJrg.json',
'天津': 'ss/data-1482909944620-r1-WKyWHg.json',
'重庆': 'ss/data-1482909775470-HJDIdk-Se.json',
'香港': 'ss/data-1461584707906-r1hSmtsx.json',
'澳门': 'ss/data-1482909771696-ByVIdJWBx.json'
};
loadMap('ss/data-1527045631990-r1dZ0IM1X.json', 'china');//初始化全国地图
var timeFn = null;
//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
myChart.on('click', function(params) {
clearTimeout(timeFn);
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
timeFn = setTimeout(function() {
var name = params.name; //地区name
var mapCode = provinces[name]; //地区的json数据
if (!mapCode) {
alert('无此区域地图显示');
return;
}
loadMap(mapCode, name);
}, 250);
});
// 绑定双击事件，返回全国地图
myChart.on('dblclick', function(params) {
//当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
//返回全国地图
loadMap('ss/data-1527045631990-r1dZ0IM1X.json', 'china');
});
/**
获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
@params {String} mapCode:json数据的地址
@params {String} name: 地图名称
*/
function loadMap(mapCode, name) {
$.get(mapCode, function(data) {
if (data) {
echarts.registerMap(name, data);
var option = {
tooltip: {
show: true,
formatter: function(params) {
if (params.data) return params.name + '确诊：' + params.data['value']
},
},
visualMap: {
min: 0,
max: 1000,
left: 26,
bottom: 40,
showLabel: !0,
text: ["高", "低"],
pieces: [{
gt: 10000,
label: "> 10000 人",
color: "#7f1100"
}, {
gte: 1000,
lte: 9999,
label: "1000 - 9999 人",
color: "#ff5428"
}, {
gte: 100,
lt: 999,
label: "100 - 999 人",
color: "#ff8c71"
}, {
gt: 10,
lt: 99,
label: "10 - 99",
color: "#ffd768"
}, {
gt: 0,
lt: 9,
label: "1 - 9",
color: "#FFF0F5"
},{
value: 0,
color: "#ffffff"
}],
show: !0
},
series: [{
name: 'MAP',
type: 'map',
mapType: name,
selectedMode: 'false',//是否允许选中多个区域
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: allData
}]
};
myChart.setOption(option);
// curMap = {
// mapCode: mapCode,
// mapName: name
// };
} else {
alert('无法加载该地图');
}
});
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>
</body>
</html>
下边的代码为可下钻的中国地图，其可下钻到省市
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/dataTool.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<script type="text/javascript">
/*注：源码就是下面这些，只要复制到开发工具就行，然后把
地图json数据（下载地址：https://share.weiyun.com/5x12K4r）的路径放对，
并且要导入echarts就可以渲染出来地图了*/
var zhongguo = "map/data-china.json";
var hainan = "map/data-hainan.json";
var xizang = "map/data-xizang.json";
var zhejiang = "map/data-zhejiang.json";
var yunnan = "map/data-yunnan.json";
var xinjiang = "map/data-xinjiang.json";
var tianjin = "map/data-tianjin.json";
var sichuan = "map/data-sichuan.json";
var shanxi = "map/data-shanxi.json";
var shangxi = "map/data-shangxi.json";
var shanghai = "map/data-shanghai.json";
var shangdong = "map/data-shangdong.json";
var qinghai = "map/data-qinghai.json";
var ningxia = "map/data-ningxia.json";
var neimenggu = "map/data-neimenggu.json";
var liaoning = "map/data-liaoning.json";
var jilin = "map/data-jilin.json";
var jiangxi = "map/data-jiangxi.json";
var jiangsu = "map/data-jiangsu.json";
var hunan = "map/data-hunan.json";
var hubei = "map/data-hubei.json";
var henan = "map/data-henan.json";
var heilongjiang = "map/data-heilongjiang.json";
var hebei = "map/data-hebei.json";
var guizhou = "map/data-guizhou.json";
var guangxi = "map/data-guangxi.json";
var guangdong = "map/data-guangdong.json";
var gansu = "map/data-gansu.json";
var chongqing = "map/data-chongqing.json";
var aomen = "map/data-aomen.json";
var anhui = "map/data-anhui.json";
var beijing = "map/data-beijing.json";
var fujian = "map/data-fujian.json";
var xianggang = "map/data-xianggang.json";
echarts.extendsMap = function(id, opt) {
// 实例
var chart = this.init(document.getElementById('main'));
var curGeoJson = {};
var cityMap = {
'中国': zhongguo,
'上海': shanghai,
'河北': hebei,
'山西': shangxi,
'内蒙古': neimenggu,
'辽宁': liaoning,
'吉林': jilin,
'黑龙江': heilongjiang,
'江苏': jiangsu,
'浙江': zhejiang,
'安徽': anhui,
'福建': fujian,
'江西': jiangxi,
'山东': shangdong,
'河南': henan,
'湖北': hubei,
'湖南': hunan,
'广东': guangdong,
'广西': guangxi,
'海南': hainan,
'四川': sichuan,
'贵州': guizhou,
'云南': yunnan,
'西藏': xizang,
'陕西': shanxi,
'甘肃': gansu,
'青海': qinghai,
'宁夏': ningxia,
'新疆': xinjiang,
'北京': beijing,
'天津': tianjin,
'重庆': chongqing,
'香港': xianggang,
'澳门': aomen
};
var levelColorMap = {
'1': 'rgba(241, 109, 115, .8)',
'2': 'rgba(255, 235, 59, .7)',
'3': 'rgba(147, 235, 248, 1)'
};
var defaultOpt = {
mapName: 'china', // 地图展示
goDown: false, // 是否下钻
bgColor: '#404a59', // 画布背景色
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function(name, option, instance) {}
};
if (opt) opt = this.util.extend(defaultOpt, opt);
// 层级索引
var name = [opt.mapName];
var idx = 0;
var pos = {
leftPlus: 115,
leftCur: 150,
left: 198,
top: 50
};
var line = [
[0, 0],
[8, 11],
[0, 22]
];
// style
var style = {
font: '18px "Microsoft YaHei", sans-serif',
textColor: '#eee',
lineColor: 'rgba(147, 235, 248, .8)'
};
var handleEvents = {
/**
* i 实例对象
* o option
* n 地图名
**/
resetOption: function(i, o, n) {
var breadcrumb = this.createBreadcrumb(n);
var j = name.indexOf(n);
var l = o.graphic.length;
if (j < 0) {
o.graphic.push(breadcrumb);
o.graphic[0].children[0].shape.x2 = 145;
o.graphic[0].children[1].shape.x2 = 145;
if (o.graphic.length > 2) {
var cityData = [];
var cityJson;
for (var x = 0; x < opt.data.length; x++) {
if(n === opt.data[x].city){
$([opt.data[x]]).each(function(index,data){
cityJson = {city:data.city,name:data.name,value:data.value,crew:data.crew,company:data.company,position:data.position,region:data.region};
cityData.push(cityJson)
})
}
}
if(cityData!=null){
o.series[0].data = handleEvents.initSeriesData(cityData);
}else{
o.series[0].data = [];
}
}
name.push(n);
idx++;
} else {
o.graphic.splice(j + 2, l);
if (o.graphic.length <= 2) {
o.graphic[0].children[0].shape.x2 = 60;
o.graphic[0].children[1].shape.x2 = 60;
o.series[0].data = handleEvents.initSeriesData(opt.data);
};
name.splice(j + 1, l);
idx = j;
pos.leftCur -= pos.leftPlus * (l - j - 1);
};
o.geo.map = n;
o.geo.zoom = 0.4;
i.clear();
i.setOption(o);
this.zoomAnimation();
opt.callback(n, o, i);
},
/**
* name 地图名
**/
createBreadcrumb: function(name) {
var cityToPinyin = {
'中国': 'zhongguo',
'上海': 'shanghai',
'河北': 'hebei',
'山西': 'shangxi',
'内蒙古': 'neimenggu',
'辽宁': 'liaoning',
'吉林': 'jilin',
'黑龙江': 'heilongjiang',
'江苏': 'jiangsu',
'浙江': 'zhejiang',
'安徽': 'anhui',
'福建': 'fujian',
'江西': 'jiangxi',
'山东': 'shangdong',
'河南': 'henan',
'湖北': 'hubei',
'湖南': 'hunan',
'广东': 'guangdong',
'广西': 'guangxi',
'海南': 'hainan',
'四川': 'sichuan',
'贵州': 'guizhou',
'云南': 'yunnan',
'西藏': 'xizang',
'陕西': 'shanxi',
'甘肃': 'gansu',
'青海': 'qinghai',
'宁夏': 'ningxia',
'新疆': 'xinjiang',
'北京': 'beijing',
'天津': 'tianjin',
'重庆': 'chongqing',
'香港': 'xianggang',
'澳门': 'aomen'
};
var breadcrumb = {
type: 'group',
id: name,
left: pos.leftCur + pos.leftPlus,
top: pos.top + 3,
children: [{
type: 'polyline',
left: -90,
top: -5,
shape: {
points: line
},
style: {
stroke: '#fff',
key: name
// lineWidth: 2,
},
onclick: function() {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
}
}, {
type: 'text',
left: -68,
top: 'middle',
style: {
text: name,
textAlign: 'center',
fill: style.textColor,
font: style.font
},
onclick: function() {
var name = this.style.text;
handleEvents.resetOption(chart, option, name);
}
}, {
type: 'text',
left: -68,
top: 10,
style: {
name: name,
text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',
textAlign: 'center',
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function() {
// console.log(this.style);
var name = this.style.name;
handleEvents.resetOption(chart, option, name);
}
}]
}
pos.leftCur += pos.leftPlus;
return breadcrumb;
},
// 设置effectscatter
initSeriesData: function(data) {
var temp = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
temp.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
crew:data[i].crew,
company:data[i].company,
position:data[i].position,
region:data[i].region
});
}
};
return temp;
},
zoomAnimation: function() {
var count = null;
var zoom = function(per) {
if (!count) count = per;
count = count + per;
// console.log(per,count);
chart.setOption({
geo: {
zoom: count
}
});
if (count < 1) window.requestAnimationFrame(function() {
zoom(0.2);
});
};
window.requestAnimationFrame(function() {
zoom(0.2);
});
}
};
var option = {
backgroundColor: opt.bgColor,
tooltip: {
show: true,
trigger:'item',
alwaysShowContent:false,
backgroundColor:'rgba(50,50,50,0.7)',
hideDelay:100,
triggerOn:'mousemove',
enterable:true,
position:['60%','70%'],
formatter:function(params, ticket, callback){
return '简称：'+params.data.name+'<br/>'+'机组：'+params.data.crew+'万千瓦'+'<br/>'+'公司名称：'+params.data.company+'<br/>'+'所属大区：'+params.data.region+'<br/>'+'所在位置：'+params.data.position
}
},
graphic: [{
type: 'group',
left: pos.left,
top: pos.top - 4,
children: [{
type: 'line',
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: style.lineColor,
}
}, {
type: 'line',
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: style.lineColor,
}
}]
},
{
id: name[idx],
type: 'group',
left: pos.left + 2,
top: pos.top,
children: [{
type: 'polyline',
left: 90,
top: -12,
shape: {
points: line
},
style: {
stroke: 'transparent',
key: name[0]
},
onclick: function() {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
}
}, {
type: 'text',
left: 0,
top: 'middle',
style: {
text: '中国',
textAlign: 'center',
fill: style.textColor,
font: style.font
},
onclick: function() {
handleEvents.resetOption(chart, option, '中国');
}
}, {
type: 'text',
left: 0,
top: 10,
style: {
text: 'China',
textAlign: 'center',
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, '中国');
}
}]
}],
geo: {
map: opt.mapName,
roam: true,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
regions: opt.activeArea.map(function(item) {
if (typeof item !== 'string') {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || '#389BB7'
}
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: '#fff'
}
}
}
}
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: '#91e6ff',
areaColor: '#389BB7'
}
}
}
}
})
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
rippleEffect: {
period:15,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#FFC848',
shadowBlur: 10,
shadowColor: '#333'
}
},
data: handleEvents.initSeriesData(opt.data)
}]
};
chart.setOption(option);
// 添加事件
chart.on('click', function(params) {
var _self = this;
if (opt.goDown && params.name !== name[idx]) {
if (cityMap[params.name]) {
var url = cityMap[params.name];
$.get(url, function(response) {
//console.log(response);
curGeoJson = response;
echarts.registerMap(params.name, response);
handleEvents.resetOption(_self, option, params.name);
});
}
}
});
chart.setMap = function(mapName) {
var _self = this;
if (mapName.indexOf('市') < 0) mapName = mapName + '市';
var citySource = cityMap[mapName];
if (citySource) {
var url = './map/' + citySource + '.json';
$.get(url, function(response) {
// console.log(response);
curGeoJson = response;
echarts.registerMap(mapName, response);
handleEvents.resetOption(_self, option, mapName);
});
}
};
return chart;
};
$.getJSON(zhongguo, function(geoJson) {
echarts.registerMap('中国', geoJson);
var myChart = echarts.extendsMap('chart-panel', {
bgColor: '#154e90', // 画布背景色
mapName: '中国', // 地图名
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance) {
//console.log(name, option, instance);
},
});
})
</script>
<div id="main" style="100%;height:1000px;"></div>
</body>
</html>