全國疫情統計可視化地圖（1）

時間  2020-06-09
標籤 全國 疫情 統計 可視化 地圖 简体版
原文   原文鏈接

 

 

第一階段運行結果javascript

 

 

 

 

 

 

 

 

  主要是根據 https://www.echartsjs.com/zh/index.html  上提供的表格模板。引入下載好的 echarts.min.js。而後其餘的思路和平時的同樣。css

將模板中的數據改成本身從servlet中傳來的數據便可。html

 

<%@ 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.bean.Data" %>
<!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="echarts.min.js"></script>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="bootstrap.js"></script>
<title>顯示</title>

</head>

<body >
<br>
<h1>疫情統計表</h1>
<div id="main" style="height:400px"></div>
<div id="main2" style="height:600px;"></div>
<div>
<span> 日期<input class="slide-up " type="date" id="btime" name="btime">-<input class="slide-up " type="date" id="etime" name="etime">
        <button type="button" class="btn btn-info" onclick="checkfind()">查詢</button>&nbsp;&nbsp;&nbsp;&nbsp;
 </span><br><br>
    <table id="gradient-style" style="background-color:blue; width:100%; height:100%">

        <tr>

            <td>編號</td>

            <td>省份</td>

            <td>地區</td>
            
            <td>確診人數</td>
            
            <td>YiSi人數</td>
            
            <td>治癒人數</td>

            <td>死亡人數</td>
            
            <td>總人數</td>
        </tr>

        <c:forEach items="${list}" var="item">

            <tr>

                <td>${item.id }</td>

                <td>${item.province }</td>

                <td>${item.city }</td>
                
                <td>${item.confirmed_num }</td>
                
                <td>${item.yisi_num }</td>
                
                <td>${item.cured_num}</td>
                
                <td>${item.dead_num }</td>
                
                <td>${item.code }</td>

            </tr>

        </c:forEach>

    </table>
    </div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${pres}" var="goods"> arr[index++] = ${goods.confirmed_num}; </c:forEach>

// 指定圖表的配置項和數據
var option = { title: { text: '全國疫情統計(柱狀圖)' }, tooltip: { show: true }, legend: { data:['患者數'] }, xAxis : [ { type : 'category', axisLabel:{ interval:0, rotate:40, }, data : [ <c:forEach items="${pres}" var="g"> ["${g.province}"], </c:forEach>
 ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'患者數', type:'bar', data: arr } ] }; // 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option); var myChart2=echarts.init(document.getElementById("main2")); var option={ title:{ text:'全國疫情統計(折線圖)' }, toolbox:{ show:true, feature:{ saveAsImage:{ show:true } } }, legend:{ data:['患者數'] }, xAxis : [ { type : 'category', axisLabel:{ interval:0, rotate:40, }, data : [ <c:forEach items="${pres}" var="g"> ["${g.province}"], </c:forEach>
 ] } ], yAxis : [ { type : 'value' } ], series:[{ name:'患者數', type:'line', data:arr, itemStyle:{ normal:{ label : { show: true }, borderColor:'blue', lineStyle:{ width:5, type:'solid' } } } }] }; //使用前面指定的配置項和數據項顯示圖表
myChart2.setOption(option); </script>
<script type="text/javascript">
function checkfind() { var stime=document.getElementById("btime").value; var etime=document.getElementById("etime").value; if(btime==""&&etime=="") { alert("請輸入時間！"); return ; } else { window.location.href = "ShowDataServlet?name="+name+"&stime="+stime+"&etime="+etime; } } </script>

</body>
</html>
HTML

 

 

