本周我们做的是web界面将数据进行可视化，首先导入以下组件
因为要用到Json，所以需要导入json
然后写bean层，对数据进行封装
package com.yiqingshuju.bean; public class Bean { private String Date; private String Province; private String Confirmed_num; private String Cured_num; private String Dead_num; private String Code; public String getDate() { return Date; } public void setDate(String date) { Date = date; } public String getProvince() { return Province; } public void setProvince(String province) { Province = province; } public String getConfirmed_num() { return Confirmed_num; } public void setConfirmed_num(String confirmed_num) { Confirmed_num = confirmed_num; } public String getCured_num() { return Cured_num; } public void setCured_num(String cured_num) { Cured_num = cured_num; } public String getDead_num() { return Dead_num; } public void setDead_num(String dead_num) { Dead_num = dead_num; } public String getCode() { return Code; } public void setCode(String code) { Code = code; } }
利用DBUtil层对数据库进行操作
package com.yiqingshuju.Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class DBUtil { //数据库URL和账号密码 public static final String connectionURL="jdbc:mysql://localhost:3306/payiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true"; public static final String username="root"; public static final String password="123456"; static Connection connection; static ResultSet rSet; static PreparedStatement sql; //数据库连接 public static Connection getConnection() { try { Class.forName("com.mysql.cj.jdbc.Driver"); return DriverManager.getConnection(connectionURL, username, password); } catch (Exception e) { // TODO: handle exception System.out.println("数据库连接失败"); e.printStackTrace(); } return null; } public static String search(String date)//查 { try { connection=getConnection(); sql=connection.prepareStatement("select * from info where Date like '"+date+"%' and City=''"); System.out.println(sql); rSet=sql.executeQuery(); //ArrayList<Things> list =new ArrayList<>(); JSONArray jsonArray=new JSONArray(); while(rSet.next()) { System.out.println(rSet.getString(3)); JSONObject json=new JSONObject(); json.put("name",rSet.getString(3) ); json.put("num", rSet.getString(5)); json.put("yisi",rSet.getString(6)); json.put("cure", rSet.getString(7)); json.put("dead", rSet.getString(8)); json.put("code", rSet.getString(9)); jsonArray.add(json); } return jsonArray.toString(); } catch (Exception e) { // TODO: handle exception return null; } } public static void main(String[] args) { search("2020-02-11"); } }
servlet代码
package com.yiqing.servlet; 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 com.yiqingshuju.Util.DBUtil; public class Servlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=UTF-8"); // String date=request.getParameter("date"); System.out.println(request.getParameter("date")); response.getWriter().write(DBUtil.search(request.getParameter("date"))); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
jsp代码
<%@page import="com.alibaba.fastjson.JSON"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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>Insert title here</title> <script src="echarts.min.js"></script> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> #one{ /*border: 1px solid black;*/ width: 1000px; height:auto; background-color: ghostwhite; margin: auto; } #main{ width:1000px; height:outo; background-color: ghostwhite; margin: auto; } .table { margin: auto; } </style> </head> <body> <div id="one"> 请输入时间：<input type="text" name="date" id="date" /> <input type="submit" value="查询" onclick="search()"> </div> <br/> <div id="main" style="width: 100%;height:400px;overflow: auto;"></div> <table class="table"> <thead class="head"> </thead> <tbody class="main"></tbody> </table> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.showLoading(); function search() { var date=$("#date").val(); alert("查找成功"); $.post( 'Servlet', {date:date}, function(msg){ var json=JSON.parse(msg); var size=json.length; var names=[]; var nums=[]; for(i=0;i<size;i++){ names.push(json[i].name); nums.push(json[i].num); i++; } myChart.hideLoading(); var option = { title: { text: $("input[name=date]").val()+'确诊人数' }, tooltip: {}, legend: { data:['确诊人数'] }, xAxis: { data: names }, yAxis: {}, series: [{ name: '确诊人数', type: 'bar', data: nums }] }; myChart.setOption(option); tr="<tr><th>省份</th><th>确诊人数</th><th>疑似人数</th><th>治愈人数</th><th>死亡人数</th><th>编码</th></tr>"; $('.head').append(tr); for(i=0;i<size;i++) $('.main').append("<tr></tr>"); $('.main tr').each(function(i){ $(this).append("<td>"+json[i].name+"</td>"); $(this).append("<td>"+json[i].num+"</td>"); $(this).append("<td>"+json[i].yisi+"</td>"); $(this).append("<td>"+json[i].cure+"</td>"); $(this).append("<td>"+json[i].dead+"</td>"); $(this).append("<td>"+json[i].code+"</td>"); }) } //"json" ); } </script> </body> </html>