（一）全国疫情可视化地图以及数据的下钻
首先要实现的是全国数据的统计，通过获取选取的时间，从数据库中找到全国各省的数据，其中对数据库中的各省的名字进行了处理
因为china.js中只能是与省份名字相匹配，找到后用json数组储存起来，并返还给servlet,servlet再返回给调用它的结果，有了数据的json结果
接下来就是对map的构建，现将json格式转化为js格式，然后用datas数组保存起来。并最后给图表赋值。
相关代码如下：
dao层
public String getchina(String date)
{
JSONArray json =new JSONArray();
String sql="select * from info where Date like '"+date+"%'";
Connection cnotallow=null;
Statement state=null;
ResultSet rs=null;
cnotallow=DBUtil.getConn();
int flag=0;
try {
state=con.createStatement();
rs=state.executeQuery(sql);
while(rs.next())
{
JSONObject ob=new JSONObject();
String name=rs.getString("Province");
String city=rs.getString("City");
String cnotallow=rs.getString("Confirmed_num");
String cure=rs.getString("Cured_num");
String dead=rs.getString("Dead_num");
String code=rs.getString("Code");
String newname="";
if(city.equals("")) {
if(name.length()==2)
{
newname+=name;
}
if(name.length()==3) {
newname+=name.substring(0,2);
}
if(name.matches("内蒙古.*"))
{
newname+="内蒙古";
}
if(name.matches("宁夏.*"))
{
newname+="宁夏";
}
if(name.matches("新疆.*"))
{
newname+="新疆";
}
if(name.matches("广西.*"))
{
newname+="广西";
}
if(name.matches("黑龙江.*"))
{
newname+="黑龙江";
}
if(name.matches("西藏.*"))
{
newname+="西藏";
}
}
ob.put("name", newname);
if(!confirmed.equals("")) {
ob.put("confirmed",Integer.valueOf(confirmed));
}
else
{
ob.put("confirmed",0);
}
if(!cure.equals("")) {
ob.put("cure",Integer.valueOf(cure));
}else {
ob.put("cure",0);
}
if(!dead.equals("")) {
ob.put("dead",Integer.valueOf(dead));
}else {
ob.put("dead",0);
}
ob.put("code",code);
json.add(ob);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
DBUtil.close(rs, state, con);
return json.toString();
}
View Code
servlet层：
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.TreeMap;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.TreeMap;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import Dao.predao;
/**
* Servlet implementation class listmap
*/
@WebServlet("/listmap")
public class listmap extends HttpServlet {
private static final long serialVersionUID = 1L;
predao dao=new predao();
/**
* @see HttpServlet#HttpServlet()
*/
public listmap() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
String date=request.getParameter("date");
response.getWriter().write(dao.getchina(date));
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
View Code
实现省份的数据传输后，就要实现数据的下钻：
数据下钻也就是设置一个点击事件，点击后将点击的省份名字以及Code和查询的日期传给一个函数，由该函数来实现数据的调用
通过名字找到对应的省份json，然后获取该省份的数据并创建地图，之后通过后台来获取该省份的数据，将省份的数据与json里的数据进行比较，将数据库里有的该省份下的市的数据存储起来，代码如下：
var citynamedata,datasize;
var data;
if( name in provinces ){
$.getJSON('city/'+provinces[name]+'.json', function(data){
echarts.registerMap(name, data);
citynamedata=data; //data.features[i].properties.name
datasize=data.features.length;
});
$.post(
'getcity',
{'date':date,'code':code},
function(result){
jsnotallow=JSON.parse(result);
size=json.length;
data=new Array();
for(i=0;i<size;i++)
for(j=0;j<datasize;j++)
if(citynamedata.features[j].properties.name.indexOf(json[i].name)!=-1)
data.push({
value:json[i].confirmed,
name:citynamedata.features[j].properties.name,
});
View Code
然后对地图进行设置，设置时对应的mapType: name等于自定义的省份的名字。
dao层：
public String getcity(String date,String code)
{
JSONArray json =new JSONArray();
String sql="select * from info where Date like '"+date+"%' and Code like '"+code+"%'";
Connection cnotallow=null;
Statement state=null;
ResultSet rs=null;
cnotallow=DBUtil.getConn();
try {
state=con.createStatement();
rs=state.executeQuery(sql);
while(rs.next())
{
JSONObject ob=new JSONObject();
ob.put("name", rs.getString("City"));
String cnotallow=rs.getString("Confirmed_num");
if(!confirmed.equals("")) {
ob.put("confirmed",Integer.valueOf(confirmed));
}else {
ob.put("confirmed",0);
}
String cure=rs.getString("Cured_num");
if(!cure.equals("")) {
ob.put("cure", cure);
}else {
ob.put("cure", 0);
}
String dead=rs.getString("Dead_num");
if(!dead.equals("")) {
ob.put("dead", dead);
}else {
ob.put("dead", 0);
}
json.add(ob);
}
} catch (SQLException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
DBUtil.close(rs, state, con);
return json.toString();
}
View Code
servlet层：
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Dao.predao;
/**
* Servlet implementation class getcity
*/
@WebServlet("/getcity")
public class getcity extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public getcity() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
String date=request.getParameter("date");
String code=request.getParameter("code");
predao dao=new predao();
response.getWriter().write(dao.getcity(date,code));
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
View Code
map.jsp
<%@ page language="java" cnotallow="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.TreeMap" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts中国地图数据</title>
<script type="text/javascript" src="js/echarts.min.js" ></script>
<script type="text/javascript" src="js/china.js" ></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
<title>Insert title here</title>
</head>
<body>
<div align="center">
<span>请输入日期：</span><input type="date" name="date"> <button class="btn btn-primary">查询</button>
</div>
<div id="main" style="height:800px;padding-top: 20px"></div>
<script type="text/javascript">
var provinces = {
//23个省
"台湾": "taiwan",
"河北": "hebei",
"山西": "shan1xi",
"辽宁": "liaoning",
"吉林": "jilin",
"黑龙江": "heilongjiang",
"江苏": "jiangsu",
"浙江": "zhejiang",
"安徽": "anhui",
"福建": "fujian",
"江西": "jiangxi",
"山东": "shandong",
"河南": "henan",
"湖北": "hubei",
"湖南": "hunan",
"广东": "guangdong",
"海南": "hainan",
"四川": "sichuan",
"贵州": "guizhou",
"云南": "yunnan",
"陕西": "shan3xi",
"甘肃": "gansu",
"青海": "qinghai",
//5个自治区
"新疆": "xinjiang",
"广西": "guangxi",
"内蒙古": "neimenggu",
"宁夏": "ningxia",
"西藏": "xizang",
//4个直辖市
"北京": "beijing",
"天津": "tianjin",
"上海": "shanghai",
"重庆": "chongqing",
//2个特别行政区
"香港": "hongkong",
"澳门": "macau"
};
var myChart = echarts.init(document.getElementById('main'));
function getchina(result)
{
var datas;
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
var jsnotallow=JSON.parse(result);
var size=json.length;
datas=new Array();
for(i=0;i<size;i++){
//alert(json[i].name);
datas.push({
value:(json[i].confirmed+json[i].cure+json[i].dead),
name:json[i].name,
});
}
myChart.hideLoading();
var option = {
title : {
text: '全国各省疫情数量',
subtext: '总数量',
x:'center'
},
tooltip : {
formatter : function(params){
index=params.dataIndex;
tip="<p>"+params.name+"</p><p>确诊人数:"+json[index].confirmed+"</p><p>治愈人数:"+json[index].cure+"</p><p>死亡人数:"+json[index].dead+"</p>";
return tip;
}
},
visualMap: {
type: 'piecewise',
pieces: [
{ min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
{ min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
{ min: 150, max: 499, label: '确诊150-499人', color: '#974236' },
{ min: 50, max: 149, label: '确诊50-149人', color: '#ee7263' },
{ min: 1, max: 49, label: '确诊1-49人', color: '#f5bba7' },
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
series : [
{
name: '疫情统计',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:datas
}
]
}
myChart.setOption(option);
myChart.hideLoading();
myChart.on('click',function(params){
returnCityMap($('input[name=date]').val(),json[params.dataIndex].code.substr(0,2),params.name);
})
}
function returnCityMap(date,code,name)
{
myChart.showLoading();
//alert(name);
var citynamedata,datasize;
var data;
if( name in provinces ){
$.getJSON('city/'+provinces[name]+'.json', function(data){
echarts.registerMap(name, data);
citynamedata=data; //data.features[i].properties.name
datasize=data.features.length;
});
$.post(
'getcity',
{'date':date,'code':code},
function(result){
jsnotallow=JSON.parse(result);
size=json.length;
data=new Array();
for(i=0;i<size;i++)
for(j=0;j<datasize;j++)
if(citynamedata.features[j].properties.name.indexOf(json[i].name)!=-1)
data.push({
value:json[i].confirmed,
name:citynamedata.features[j].properties.name,
});
city_optinotallow={
title: {
text: '疫情分布',
x:'center'
},
tooltip:{
formatter : function(params){
index=params.dataIndex;
tip="<p>"+params.name+"</p><p>确诊人数:"+json[index].confirmed+"</p><p>治愈人数:"+json[index].cure+"</p><p>死亡人数:"+json[index].dead+"</p>";
return tip;
}
},
visualMap: {
type: 'piecewise',
pieces: [
{ min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
{ min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
{ min: 150, max: 499, label: '确诊150-499人', color: '#974236' },
{ min: 50, max: 149, label: '确诊50-149人', color: '#ee7263' },
{ min: 1, max: 49, label: '确诊1-49人', color: '#f5bba7' },
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
//配置属性
series: [{
type: 'map',
mapType: name,
data: data,
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
/*label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
}*/
}]
}
myChart.setOption(city_option);
myChart.hideLoading();
}
)
}
}
$('button').click(function(){
var date=$('input[name=date]').val();
$.post(
'listmap',
{'date':$('input[name=date]').val()},
function(result){
getchina(result);
}
)
})
</script>
</body>
</html>
View Code
实现过程有一个小bug，第一个图他所对应的数据颜色显示是正常的，而当进行数据挖掘时显示的数据颜色是有些误差的！！！原因可能是在一个jsp页面进行的跳转，可能沿用的是省份的颜色，导致地区的颜色和省份的颜色几乎一样。
