《软件工程》个人作业2----全国疫情可视化地图
第一阶段目标：
导入全国疫情数据库payiqing.sql（MySQL数据库）。
可以按照时期查询各个省市的疫情统计表格。
以折线图或柱状图展示某天的全国各省的
第二阶段目标：疫情统计地图可视化：可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。
在全国地图上使用不同的颜色代表大概确诊人数区间，颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
鼠标移到每个省份会高亮显示、点击鼠标会显示该省具体疫情情况、点击某个省份显示该省疫情的具体情况
显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；确诊人数。
第三阶段目标：鼠标移到每个市会高亮显示，并且显示简单的数据；
数据下钻：单击各个省可以下钻到各个地市的数据显示。
2.截图：
3.代码：
Main.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>疫情</title> </head> <framesetrows="15%,*"> <framesrc="top.jsp"> <framesetcols="12%,*"> <framesrc="main_left.jsp"> <framesrc="main_right.jsp"name="main_right"> </frameset> </frameset> <body > </body> </html> Cha.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%--设置页面的脚本支持语言为java—导入util包中的类—申明编码方式为UTF-8--%> <%@ page import="java.sql.*"%> <%--导入java中的sql包--%> <%@page import="com.javao.msg.DBUtil"%> <% request.setCharacterEncoding("UTF-8"); //设置响应的编码为UTF-8 response.setCharacterEncoding("UTF-8"); //设置响应的编码为UTF-8 %> <% String path = request.getContextPath(); //相对Path设置 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; //相对Path设置 %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%--文档声明--%> <html> <head> <base href="<%=basePath%>"> <%--设置基础路径,basepath为变量--%> <title>疫情</title> <%--页面标题--%> <script src="js/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '疫情情况' }, tooltip: {}, legend: { data:['人数'] }, xAxis: { data: ["湖北省","广东省","浙江省","河南省","安徽省","江西省","江苏省","重庆市","山东省","四川省","北京市","黑龙江省","上海市","河北省","陕西省","广西壮族自治区","云南省","海南省","山西省","辽宁省","贵州省","天津市","甘肃省","吉林省","内蒙古自治区","宁夏回族自治区","新疆维吾尔自治区","青海省","西藏自治区省"] }, yAxis: {}, series: [{ name: '人数', type: 'bar', data: [33366,1219,1131,1135,946,889,844,543,505,497,436,378,342,306,272,251,222,219,154,151,131,124,116,107,86,83,60,59,58] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> <% String Date = request.getParameter("Date"); Connection conn = null; //定义静态数据库连接 Statement stat = null; //滞空stat。 ResultSet rs = null; //将rs滞空。 conn = DBUtil.getConnection(); stat = conn.createStatement(); rs = stat.executeQuery("select * from info where Date like '%" + Date + "%'");//查找data表name字段 %> <br> <div align="center"> <h1 style="font-family:KaiTi;color:OrangeRed">信息如下</h1> </div> <br> <table align="center" width="1000" border="100" cellSpacing=1 style="font-size:15pt;border:dashed 1pt"> <%--表格宽度450--%> <tr> <td width="110">序号</td> <td width="600">日期</td> <td width="300">省份</td> <td width="300">城市</td> <td width="400">总确诊数</td> <td width="211">疑似病例</td> <td width="400">治愈病例</td> <td width="400">死亡病例</td> </tr> <% while(rs.next()) { out.print("<tr>"); out.print("<td>" + rs.getString("id") + "</td>"); out.print("<td>" + rs.getString("Date") + "</td>"); //输出name内容 out.print("<td>" + rs.getString("Province") + "</td>"); //输出gender内容 out.print("<td>" + rs.getString("City") + "</td>"); out.print("<td>" + rs.getString("Confirmed_num") + "</td>"); //输出major内容 out.print("<td>" + rs.getString("Yisi_num") + "</td>"); out.print("<td>" + rs.getString("Cured_num") + "</td>"); //输出gender内容 out.print("<td>" + rs.getString("Dead_num") + "</td>"); %> <% out.print("</tr>"); } %> </table> <br> <% if(rs != null) { rs.close(); //关闭结果集，但是rs还是有null值。 rs = null; //将rs滞空。 } if(stat != null) //判断stat是否滞空。 { stat.close(); //关闭stat。 stat = null; //滞空stat。 } if(conn != null) { conn.close(); //关闭数据库连接 conn = null; } %> </body> </html> Cha1.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%--设置页面的脚本支持语言为java—导入util包中的类—申明编码方式为UTF-8--%> <%@ page import="java.sql.*"%> <%--导入java中的sql包--%> <%@page import="com.javao.msg.DBUtil"%> <% request.setCharacterEncoding("UTF-8"); //设置响应的编码为UTF-8 response.setCharacterEncoding("UTF-8"); //设置响应的编码为UTF-8 %> <% String path = request.getContextPath(); //相对Path设置 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; //相对Path设置 %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%--文档声明--%> <html> <head> <base href="<%=basePath%>"> <%--设置基础路径,basepath为变量--%> <title>按日期查询</title> <%--页面标题--%> </head> <body> <% String Date = request.getParameter("Date"); Connection conn = null; //定义静态数据库连接 Statement stat = null; //滞空stat。 ResultSet rs = null; //将rs滞空。 conn = DBUtil.getConnection(); stat = conn.createStatement(); rs = stat.executeQuery("select * from info where Date like '%" + Date + "%'");//查找data表name字段 %> <br> <div align="center"> <h1 style="font-family:KaiTi;color:OrangeRed">符合条件的信息</h1> </div> <hr noshade> <br> <table align="center" width="1000" border="100" cellSpacing=1 style="font-size:15pt;border:dashed 1pt"> <%--表格宽度450--%> <tr> <td width="110">序号</td> <td width="600">日期</td> <td width="300">省份</td> <td width="300">城市</td> <td width="400">总确诊数</td> <td width="211">疑似病例</td> <td width="400">治愈病例</td> <td width="400">死亡病例</td> </tr> <% while(rs.next()) { out.print("<tr>"); out.print("<td>" + rs.getString("id") + "</td>"); out.print("<td>" + rs.getString("Date") + "</td>"); //输出name内容 out.print("<td>" + rs.getString("Province") + "</td>"); //输出gender内容 out.print("<td>" + rs.getString("City") + "</td>"); out.print("<td>" + rs.getString("Confirmed_num") + "</td>"); //输出major内容 out.print("<td>" + rs.getString("Yisi_num") + "</td>"); out.print("<td>" + rs.getString("Cured_num") + "</td>"); //输出gender内容 out.print("<td>" + rs.getString("Dead_num") + "</td>"); %> <% out.print("</tr>"); } %> </table> <br> <% if(rs != null) { rs.close(); //关闭结果集，但是rs还是有null值。 rs = null; //将rs滞空。 } if(stat != null) //判断stat是否滞空。 { stat.close(); //关闭stat。 stat = null; //滞空stat。 } if(conn != null) { conn.close(); //关闭数据库连接 conn = null; } %> </body> </html> Show.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%--设置页面的脚本支持语言为java—导入util包中的类—申明编码方式为UTF-8--%> <%@ page import="java.sql.*"%> <%--导入java中的sql包--%> <%@page import="com.javao.msg.DBUtil"%> <% request.setCharacterEncoding("UTF-8"); //设置响应的编码为UTF-8 response.setCharacterEncoding("UTF-8"); //设置响应的编码为UTF-8 %> <% String path = request.getContextPath(); //相对Path设置 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; //相对Path设置 %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%--文档声明--%> <html> <head> <title>疫情</title> <%--页面标题--%> </head> <body> <% String Date = request.getParameter("Date"); Connection conn = null; //定义静态数据库连接 Statement stat = null; ResultSet rs = null; //将rs滞空。 conn = DBUtil.getConnection(); stat = conn.createStatement(); rs = stat.executeQuery("select * from info"); //查找data表 %> <% %> <% %> <br> <form action="cha.jsp" method="post"> <%--post方法跳转到select_for_age.jsp文件--%> <h2 align="center">按日期查询: <input type="text" name="Date" value="" title="不能为空" ></input> <input type="submit" value="查询"/> <br> </h2> </form> <% if(rs != null) { rs.close(); //关闭结果集，但是rs还是有null值。 rs = null; //将rs滞空。 } if(stat != null) { stat.close(); //关闭stat。 stat = null; //滞空stat。 } if(conn != null) { conn.close(); //关闭数据库连接 conn = null; } %> </body> </html>
