疫情地图第二阶段
(一)全国疫情可视化地图以及数据的下钻
首先要实现的是全国数据的统计,通过获取选取的时间,从数据库中找到全国各省的数据,其中对数据库中的各省的名字进行了处理
因为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 con=null; Statement state=null; ResultSet rs=null; con=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 confirmed=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(); }
servlet层:
et; 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); } }
实现省份的数据传输后,就要实现数据的下钻:
数据下钻也就是设置一个点击事件,点击后将点击的省份名字以及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){ json=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, });
然后对地图进行设置,设置时对应的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 con=null; Statement state=null; ResultSet rs=null; con=DBUtil.getConn(); try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { JSONObject ob=new JSONObject(); ob.put("name", rs.getString("City")); String confirmed=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(); }
servlet层:
et; 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 }
map.jsp
uage="java" contentType="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 json=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){ json=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_option={ 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); }
实现过程有一个小bug,第一个图他所对应的数据颜色显示是正常的,而当进行数据挖掘时显示的数据颜色是有些误差的!!!原因可能是在一个jsp页面进行的跳转,可能沿用的是省份的颜色,导致地区的颜色和省份的颜色几乎一样。