Echarts实现疫情地图（Echarts的中国地图+rvlet+mysql三
级联⽤案例实现）
⼀、前提说明
1.今天给⼤家带来的是Echarts的中国地图可视化（数据从后台获取），这是很多Echarts教程没有提到的知识，因⾃⼰去过北京参加了⼀次⾼校教师培训会（本⼈是学⽣），⽤的是Echarts获取Servlet类中的数据。刚好本次假期⼜有学校⽼师让做疫情地图，所以便结合所学，对学校提供数据（sql数据），⽤Echarts的map系列做了⼀个疫情地图。
2.本⼈开发环境 （jdk 1.8） （mysql5.6） (tomcat 7)，强调该点是因为笔者以前⽤ jdk10 执⾏同样代码，有时候会获取不到后台rvlet的数据，换成较低的jdk1.8后，相对来说，少了很多问题，若只是学习所⽤，jdk1.8已经⾜够。
3.该篇博客需要⼀些Echarts基础知识，笔者在此提供学习途径：，只需要两⼩时，对Echarts的使⽤就会有个基础的认识，以及基本案例的实现。
4.本⼈没有系统学习过Web开发，对web前后台交互并不熟悉，但学校有教过JSP，Js，Struts2等知识外加⾃⼰也做过⼀些⼩的web项⽬，对web开发基本的⼀套有个基本的了解。
5.该博客涉及的配套资源链接：/s/1XE5AEGXZHUr6LqYvC70-1A 提取码：0w4i
⼆、效果展⽰
三、开发步骤
1.项⽬结构（js⽂件下的provinces⽂件夹放的是各个省的js⽂件，NewFile.jsp为中国地图）
注意：虽然该Web项⽬中⽤到了Servlet类，但⽆需创建动态Web项⽬后在l中进⾏rvlet配置，如果配置可能会导致ajax⽆法获取到rvlet中数据，⼤家可结合实际情况测试笔者所述。
2.NewFile.jsp代码（中国地图前端实现代码）
该部分代码重难点：（笔者在此提供本⼈解决这些问题的参考⽹址，如下）
后台传向前端时JSON数据格式的转化：
该博主对Json格式各种转化做了⼀个概括
该博主针对Echarts中国地图所需数据格式进⾏了实现，从后台加载到前端地图的数据没有问题，但会存在某些省浮标显⽰存在问题
tooltip.formatter属性地图浮标实现解决：
echarts官⽹提供案例：
虽然笔者结合这些博客对存在问题进⾏了解决并实现，但也想分享给各位读者，让各位读者有更深刻的认识。
<%@ page language="java" contentType="text/html; chart=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>密炼
<head>
<meta chart="utf-8">
<title>⼤学师⽣疫情去向</title>
<!-- 引⼊ echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/provinces/hunan.js"></script>茶泡
</head>
<body onload="showLeftTime()">
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<label id="show" >当前时间</label>
<div id="main" align="center" ></div>
<script type="text/javascript">
var myChart = echarts.ElementById('main'));
// var oBack = ElementById("back");
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', var provincesText = ['上海', '河北', '⼭西', '内蒙古', '辽宁', '吉林', '⿊龙江', '江苏', '浙江', '安徽', '福建', '江西', '⼭东', '河南', '湖北', '湖南', '⼴东', '⼴西', '海南', '四川', '贵
function showLeftTime()
{
var now=new Date();200xxx
var FullYear();
var Month();
var Date();
var Hours();
var Minutes();
document.all.show.innerHTML=""+year+"年"+month+"⽉"+day+"⽇ "+hours+":"+minutes;
//⼀秒刷新⼀次显⽰时间
var timeID=tTimeout(showLeftTime,1000);
}
/
男头像背影
/echarts点击事件函数，echarts官⽹提供使⽤案例
<('click', function (params) {
var provinceName=params.name;
console.log(params.name); // 控制台打印数据的名称
showProvince(provinceName);
//myChart.off("click");
});田径运动会加油稿
// 展⽰对应的省
function showProvince(pName) {
for (var i = 0; i < provincesText.length; i++) {
if (pName === provincesText[i]) {
/
/显⽰对应省份的⽅法
window.open(provinces[i]+".jsp",'_lf','',true);
break;
}
}
}
$.ajax({
type:'post',
dataType:'json',
url:'/d4/infoServlet',
success:function(data){
var urObj1 = eval(data.list1); //转为JSON格式
var urObj2 = eval(data.list2);
// alert(urObj1[0].value);
// alert(urObj2[0].value); //打印内容，监测是否从后台获取到数据
var sum1=0;
var sum2=0;
for(var a in urObj1) {
sum1=sum1+urObj1[a].value;
}
console.log(sum1);
for(var a in urObj2){
sum2=sum2+urObj2[a].value;
}
console.log(sum2); //打印到浏览器控制台
var option = {
title : {
text: '⼤学师⽣疫情去向图',
subtext: '总⼈数：'+(sum1+sum2)+'⼈教师：'+sum1+'⼈学⽣：'+sum2+'⼈', left: 'center',
textStyle: {
fontFamily: 'Arial',
fontSize: 50,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题⽂本样式{"color": "#aaa"}
fontSize: 20,
fontStyle: 'normal',
fontWeight: 'normal',
}
},
tooltip : {
trigger: 'item',
formatter:function(params){
/
/定义⼀个res变量来保存最终返回的字符结果，并且先把地区名称放到⾥⾯ var res=params.name+'<br/>'+'总数:';
//定义⼀个变量来保存ries数据系列
var myries=option.ries;
var sum=0;
//循环遍历ries数据系列
for(var i=0;i<myries.length;i++){
//在内部继续循环ries[i]，从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显⽰ for(var k=0;k<myries[i].data.length;k++){
//console.log(myries[i].data[k].name);
//如果data数据中的name和地区名称⼀样
if(myries[i].data[k].name==params.name){
//将ries数据系列每⼀项中的name和数据系列中当前地区的数据添加到res中
if(i==0){
for(var j=0;j<myries[1].data.length;j++){
胆囊增大if(myries[1].data[j].name&&myries[1].data[j].name==params.name){
sum=myries[1].data[j].value+myries[i].data[k].value;
break;
}
el if(j==myries[1].data.length-1){
sum=myries[i].data[k].value;
}
}
res+=sum+'<br/>'+myries[i].name+':'+myries[i].data[k].value;
}
el{
if(sum==0){
sum=myries[i].data[k].value;
res+=sum+'<br/>'+myries[i].name+':'+myries[i].data[k].value+'<br/>';
}
el{
res+='<br/>'+myries[i].name+':'+myries[i].data[k].value+'<br/>';
}
}
}
}
}
return res;
},
},
legend: {
orient: 'vertical',
left: '6%',
top:'12%',
align:'left',
itemHeight:'20',
data:['教师','学⽣']
},
visualMap: {
min: 0,
max: 5000,
left: '6%',
bottom: '4%',
text:['⾼','低'], // ⽂本，默认为数值⽂本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
亚基解聚时left: 'right',
left: 'right',
top: 'center',
itemSize:'20',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: fal}, restore : {show: true},
saveAsImage : {show: true}
}
},
ries : [
{
name: '教师',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: urObj1
},
{
name: '学⽣',
type: 'map',
一年级数学卷子
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: urObj2
}
]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.tOption(option);
},
error:function () {
alert("出错了");
}
});
</script>
</body>
</html>