package com.bean; public class Data { private int id; private String Date; private String Province; private String City; private String Confirmed_num; private String Yisi_num; private String Cured_num; private String Dead_num; private String Code; public int getId() { return id; } public void SetId(int id) { this.id=id; } public String getDate() { return Date; } public void SetDate(String Date) { this.Date = Date; } public String getProvince() { return Province; } public void SetProvince(String Province) { this.Province = Province; } public String getCity() { return City; } public void SetCity(String City) { this.City = City; } public String getConfirmed_num() { return Confirmed_num; } public void SetConfirmed_num(String Confirmed_num) { this.Confirmed_num = Confirmed_num; } public String getYisi_num() { return Yisi_num; } public void SetYisi_num(String Yisi_num) { this.Yisi_num = Yisi_num; } public String getCured_num() { return Cured_num; } public void SetCured_num(String Cured_num) { this.Cured_num = Cured_num; } public String getDead_num() { return Dead_num; } public void SetDead_num(String Dead_num) { this.Dead_num = Dead_num; } public String getCode() { return Code; } public void SetCode(String Code) { this.Code = Code; } public Data(int id,String Date,String Province,String City,String Confirmed_num,String Yisi_num,String Cured_num,String Dead_num,String Code) { this.id=id; this.Date = Date; this.Province = Province; this.City = City; this.Confirmed_num = Confirmed_num; this.Yisi_num = Yisi_num; this.Cured_num = Cured_num; this.Dead_num = Dead_num; this.Code = Code; } public Data(int id,String Province,String City,String Confirmed_num,String Yisi_num,String Cured_num,String Dead_num,String Code) { this.id=id; this.Province = Province; this.City = City; this.Confirmed_num = Confirmed_num; this.Yisi_num = Yisi_num; this.Cured_num = Cured_num; this.Dead_num = Dead_num; this.Code = Code; } public Data(int id,String Date,String Province,String Confirmed_num,String Cured_num,String Dead_num,String Code) { this.id=id; this.Date = Date; this.Province = Province; this.Confirmed_num = Confirmed_num; this.Cured_num = Cured_num; this.Dead_num = Dead_num; this.Code = Code; } public Data(String Date,String Province,String Confirmed_num,String Cured_num,String Dead_num,String Code) { this.Date = Date; this.Province = Province; this.Confirmed_num = Confirmed_num; this.Cured_num = Cured_num; this.Dead_num = Dead_num; this.Code = Code; } public Data(int id ,String Date,String Province,String Code) { this.id=id; this.Date = Date; this.Province = Province; this.Code = Code; } }
com.bean

 

    這裏有一點就是，由於在HTML裏 input中datatime類型在瀏覽器中並無日曆的插件，容易致使日期格式錯誤。可是數據庫中的日期格式爲xx-xx-xx xx:xx:xx 。不易進行查找比較。因此在dao層裏，直接將輸入的時間轉化成int類型進行比較。
java

package com.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.bean.*; import com.jdbc.Util; public class Dao { public List<Data> dlist(String sDate,String eDate) { // 查詢全部信息
 String begin=""; String []s=sDate.split("-"); for(int i=0;i<s.length;i++) begin+=s[i].toString(); String end=""; String []e=eDate.split("-"); for(int i=0;i<e.length;i++) end+=e[i].toString(); int bg=Integer.valueOf(begin); int ed=Integer.valueOf(end); List<Data> list = new ArrayList<Data>(); // 建立集合
        Connection conn = Util.getConn(); String sql = "select * from info "; // SQL查詢語句

        try { PreparedStatement pst = conn.prepareStatement(sql); ResultSet rs = pst.executeQuery(); Data data = null; while (rs.next()) { int id= rs.getInt("id");; String Province = rs.getString("Province"); 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String Date=rs.getString("Date"); String num=""; String date=Date.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&&k<=ed) { data = new Data(id,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); } list.add(data); } rs.close(); // 關閉
 pst.close(); // 關閉
 } catch (SQLException e1) { e1.printStackTrace(); // 拋出異常
 } return list; // 返回一個集合
 } public List<Data> pres() { // 查詢全部信息
 List<Data> list = new ArrayList<Data>(); Connection conn = Util.getConn(); String sql = "select * from info"; // SQL查詢語句
        
        try { PreparedStatement pst = conn.prepareStatement(sql); ResultSet rs = pst.executeQuery(); Data data = null; int index=0; while (rs.next()) { index++; int id= rs.getInt("id");; String Province = rs.getString("Province"); 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String Date=rs.getString("Date"); if(index<=32) { data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); list.add(data); } } rs.close(); // 關閉
 pst.close(); // 關閉
 } catch (SQLException e1) { e1.printStackTrace(); // 拋出異常
 } return list; // 返回一個集合
 } public Data SelectAll() { // 根據ID進行查詢
        String sql = "select * from info "; Connection conn = Util.getConn(); Statement state = null; ResultSet rs = null; Data data = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); while (rs.next()) { int id= rs.getInt("id");; String Province = rs.getString("Province"); 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"); String Code = rs.getString("Code"); String City = rs.getString("City"); String Date=rs.getString("Date"); data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code); } } catch (Exception e) { e.printStackTrace(); } finally { Util.close(rs, state, conn); } return data; } }
com.dao

 

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 javax.servlet.http.HttpSession; import com.dao.Dao; import com.bean.*; @WebServlet("/ShowDataServlet") public class ShowDataServlet extends HttpServlet { // 顯示所有數據



    private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); String sDate=req.getParameter("stime"); String eDate=req.getParameter("etime"); Dao dao = new Dao(); List<Data> list=null; list=dao.dlist(sDate, eDate); req.setAttribute("list",list); req.getRequestDispatcher("AllDataServlet").forward(req, resp); } }
ShowDateServlet

 

package com.servlet; import java.io.IOException; 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.servlet.http.HttpSession; import com.bean.Data; import com.dao.Dao; @WebServlet("/AllDataServlet") public class AllDataServlet extends HttpServlet { // 顯示所有數據

 

    private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); Dao dao = new Dao(); List<Data> pres=null; pres=dao.pres(); req.setAttribute("pres",pres); req.getRequestDispatcher("ShowData.jsp").forward(req, resp); } }
AllDateServlet
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程