世界疫情展示
清明节布置的作业是要做一个web的世界疫情
设计的思路依旧是dao层函数实现对于datatime的一个搜索，然后servlet层将list转换成json，world.jsp用ajax技术实现数据读入绘图
dao：
package com.fin.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.fin.bean.yq; import com.fin.util.BaseConnection; public class CourseDao { public static List<yq> list(String time) { // 查询所有信息 String begin=""; String []s=time.split("-"); for(int i=0;i<s.length;i++) begin+=s[i].toString(); int bg=Integer.valueOf(begin); List<yq> list = new ArrayList<yq>(); // 创建集合 Connection conn = BaseConnection.getConnection(); String sql = "select * from province"; // SQL查询语句 try { PreparedStatement pst = conn.prepareStatement(sql); ResultSet rs = pst.executeQuery(); yq data = null; int index=1; while (rs.next()) { int id= rs.getInt("id");; String name = rs.getString("name"); String confirm = rs.getString("confirm"); String heal = rs.getString("heal"); String dead = rs.getString("dead"); String current = rs.getString("current"); String num=""; String date=time.substring(0, 10); String []d=date.split("-"); for(int i=0;i<d.length;i++) { num+=d[i].toString(); } int k=Integer.valueOf(num); if(k==bg&&index<=32) { index++; data = new yq(id,name,confirm,heal,dead,current,time); list.add(data); } } rs.close(); // 关闭 pst.close(); // 关闭 } catch (SQLException e1) { e1.printStackTrace(); // 抛出异常 } return list; // 返回一个集合 } }
servlet：
package com.fin.servlet; import java.io.IOException; import java.io.UnsupportedEncodingException; 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 javax.smartcardio.ResponseAPDU; import com.fin.bean.yq; import com.fin.dao.CourseDao; import com.google.gson.Gson; /** * Servlet implementation class CourseServlet */ @WebServlet("/CourseServlet") public class CourseServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public CourseServlet() { 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()); response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); this.list(request,response); } private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO 自动生成的方法存根 //yq cour = new yq(); response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); /*response.setCharacterEncoding("UTF-8"); response.setHeader("content-type","text/html;charset=UTF-8");*/ String Date = request.getParameter("time"); List<yq> list = CourseDao.list(Date); 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); } }
jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@page import="com.fin.bean.yq" %> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script src="js/echarts.js"></script> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/world.js"></script> <title>显示</title> <style> *{margin:0;padding:0} html,body{ width:100%; height:100%; } #main{ width:600px; height:450px; margin: 150px auto; border:1px solid #ddd; } /*默认长宽比0.75*/ </style> </head> <body > <br> <h1>疫情统计表</h1> <br> <br> <br> <div> <span> 日期<input class="slide-up " id="time" name="time"> <button class="clearfix" style="display:inline-block;float: centre;width:100px;height:40px" type="button" onclick="checkfind()">查询</button> </span><br><br> </div> <div id="main"> </div> <div id="table"> </div> <script type="text/javascript"> function randomValue() { return Math.round(Math.random()*1000); } var dt; var data = new Array(0); function checkfind() { var time=document.getElementById("time").value; if(time=="") { alert("请输入时间！"); return ; } else{ time = $("#time").val(); $.ajax({ url : "CourseServlet", async : true, type : "POST", data : { "time" : time }, dataType : "json", success : function(json) { for (var i = 0; i < json.length; i++) { var d = {}; d["name"] = json[i].name; d["value"] = json[i].confirm; d["yisi_num"] = json[i].heal; d["cured_num"] = json[i].current; d["dead_num"] = json[i].dead; data.push(d); } var myChart = echarts.init(document.getElementById('main')); function randomValue() { return Math.round(Math.random()*1000); } var optionMap = { backgroundColor : '#FFFFFF', title : { text : '世界疫情', subtext : '', x : 'center' }, tooltip : { formatter : function(params) { return params.name + '<br/>' + '确诊人数 : ' + params.value + '<br/>' + '死亡人数 : ' + params['data'].dead_num + '<br/>' + '治愈人数 : ' + params['data'].cured_num + '<br/>'+ '疑似患者人数 : ' + params['data'].yisi_num; } }, //左侧小导航图标 visualMap: { min: 0, max: 35000, left: 'left', top: 'bottom', text: ['高','低'],//取值范围的文字 inRange: { color: ['#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']//取值范围的颜色 }, show:true//图注 }, //配置属性 series : [ { type : 'map', mapType : 'world', label : { show : true }, zoom: 1, //当前视角的缩放比例 roam: true, //是否开启平游或缩放 scaleLimit: { //滚轮缩放的极限控制 min: 1, max: 2 }, data : data, nameMap : { 'Singapore Rep.':'新加坡', 'Dominican Rep.':'多米尼加', 'Palestine':'巴勒斯坦', 'Bahamas':'巴哈马', 'Timor-Leste':'东帝汶', 'Afghanistan':'阿富汗', 'Guinea-Bissau':'几内亚比绍', "Côte d'Ivoire":'科特迪瓦', 'Siachen Glacier':'锡亚琴冰川', "Br. Indian Ocean Ter.":'英属印度洋领土', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷', 'Armenia':'亚美尼亚', 'French Southern and Antarctic Lands':'法属南半球和南极领地', 'Australia':'澳大利亚', 'Austria':'奥地利', 'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索', 'Bangladesh':'孟加拉国', 'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马', 'Bosnia and Herz.':'波斯尼亚和黑塞哥维那', 'Belarus':'白俄罗斯', 'Belize':'伯利兹', 'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳', 'Central African Rep.':'中非', 'Canada':'加拿大', 'Switzerland':'瑞士', 'Chile':'智利', 'China':'中国', 'Ivory Coast':'象牙海岸', 'Cameroon':'喀麦隆', 'Dem. Rep. Congo':'刚果民主共和国', 'Congo':'刚果', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加', 'Cuba':'古巴', 'N. Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Rep.':'捷克', 'Germany':'德国', 'Djibouti':'吉布提', 'Denmark':'丹麦', 'Algeria':'阿尔及利亚', 'Ecuador':'厄瓜多尔', 'Egypt':'埃及', 'Eritrea':'厄立特里亚', 'Spain':'西班牙', 'Estonia':'爱沙尼亚', 'Ethiopia':'埃塞俄比亚', 'Finland':'芬兰', 'Fiji':'斐', 'Falkland Islands':'福克兰群岛', 'France':'法国', 'Gabon':'加蓬', 'United Kingdom':'英国', 'Georgia':'格鲁吉亚', 'Ghana':'加纳', 'Guinea':'几内亚', 'Gambia':'冈比亚', 'Guinea Bissau':'几内亚比绍', 'Eq. Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那', 'Guyana':'圭亚那', 'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地', 'Hungary':'匈牙利', 'Indonesia':'印度尼西亚', 'India':'印度', 'Ireland':'爱尔兰', 'Iran':'伊朗', 'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列', 'Italy':'意大利', 'Jamaica':'牙买加', 'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦', 'Kenya':'肯尼亚', 'Kyrgyzstan':'吉尔吉斯斯坦', 'Cambodia':'柬埔寨', 'Korea':'韩国', 'Kosovo':'科索沃', 'Kuwait':'科威特', 'Lao PDR':'老挝', 'Lebanon':'黎巴嫩', 'Liberia':'利比里亚', 'Libya':'利比亚', 'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛', 'Luxembourg':'卢森堡', 'Latvia':'拉脱维亚', 'Morocco':'摩洛哥', 'Moldova':'摩尔多瓦', 'Madagascar':'马达加斯加', 'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里', 'Myanmar':'缅甸', 'Montenegro':'黑山', 'Mongolia':'蒙古', 'Mozambique':'莫桑比克', 'Mauritania':'毛里塔尼亚', 'Malawi':'马拉维', 'Malaysia':'马来西亚', 'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔', 'Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰', 'Norway':'挪威', 'Nepal':'尼泊尔', 'New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦', 'Panama':'巴拿马', 'Peru':'秘鲁', 'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰', 'Puerto Rico':'波多黎各', 'Dem. Rep. Korea':'朝鲜', 'Portugal':'葡萄牙', 'Paraguay':'巴拉圭', 'Qatar':'卡塔尔', 'Romania':'罗马尼亚', 'Russia':'俄罗斯', 'Rwanda':'卢旺达', 'W. Sahara':'西撒哈拉', 'Saudi Arabia':'沙特阿拉伯', 'Sudan':'苏丹', 'S. Sudan':'南苏丹', 'Senegal':'塞内加尔', 'Solomon Is.':'所罗门群岛', 'Sierra Leone':'塞拉利昂', 'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰', 'Somalia':'索马里', 'Serbia':'塞尔维亚', 'Suriname':'苏里南', 'Slovakia':'斯洛伐克', 'Slovenia':'斯洛文尼亚', 'Sweden':'瑞典', 'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得', 'Togo':'多哥', 'Thailand':'泰国', 'Tajikistan':'塔吉克斯坦', 'Turkmenistan':'土库曼斯坦', 'East Timor':'东帝汶', 'Trinidad and Tobago':'特里尼达和多巴哥', 'Tunisia':'突尼斯', 'Turkey':'土耳其', 'Tanzania':'坦桑尼亚', 'Uganda':'乌干达', 'Ukraine':'乌克兰', 'Uruguay':'乌拉圭', 'United States':'美国', 'Uzbekistan':'乌兹别克斯坦', 'Venezuela':'委内瑞拉', 'Vietnam':'越南', 'Vanuatu':'瓦努阿图', 'West Bank':'西岸', 'Yemen':'也门', 'South Africa':'南非', 'Zambia':'赞比亚', 'Zimbabwe':'津巴布韦' } } ] }; //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); myChart.on('click', function (params) { alert(params.name); }); alert("成功！"); //使用制定的配置项和数据显示图表 createShowingTable(json); }, error : function() { alert("请求失败"); }, }); } } /* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/ function createShowingTable(json) { var tableStr = "<table id='gradient-style' style='background-color:pink;table border='10' cellspacing='10'cellpadding='10'; width:25%; height:100%'>"; tableStr = tableStr + "<tr>" +"<td >国家</td>" +"<td >确诊人数</td>" +"</tr>"; var len = data.length; for ( var i = 0; i < len; i++) { tableStr = tableStr + "<tr>" +"<td>"+ json[i].name +"</td>" +"<td>"+ json[i].confirm + "</td>" +"</tr>"; } tableStr = tableStr + "</table>"; //添加到div中 $("#table").html(tableStr);1 } </script> </body> </html>
