实体类
package com.atguigu.pojo; public class Province { private int id; private String name; private String suspect; private String confirm; private String heal; private String dead; private String severe; private String lastUpdateTime; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSuspect() { return suspect; } public void setSuspect(String suspect) { this.suspect = suspect; } public String getConfirm() { return confirm; } public void setConfirm(String confirm) { this.confirm = confirm; } public String getHeal() { return heal; } public void setHeal(String heal) { this.heal = heal; } public String getDead() { return dead; } public void setDead(String dead) { this.dead = dead; } public String getSevere() { return severe; } public void setSevere(String severe) { this.severe = severe; } public String getLastUpdateTime() { return lastUpdateTime; } public void setLastUpdateTime(String lastUpdateTime) { this.lastUpdateTime = lastUpdateTime; } public Province(int id, String name, String suspect, String confirm, String heal, String dead, String severe, String lastUpdateTime) { super(); this.id = id; this.name = name; this.suspect = suspect; this.confirm = confirm; this.heal = heal; this.dead = dead; this.severe = severe; this.lastUpdateTime = lastUpdateTime; } public Province() { super(); } @Override public String toString() { return "Province [id=" + id + ", name=" + name + ", suspect=" + suspect + ", confirm=" + confirm + ", heal=" + heal + ", dead=" + dead + ", severe=" + severe + ", lastUpdateTime=" + lastUpdateTime + "]"; } }
package com.atguigu.pojo; public class Total { private String name; private String confirm; private String suspect; private String heal; private String dead; private String severe; private String lastUpdateTime; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getConfirm() { return confirm; } public void setConfirm(String confirm) { this.confirm = confirm; } public String getSuspect() { return suspect; } public void setSuspect(String suspect) { this.suspect = suspect; } public String getHeal() { return heal; } public void setHeal(String heal) { this.heal = heal; } public String getDead() { return dead; } public void setDead(String dead) { this.dead = dead; } public String getSevere() { return severe; } public void setSevere(String severe) { this.severe = severe; } public String getLastUpdateTime() { return lastUpdateTime; } public void setLastUpdateTime(String lastUpdateTime) { this.lastUpdateTime = lastUpdateTime; } public Total(String name, String confirm, String suspect, String heal, String dead, String severe, String lastUpdateTime) { super(); this.name = name; this.confirm = confirm; this.suspect = suspect; this.heal = heal; this.dead = dead; this.severe = severe; this.lastUpdateTime = lastUpdateTime; } public Total() { super(); } @Override public String toString() { return "Total [name=" + name + ", confirm=" + confirm + ", suspect=" + suspect + ", heal=" + heal + ", dead=" + dead + ", severe=" + severe + ", lastUpdateTime=" + lastUpdateTime + "]"; } }
DBUtils.java
package com.atguigu.util; import java.io.InputStream; import java.sql.Connection; import java.sql.SQLException; import java.util.Properties; import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid.pool.DruidDataSourceFactory; /** * JdbcUtils 工具类<br/> * 创建一个数据库连接池，提供给用户获取数据库连接，然后关闭数据库连接 */ public class DBUtils { private static DruidDataSource dataSource; static { Properties properties = new Properties(); InputStream is = DBUtils.class.getClassLoader().getResourceAsStream("jdbc.properties"); try { properties.load(is); setDataSource((DruidDataSource) DruidDataSourceFactory.createDataSource(properties)); // System.out.println( dataSource ); is.close(); } catch (Exception e) { e.printStackTrace(); } } /** * 从数据库连接池中获取连接 * * @return */ public static Connection getConnection() { Connection connection = null; try { // 从数据库连接池中获取数据库连接 connection = getDataSource().getConnection(); } catch (SQLException e) { e.printStackTrace(); } return connection; } /** * 关闭连接，释放资源 * * @param conn */ public static void closeConnection(Connection conn) { if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static DruidDataSource getDataSource() { return dataSource; } public static void setDataSource(DruidDataSource dataSource) { DBUtils.dataSource = dataSource; } }
mapper
package com.atguigu.dao.impl; import java.sql.SQLException; import java.util.List; import com.atguigu.pojo.*; import com.atguigu.util.DBUtils; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanListHandler; public class mapper { public static List<Province> getConfirmed() throws SQLException { QueryRunner qr = new QueryRunner(DBUtils.getDataSource()); String sql = "select * from provinces order by confirm desc"; List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class)); return query; } public static List<Province> getHealed() throws SQLException { QueryRunner qr = new QueryRunner(DBUtils.getDataSource()); String sql = "select * from provinces order by heal desc"; List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class)); return query; } public static List<Province> getDead() throws SQLException { QueryRunner qr = new QueryRunner(DBUtils.getDataSource()); String sql = "select * from provinces order by dead desc"; List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class)); return query; } public static List<Province> getWorld() throws SQLException { QueryRunner qr = new QueryRunner(DBUtils.getDataSource()); String sql = "select * from world"; List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class)); return query; } }
servlet
package com.atguigu.servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; 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.atguigu.dao.impl.dao; import com.atguigu.dao.impl.mapper; import com.atguigu.pojo.Province; import com.google.gson.Gson; /** * Servlet implementation class servlet */ public class servlett extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public servlet() { 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.getWriter().append("Served at: ").append(request.getContextPath()); request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String method=request.getParameter("method"); if(method.equals("total")) { try { total(request,response); } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } } else if(method.equals("histroy")) try { history(request,response); } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } else try { world_dt(request,response); } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } } /** * @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); } /** * @param request * @param response */ private void world_dt(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException { System.out.println("------world----"); List<Province> list = mapper.getConfirmed(); Gson gson = new Gson(); String json = gson.toJson(list); response.getWriter().write(json); } /** * @param request * @param response */ private void history(HttpServletRequest request, HttpServletResponse response) throws SQLException, ServletException, IOException { List<Province> list = mapper.getWorld(); System.out.println("------history----"); Gson gson = new Gson(); String json = gson.toJson(list); response.getWriter().write(json); } /** * @param request * @param response */ private void total(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException { System.out.println("------total----"); List<Province> confirmList = mapper.getConfirmed(); List<Province> HealList = mapper.getHealed(); List<Province> DeadList = mapper.getDead(); int count = 0; int DeadCount = 0; int HealCount = 0; for (Province total : confirmList) { count += Integer.parseInt(total.getConfirm()); DeadCount += Integer.parseInt(total.getDead()); HealCount += Integer.parseInt(total.getHeal()); } request.setAttribute("connfirmList", confirmList); request.setAttribute("healList", HealList); request.setAttribute("DeadList", DeadList); request.setAttribute("Total", count); request.setAttribute("Dead", DeadCount); request.setAttribute("Healed", HealCount); request.getRequestDispatcher("world.jsp").forward(request, response); } }
world.js
和之前的相比后台程序大同小异,前端不一样,用到了world.js,要掌握其用法
<%@ 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 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>世界疫情</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <script src="js/echarts.min.js"></script> <style type="text/css"> body { background:#000000 } div { float: left; } #left { width: 300px; height: 700px; } </style> </head> <body background="#000"> <div id="left"> <div style="background-color: #4B4B4B; 300px;height: 130px;margin-top: 10px;margin-left: 10px;"> <h1 style="color: red;" align="center"> <font size="5" color="#ffffff">总确诊人数：</font> ${Total} </h1> </div> <div style="margin-top: 10px;margin-left: 10px;background-color: #4B4B4B;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: auto; WIDTH: 300px; HEIGHT: 580px" align=center;"> <table class="table"> <c:forEach items="${confirmList}" var="item"> <tr> <td> <h3 style="color: red;"> ${item.confirm } <font size="5" color="#ffffff">${item.name }</font> </h3> </td> </tr> </c:forEach> </table> </div> <div style="background-color: #4B4B4B; 300px;height: 150px;margin-top: 10px;margin-left: 10px;"> <h1 style="color: red;" align="center"> <font size="5" color="#ffffff">更新时间：</font><br> ${list[0].lastUpdateTime} </h1> </div> </div> <div style=" 1000px;height: 800px;background-color: #4B4B4B;margin-top: 10px;margin-left: 20px;" > <div id="main" style=" 1000px;height:800px;border:1px solid #ccc"></div> </div> <div style=" 550px; height: 900px;margin-top: 10px;margin-left: 10px;"> <div style=" 49%; height: 600px;background-color: #4B4B4B;background-color: #4B4B4B;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: auto;"> <h1 style="color: #ffffff" align="center"> <font size="4" color="#ffffff">总死亡人数：<br></font> ${Dead} </h1> <table class="table" style="overflow-y:scroll;"> <c:forEach items="${deadList}" var="item"> <tr> <td> <h2 style="color: red;"> ${item.dead }死亡<br/> <font size="3" color="#ffffff">${item.name }</font> </h2> </td> </tr> </c:forEach> </table> </div> <div style=" 49%; height: 600px;background-color: #4B4B4B;margin-left: 10px;background-color: #4B4B4B;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: auto;"> <h1 align="center"> <font size="4" color="#ffffff">总治愈人数：<br></font> <font color="#33CC00">${healed}</font> </h1> <table class="table" style="overflow-y:scroll;"> <c:forEach items="${healList}" var="item"> <tr> <td> <h2 style="color:#33CC00"> ${item.heal }治愈<br/> <font size="3" color="#ffffff">${item.name }</font> </h2> </td> </tr> </c:forEach> </table> </div> <div id="maina" style=" 100%; height: 250px;background-color: #4B4B4B;margin-top: 10px;"></div> </div> </body> <script type="text/javascript"> var dt={}; $(function(){ $.ajax({ url : "${pageContext.request.contextPath }/servlet/history", async : false, type : "POST", success : function(data) { dt = data; }, error : function() { alert("请求失败"); }, dataType : "json" }); var myChart = echarts.init(document.getElementById('maina')); var x = new Array(0) var y = new Array(0) for (var i = 0; i < dt.length; i+=5) { x.push(dt[i].lastUpdateTime); y.push(dt[i].confirm); } var option_1 = { title : { text : '确诊人数' },
tooltip : { trigger : 'axis' }, legend : { data : [ '确诊人数' ] }, grid : { left : '3%', right : '4%', bottom : '3%', containLabel : true }, toolbox : { feature : { saveAsImage : {} } }, xAxis : { type : 'category', boundaryGap : false, axisLabel : { interval : 0, rotate : 45, margin : 10, textStyle : { color : "#ec6869" } }, data : x }, yAxis : { type : 'value', }, series : [ { name : '确诊人数', type : 'line', stack : '总量', data : y } ] }; myChart.setOption(optionb); }); </script> <script src="js/world.js"></script> <script type="text/javascript"> var world={}; $(function(){ $.ajax({ url : "${pageContext.request.contextPath }/servlet/world", async : false, type : "POST", success : function(data) { world = data; alert("1"); }, error : function() { alert("请求失败"); }, dataType : "json" }); var myChart = echarts.init(document.getElementById('main')); var wx = new Array(0); var wy = new Array(0); var mydata = new Array(0); for (var i = 0; i < wdt.length; i++) { var d = {}; d["name"] = world[i].name; d["value"] = world[i].confirm; d["suspect"] = world[i].suspect; d["heal"] = world[i].heal; d["dead"] = world[i].dead; d["servere"] = world[i].severe; mydata.push(d); } option = { title: { sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm', left: 'center', top: 'top' }, tooltip: {
formatter : function(params) {
return params.name + '<br/>' + '确诊人数 : '
+ params.value + '<br/>' + '死亡人数 : '
+ params['data'].dead + '<br/>' + '治愈人数 : '
+ params['data'].heal + '<br/>'+ '疑似患者人数 : '
+ params['data'].suspect;
}//数据格式化
}, visualMap : { min : 0, max : 500, inRange : { color : ['#CC6633', '#ffaa85', '#bc1a19','#990000' ] }, pieces:[ {gt:5000}, {gt:1000,lte:4999}, {gte:500,lte:999}, {gte:1,lte:499}, {value:0,label:'0',color:'#ffffff'}, ], show : true //图注 }, series: [ { name: '世界疫情', type: 'map', mapType: 'world', roam: true, itemStyle:{ emphasis:{label:{show:true}} }, data: mydata, nameMap:{ "Canada": "加拿大", "Turkmenistan": "土库曼斯坦", "Saint Helena": "圣赫勒拿", "Lao PDR": "老挝", "Lithuania": "立陶宛", "Cambodia": "柬埔寨", "Ethiopia": "埃塞俄比亚", "Faeroe Is.": "法罗群岛", "Swaziland": "斯威士兰", "Palestine": "巴勒斯坦", "Belize": "伯利兹", "Argentina": "阿根廷", "Bolivia": "玻利维亚", "Cameroon": "喀麦隆", "Burkina Faso": "布基纳法索", "Aland": "奥兰群岛", "Bahrain": "巴林", "Saudi Arabia": "沙特阿拉伯", "Fr. Polynesia": "法属波利尼西亚", "Cape Verde": "佛得角", "W. Sahara": "西撒哈拉", "Slovenia": "斯洛文尼亚", "Guatemala": "危地马拉", "Guinea": "几内亚", "Dem. Rep. Congo": "刚果（金）", "Germany": "德国", "Spain": "西班牙", "Liberia": "利比里亚", "Netherlands": "荷兰", "Jamaica": "牙买加", "Solomon Is.": "所罗门群岛", "Oman": "阿曼", "Tanzania": "坦桑尼亚", "Costa Rica": "哥斯达黎加", "Isle of Man": "曼岛", "Gabon": "加蓬", "Niue": "纽埃", "Bahamas": "巴哈马", "New Zealand": "新西兰", "Yemen": "也门", "Jersey": "泽西岛", "Pakistan": "巴基斯坦", "Albania": "阿尔巴尼亚", "Samoa": "萨摩亚", "Czech Rep.": "捷克", "United Arab Emirates": "阿拉伯联合酋长国", "Guam": "关岛", "India": "印度", "Azerbaijan": "阿塞拜疆", "N. Mariana Is.": "北马里亚纳群岛", "Lesotho": "莱索托", "Kenya": "肯尼亚", "Belarus": "白俄罗斯", "Tajikistan": "塔吉克斯坦", "Turkey": "土耳其", "Afghanistan": "阿富汗", "Bangladesh": "孟加拉国", "Mauritania": "毛里塔尼亚", "Dem. Rep. Korea": "朝鲜", "Saint Lucia": "圣卢西亚", "Br. Indian Ocean Ter.": "英属印度洋领地", "Mongolia": "蒙古", "France": "法国", "Cura?ao": "库拉索岛", "S. Sudan": "南苏丹", "Rwanda": "卢旺达", "Slovakia": "斯洛伐克", "Somalia": "索马里", "Peru": "秘鲁", "Vanuatu": "瓦努阿图", "Norway": "挪威", "Malawi": "马拉维", "Benin": "贝宁", "St. Vin. and Gren.": "圣文森特和格林纳丁斯", "Korea": "韩国", "Singapore": "新加坡", "Montenegro": "黑山共和国", "Cayman Is.": "开曼群岛", "Togo": "多哥", "China": "中国", "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛", "Armenia": "亚美尼亚", "Falkland Is.": "马尔维纳斯群岛（福克兰）", "Ukraine": "乌克兰", "Ghana": "加纳", "Tonga": "汤加", "Finland": "芬兰", "Libya": "利比亚", "Dominican Rep.": "多米尼加", "Indonesia": "印度尼西亚", "Mauritius": "毛里求斯", "Eq. Guinea": "赤道几内亚", "Sweden": "瑞典", "Vietnam": "越南", "Mali": "马里", "Russia": "俄罗斯", "Bulgaria": "保加利亚", "United States": "美国", "Romania": "罗马尼亚", "Angola": "安哥拉", "Chad": "乍得", "South Africa": "南非", "Fiji": "斐济", "Liechtenstein": "列支敦士登", "Malaysia": "马来西亚", "Austria": "奥地利", "Mozambique": "莫桑比克", "Uganda": "乌干达", "Japan": "日本", "Niger": "尼日尔", "Brazil": "巴西", "Kuwait": "科威特", "Panama": "巴拿马", "Guyana": "圭亚那", "Madagascar": "马达加斯加", "Luxembourg": "卢森堡", "American Samoa": "美属萨摩亚", "Andorra": "安道尔", "Ireland": "爱尔兰", "Italy": "意大利", "Nigeria": "尼日利亚", "Turks and Caicos Is.": "特克斯和凯科斯群岛", "Ecuador": "厄瓜多尔", "U.S. Virgin Is.": "美属维尔京群岛", "Brunei": "文莱", "Australia": "澳大利亚", "Iran": "伊朗", "Algeria": "阿尔及利亚", "El Salvador": "萨尔瓦多", "C?te d'Ivoire": "科特迪瓦", "Chile": "智利", "Puerto Rico": "波多黎各", "Belgium": "比利时", "Thailand": "泰国", "Haiti": "海地", "Iraq": "伊拉克", "S?o Tomé and Principe": "圣多美和普林西比", "Sierra Leone": "塞拉利昂", "Georgia": "格鲁吉亚", "Denmark": "丹麦", "Philippines": "菲律宾", "S. Geo. and S. Sandw. Is.": "南乔治亚岛和南桑威奇群岛", "Moldova": "摩尔多瓦", "Morocco": "摩洛哥", "Namibia": "纳米比亚", "Malta": "马耳他", "Guinea-Bissau": "几内亚比绍", "Kiribati": "基里巴斯", "Switzerland": "瑞士", "Grenada": "格林纳达", "Seychelles": "塞舌尔", "Portugal": "葡萄牙", "Estonia": "爱沙尼亚", "Uruguay": "乌拉圭", "Antigua and Barb.": "安提瓜和巴布达", "Lebanon": "黎巴嫩", "Uzbekistan": "乌兹别克斯坦", "Tunisia": "突尼斯", "Djibouti": "吉布提", "Greenland": "格陵兰", "Timor-Leste": "东帝汶", "Dominica": "多米尼克", "Colombia": "哥伦比亚", "Burundi": "布隆迪", "Bosnia and Herz.": "波斯尼亚和黑塞哥维那", "Cyprus": "塞浦路斯", "Barbados": "巴巴多斯", "Qatar": "卡塔尔", "Palau": "帕劳", "Bhutan": "不丹", "Sudan": "苏丹", "Nepal": "尼泊尔", "Micronesia": "密克罗尼西亚", "Bermuda": "百慕大", "Suriname": "苏里南", "Venezuela": "委内瑞拉", "Israel": "以色列", "St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛", "Central African Rep.": "中非", "Iceland": "冰岛", "Zambia": "赞比亚", "Senegal": "塞内加尔", "Papua New Guinea": "巴布亚新几内亚", "Trinidad and Tobago": "特立尼达和多巴哥", "Zimbabwe": "津巴布韦", "Jordan": "约旦", "Gambia": "冈比亚", "Kazakhstan": "哈萨克斯坦", "Poland": "波兰", "Eritrea": "厄立特里亚", "Kyrgyzstan": "吉尔吉斯斯坦", "Montserrat": "蒙特塞拉特", "New Caledonia": "新喀里多尼亚", "Macedonia": "马其顿", "Paraguay": "巴拉圭", "Latvia": "拉脱维亚", "Hungary": "匈牙利", "Syria": "叙利亚", "Honduras": "洪都拉斯", "Myanmar": "缅甸", "Mexico": "墨西哥", "Egypt": "埃及", "Nicaragua": "尼加拉瓜", "Cuba": "古巴", "Serbia": "塞尔维亚", "Comoros": "科摩罗", "United Kingdom": "英国", "Fr. S. Antarctic Lands": "南极洲", "Congo": "刚果（布）", "Greece": "希腊", "Sri Lanka": "斯里兰卡", "Croatia": "克罗地亚", "Botswana": "博茨瓦纳", "Siachen Glacier": "锡亚琴冰川地区" } } ] }; myChart.setOption(option); });} </script> </html>