疫情圖表展現與時間段查詢

時間 2020-03-04

標籤疫情圖表展現時間查詢简体版

原文原文鏈接

本次的實驗目的就是：javascript

①按時間段查詢顯示省市的疫情情況css

②實現圖表的展現全國的患者人數html

第一個功能比較好實現：從前臺中獲取這兩個時間數據，在後臺進行數據的查詢，格式的轉換，找到數據庫中在這兩個區間的數據，而後將他們展現出來java

package servlet;

import java.io.IOException;
import java.util.ArrayList;

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 Dao.predao;
import Bean.Pre;

/**
 * Servlet implementation class checkfind
 */
@WebServlet("/checkfind")
public class checkfind extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public checkfind() {
        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
        request.setCharacterEncoding("utf-8");
        String btime=request.getParameter("btime");
        String etime=request.getParameter("etime");
        predao dao=new predao();
        ArrayList<Pre> list=null;
        list=dao.findtime(btime,etime);
        if(list!=null)
        {
            request.setAttribute("pres", list);
            request.getRequestDispatcher("listall.jsp").forward(request, response);
        }
        else
        {
            request.setAttribute("message", "沒有符合的信息");
            request.getRequestDispatcher("listall.jsp").forward(request, response);
        }
    }

    /**
     * @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);
    }

}

public ArrayList<Pre> findtime(String btime,String etime)
    {
        String begin="";
        String []s=btime.split("-");
        for(int i=0;i<s.length;i++)
            begin+=s[i].toString();
        
        String end="";
        String []e=etime.split("-");
        for(int i=0;i<e.length;i++)
            end+=e[i].toString();
        System.out.println(begin+" "+end);
        int bg=Integer.valueOf(begin);
        int ed=Integer.valueOf(end);
        //System.out.println(bg+" "+end);
        ArrayList<Pre> list=new ArrayList<>();
        String sql="select * from info";
        Connection con=null;
        Statement state=null;
        ResultSet rs=null;
        con=DBUtil.getConn();
        Pre bean=null;
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                int id=rs.getInt("id");
                String name=rs.getString("Province");
                String city=rs.getString("city");
                String confirmed=rs.getString("Confirmed_num");
                String cured=rs.getString("Cured_num");
                String dead=rs.getString("Dead_num");
                String date=rs.getString("Date");
                String ans="";
                String date2=date.substring(0, 10);
                String []d=date2.split("-");
                for(int i=0;i<d.length;i++)
                {
                    ans+=d[i].toString();
                }
                int k=Integer.valueOf(ans);
                System.out.println(k);
                if(k>=bg&&k<=ed) {
                    bean=new Pre(id,name,city,confirmed,cured,dead,date);
                    list.add(bean);
                }
            }
        } catch (SQLException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return list;
    }

第二個功能就藉助到：echart圖表jquery

用他的圖表要先導入echart.min.js，而後再body裏給他分出一個區域，經過他的id在js裏對他進行圖表的初始化sql

這裏我獲取的全國的信息是從servlet裏獲取的而後轉發到該jsp裏，將該信息裏的確診人數存到了一個arr數組裏數據庫

而後對於x軸上的名字進行遍歷一遍存入數據，設置她們的名字顯示是傾斜的。bootstrap

最後使用剛指定的配置項和數據顯示圖表。數組

myChart.setOption(option);

<%@ 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="Dao.predao" %>
    <%@page import="java.util.ArrayList" %>
    <%@page import="Bean.Pre" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/echarts.min.js"></script>
    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.js"></script>
<title>瀏覽需求</title>
</head>
<body>
<%
        Object message = request.getAttribute("message");
        if (message != null && !"".equals(message)) {
    %>
    <script type="text/javascript">
               alert("<%=request.getAttribute("message")%>");
    </script>
    <%
        }
    %>
<%
    predao dao=new predao();
if(request.getAttribute("pres") == null){
    ArrayList<Pre> list = dao.getall();
    request.setAttribute("pres",list);
    }
%>
<div id="main" style="height:400px"></div>
<div id="box" style="height:600px;"></div>
    <div align="center">
        <h1>各省市疫情統計表</h1>
        <br>
        技術需求名稱<input type="text" id="name" name="name">&nbsp;&nbsp;
        日期範圍<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime">
        <button type="button" class="btn btn-info" onclick="checkfind()">查詢</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-info" onclick="checkgetall()">顯示所有</button>
        <br><br>
        <table class="table">
          <thead>
            <tr bgcolor="#1E90FF">
                <th>編號</th>
              <th>日期</th>
              <th>省名</th>
              <th>市名</th>
              <th>確診人數</th>
              <th>治癒人數</th>
              <th>死亡人數</th>
            </tr>
          </thead>
          <tbody>
          <c:forEach items="${pres}" var="item">
            <tr class="active">
            <td>${item.id}</td>
              <td>${item.date}</td>
              <td>${item.name}</td>
              <td>${item.city}</td>
              <td>${item.confirmed}</td>
              <td>${item.cured}</td>
              <td>${item.dead}</td>
           </tr>
          </c:forEach>
          </tbody>
        </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="${gpres}" var="goods">
    arr[index++] = ${goods.confirmed};
</c:forEach>

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '全國疫情統計'
    },
    tooltip: {
        show: true
    },
    legend: {
        data:['患者數']
    },
    xAxis : [
        {
            type : 'category',
            axisLabel:{  
                 interval:0,//橫軸信息所有顯示  
                 rotate:40,//-30度角傾斜顯示  
                  },
            data : [
                <c:forEach items="${gpres}" var="g">
                ["${g.name}"],
                </c:forEach>
            ]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'患者數',
            type:'bar',
            data: arr
        }
    ]
};

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

//初始化ehcharts實例
var myChart2=echarts.init(document.getElementById("box"));
//指定圖表的配置項和數據
var option={
    //標題
    title:{
      text:'疫情統計'
    },
    //工具箱
    //保存圖片
    toolbox:{
        show:true,
        feature:{
            saveAsImage:{
                show:true
            }
        }
    },
    //圖例-每一條數據的名字叫銷量
    legend:{
        data:['患者數']
    },
    //x軸
    xAxis : [
        {
            type : 'category',
            axisLabel:{  
                 interval:0,//橫軸信息所有顯示  
                 rotate:40,//-30度角傾斜顯示  
                  },
            data : [
                <c:forEach items="${gpres}" var="g">
                ["${g.name}"],
                </c:forEach>
            ]
        }
    ],
    //y軸沒有顯式設置，根據值自動生成y軸
   yAxis : [
        {
            type : 'value'
        }
    ],
    //數據-data是最終要顯示的數據
    series:[{
        name:'患者數',
        type:'line',
        data:arr,
        itemStyle:{
            normal:{
              // 拐點上顯示數值
              label : {
              show: true
              },
              borderColor:'red',  // 拐點邊框顏色
              lineStyle:{                 
                width:5,  // 設置線寬
                type:'solid'  //'dotted'虛線 'solid'實線
              }
            }
          }
    }]
};
//使用剛剛指定的配置項和數據項顯示圖表
myChart2.setOption(option);


function checkfind()
{
    var name=document.getElementById("name").value;
    var btime=document.getElementById("btime").value;
    var etime=document.getElementById("etime").value;
    if(name==""&&(btime==""&&etime==""))
    {
        alert("名字或者時間區間至少寫一個！");
        return ;
    }
    else
    {
        window.location.href = "checkfind?name="+name+"&btime="+btime+"&etime="+etime;
    }
}
function checkgetall()
{
    window.location.href="listall";
}

</script>
</body>
</html>