太难了，弄了好几天的全国疫情统计可视化，今天终于完工了，在全国疫情统计可视化博客的基础上，完成了全国疫情统计可视化+数据下钻，可以点击省，显示各省的详细数据信息。我观摩了很多大佬的博客，在大佬们博客上，我学习到了很多，包括思想和知识，自我感受阶段二和阶段三比阶段一有很大的难度。实属不易呀呀呀。真切实地的感受到了基本功的重要性。不然太多的bug容易被忽视呀。
课题要求：
项目思路：
1.在servlet中对获得的数据进行格式化转化（利用Gson将封装的信息转换成json的形式）
2.学习echarts的相关事件，在折线的基础上学习点击事件，并且利用里面的tooltip相关知识点，完成显示框和并悬停显示详细信息
3.在阶段二的基础上，使用ajax直接从数据库中获取各省份下的各个市的有关疫情的数据
项目结构：
相关源码：
Dao.java:
package com.dao; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.bean.Bean; import com.db.DB; import com.sun.corba.se.pept.transport.Connection; public class Dao { //阶段一按着时间段进行查询 public List<Bean> CheckTime1(String firsttime,String lasttime){ java.sql.Connection con=null; PreparedStatement psts=null; ResultSet rs=null; String tablename="info"; System.out.println("-------"); DB db=new DB(); try { con=db.getCon(); //String sql="select * from info where Date between '"+firsttime+"' and '"+lasttime+"'"; String sql="select * from info where Date between '"+firsttime+"' and '"+lasttime+"'"; psts=con.prepareStatement(sql); //psts.setString(1,firsttime); //psts.setString(2, lasttime); rs=psts.executeQuery(); List<Bean> list=new ArrayList<Bean>(); while(rs.next()){ String date=rs.getString("Date"); String province=rs.getString("Province"); String city=rs.getString("city"); String confirmed_num=rs.getString("Confirmed_num"); String cured_num=rs.getString("Cured_num"); String dead_num=rs.getString("Dead_num"); Bean data=new Bean(date,province,city,confirmed_num,cured_num,dead_num); list.add(data); } return list; }catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; } //阶段二按着时间点进行查询 public List<Bean> search(String data){ int num=0; DB db=new DB(); List<Bean>list=new ArrayList<Bean>(); Connection con=null; java.sql.Statement psts=null; ResultSet rs=null; try { con=(Connection) db.getCon(); String sql="select * from info1 where Date ='"+data+"'"; System.out.print(sql); psts=((java.sql.Connection) con).createStatement(); rs=psts.executeQuery(sql); while(rs.next()){ // String id=rs.getString("Id"); String date=rs.getString("Date"); String province=rs.getString("Province"); String city=rs.getString("City"); String confirmed_num=rs.getString("Confirmed_num"); // String yisi_num=rs.getString("Yisi_num"); String cured_num=rs.getString("Cured_num"); String dead_num=rs.getString("Dead_num"); Bean data1=new Bean(date,province,city,confirmed_num,cured_num,dead_num); list.add(data1); System.out.println("第二阶段dao"); } } catch (SQLException e) { e.printStackTrace(); } return list; } //阶段三 public static List searchPro(String data,String province) { int num=0; List<Bean>list=new ArrayList<Bean>(); Connection con=null; java.sql.Statement psts=null; ResultSet rs=null; DB db=new DB(); try { con=(Connection) db.getCon(); String sql="select * from info1 where Date ='"+data+"' and Province ='"+province+"'"; System.out.print(sql); psts=((java.sql.Connection) con).createStatement(); rs=psts.executeQuery(sql); while(rs.next()){ // String id=rs.getString("Id"); String date=rs.getString("Date"); String city=rs.getString("City"); String confirmed_num=rs.getString("Confirmed_num"); // String yisi_num=rs.getString("Yisi_num"); String cured_num=rs.getString("Cured_num"); String dead_num=rs.getString("Dead_num"); Bean pro=new Bean(date,province,city,confirmed_num,cured_num,dead_num); list.add(pro); System.out.println("第三阶段dao"); } } catch (SQLException e) { e.printStackTrace(); } return list; } public static void main(String[] args) { Dao dataDao=new Dao(); //List<information>list=dataDao.search("2020-02-08 02:28:59"); List<Bean>list=dataDao.searchPro("2020-02-08 02:28:59","湖北省"); int size=list.size(); System.out.print(size); } }
BeanServlet.java:
package com.servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; 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 com.bean.Bean; import com.dao.Dao; import com.google.gson.Gson; /** * Servlet implementation class InfoServlet */ @WebServlet("/InfoServlet") public class BeanServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public BeanServlet() { 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 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String dataString=request.getParameter("time"); List<Bean>list=new ArrayList<Bean>(); Dao dataDao=new Dao(); list=dataDao.search(dataString); if(list!=null) { Gson gson = new Gson(); String json = gson.toJson(list); System.out.println(json); response.getWriter().write(json); } } /** * @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); } }
CityServlet.java:
package com.servlet; import java.io.IOException; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; 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 com.bean.Bean; import com.bean.City; import com.dao.Dao; import com.google.gson.Gson; /** * Servlet implementation class proServlet */ @WebServlet("/proServlet") public class CityServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public CityServlet() { 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 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String method = request.getParameter("method"); if(method.equals("d")) { try { d(request, response); } catch (SQLException e) { e.printStackTrace(); } }else if(method.equals("city")) { try { city(request, response); } catch (SQLException e) { e.printStackTrace(); } } } /** * @param request * @param response */ private void d(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException { // TODO Auto-generated method stub String province = request.getParameter("province"); String time = "2020-02-12 10:14:15"; Dao dao=new Dao(); List<Bean> list = dao.searchPro(time,province); List<City> data = new ArrayList<City>(); for(int i=1; i<list.size();i++) { City city = new City(); city.setProvince(list.get(i).getCity()); city.setConfirmed_num(list.get(i).getConfirmed_num()); data.add(city); } Gson gson = new Gson(); String json = gson.toJson(data); System.out.println(json); response.getWriter().write(json); } /** * @param request * @param response */ private void city(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException { // TODO Auto-generated method stub String province = request.getParameter("province"); String time = "2020-02-12 10:14:15"; Dao dao=new Dao(); List<Bean> list = dao.searchPro(time,province); List<City> data = new ArrayList<City>(); for(int i=1; i<list.size();i++) { City city = new City(); city.setProvince(list.get(i).getCity()); city.setConfirmed_num(list.get(i).getConfirmed_num()); data.add(city); } Gson gson = new Gson(); String json = gson.toJson(data); System.out.println(json); request.setAttribute("list", json); request.setAttribute("province", province); request.getRequestDispatcher("show_province.jsp").forward(request, response); } /** * @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); } }
show_china.html:
show_china
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><htmlstyle="height:100%"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><base><title>全国疫情地图</title><scriptsrc="js/jquery-1.12.3.min.js"type="text/javascript"></script><scripttype="text/javascript"src="js/echarts.min.js"></script><scripttype="text/javascript"src="js/china.js"></script><scripttype="text/javascript"src="province-json"></script></head><bodystyle="height:100%;margin:0"><divclass="row"style="background-color:silver;height:50px;text-align:center;line-height:50px">查询的日期<inputtype="text"name="time"id="time"placeholder="yyyy-MM-ddhh:mm:ss"><inputtype="button"value="查询"onclick="tu()"></div><divid="main"style="height:100%"></div></body><style>*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:600px;height:450px;margin:20pxauto;border:1pxsolid#ddd;}/*默认长宽比0.75*/</style><scripttype="text/javascript">functionrandomData(){returnMath.round(Math.random()*500);}vardt;varmydata1=newArray(0);functiontu(){time=$("#time").val();//alert(time.substring(0,2));$.ajax({url:"BeanServlet",//处理页面地址，表示ajax要用哪个页面处理async:true,type:"POST",//传值方式data:{"time":time},success:function(data){dt=data;for(vari=0;i<33;i++){vard={};d["province"]=dt[i].province;//.substring(0,2);d["confirmed_num"]=dt[i].confirmed_num;//d["yisi_num"]=dt[i].yisi_num;d["cured_num"]=dt[i].cured_num;d["dead_num"]=dt[i].dead_num;mydata1.push(d);}//varmdata=JSON.stringify(mydata1);varoptionMap={backgroundColor:'#FFFFFF',title:{text:'全国疫情地图',subtext:'',x:'center'},tooltip:{formatter:function(params){returnparams.province+'<br/>'+'确诊人数:'+params.confirmed_num+'<br/>'+'死亡人数:'+params['data'].dead_num+'<br/>'+'治愈人数:'+params['data'].cured_num;}//数据格式化},//左侧小导航图标visualMap:{min:0,max:35000,text:['多','少'],//取值范围的文字realtime:false,calculable:true,inRange:{color:['#f5bba7','#974236','#372a28']//取值范围的颜色},show:true//图注},//配置属性series:[{type:'map',mapType:'china',roam:false,//不开启缩放和平移zoom:1.23,//视角缩放比例label:{show:true,fontSize:'10',color:'rgba(0,0,0,0.7)'},itemStyle:{//外边框(底层地图)的一些属性borderColor:'rgba(0,0,0,0.2)',/*borderWidth:6,shadowBlur:10,shadowColor:'rgba(0,0,0,0.2)',*/},emphasis:{itemStyle:{//高亮时点的颜色areaColor:'#F3B329',//鼠标选择区域颜色shadowOffsetX:0,shadowOffsetY:0,shadowBlur:20,borderWidth:0,shadowColor:'rgba(0,0,0,0.5)'},},data:mydata1,nameMap:{'南海诸岛':'南海诸岛','北京':'北京市','天津':'天津市','上海':'上海市','重庆':'重庆市','河北':'河北省','河南':'河南省','云南':'云南省','辽宁':'辽宁省','黑龙江':'黑龙江省','湖南':'湖南省','安徽':'安徽省','山东':'山东省','新疆':'新疆维吾尔自治区','江苏':'江苏省','浙江':'浙江省','江西':'江西省','湖北':'湖北省','广西':'广西壮族自治区','甘肃':'甘肃省','山西':'山西省','内蒙古':"内蒙古自治区",'陕西':'陕西省','吉林':'吉林省','福建':'福建省','贵州':'贵州省','广东':'广东省','青海':'青海省','西藏':'西藏自治区','四川':'四川省','宁夏':'宁夏回族自治区','海南':'海南省','台湾':'台湾','香港':'香港','澳门':'澳门'}}]};//初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));myChart.on('click',function(params){alert(params.name);/*varurl="servlet2?province="+params.name;*/varurl="CityServlet?method=city&province="+params.name+"&time="+time;window.location.href=url;});//使用制定的配置项和数据显示图表myChart.setOption(optionMap);},error:function(){alert("请求失败");},dataType:"json"});}</script></html>
show_province.html:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <title>Insert title here</title> </head> <div id="main" style="height: 100%"></div> <style> *{margin:0;padding:0} html,body{ width:100%; height:100%; } #main{ width:600px; height:450px; margin: 20px auto; border:1px solid #ddd; } /*默认长宽比0.75*/ </style> <body> <script> //初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var province = "${province}"; $.get("mapjson/"+ province +".json", function (geoJson) { myChart.hideLoading(); echarts.registerMap(province, geoJson); myChart.setOption(option = { title: { text: province + '疫情地图', subtext : '', x : 'center' }, tooltip: { trigger: 'item', formatter: '{b}<br/>{c} (确诊 / 人)' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, visualMap: { min: 0, max: 50000, text : [ '多', '少' ],//取值范围的文字 realtime : false, calculable : true, inRange : { color : [ '#f5bba7', '#974236', ' #372a28' ]//取值范围的颜色 }, show:true//图注 }, series: [ { name: province + '地区疫情情况', type: 'map', mapType: province, // 自定义扩展图表类型 roam: false,//不开启缩放和平移 label: { show: true, fontSize:'10', color: 'rgba(0,0,0,0.7)' }, itemStyle : {//外边框(底层地图)的一些属性 borderColor : 'rgba(0, 0, 0, 0.2)', /* borderWidth :6, shadowBlur:10, shadowColor: 'rgba(0, 0, 0, 0.2)', */ }, emphasis: { itemStyle: { // 高亮时点的颜色 areaColor: '#F3B329',//鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0 ,0, 0.5)' }, } } ] }); }); $.ajax({ url:"CityServlet?method=d", async:true, type:"POST", data:{"province":province}, dataType:"json", success:function(data){ alert(data.length); var mydata1 = new Array(0); for(var i=0;i<data.length;i++){ var c = {}; c["province"] = data[i].name+'市'; c["confirmed_num"] = data[i].value; mydata1.push(c); } myChart.setOption({ //加载数据图表 series: [{ data: mydata1 }] }); }, error:function(){ alert("请求失败"); }, }); </script> </body> </html>
运行截图：
