zoukankan html css js c++ java

全国疫情可视化阶段1

一、要求

1.导入全国疫情数据库

2.可以按照时期查询各个省市的疫情统计表格

3.以折线图或柱状图展示某天的全国各省的确诊人数

二、思路

1.通过前台手动输入的两个时间参数来确定后台数据查询范围，并返回所要的数据值

2.折线图或者柱状图可以通过Echarts来实现，通过一些传进来的数据的格式化以及你自己设置的一些显示参数结合模板就可以了

三、编写中的问题

1.datetime类型前端参数的问题，末尾会有一个.0如何解决，可以通过字符串的格式化来解决，网上有很多类似教程

2.Echarts的使用

四、源代码

1.页面（我折线图并没有采用时间查询，只是读取了数据）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="Dao.DataDao,Service.DataService,Bean.Data"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
  <script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
  <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>  
  <script src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
    <title>Test-newsTitle</title>
  </head>
  
  <body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style=" 800px;height:600px;"></div>    
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '全国各省确诊人数'
        },
        tooltip: {},
        legend: {
            data:['确诊人数'],
            'auto',
            height:'auto'
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '确诊人数',
            type: 'bar',
            data: []
        }]
    });
    myChart.showLoading();
    var names=[];    //类别数组（实际用来盛放X轴坐标值）
    var nums=[];    //销量数组（实际用来盛放Y坐标值）
    
     // 异步加载数据
     $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "${pageContext.request.contextPath }/echarts",    //请求发送到TestServlet处
        success : function(resultJson) {
            var result= jQuery.parseJSON(resultJson);
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                for(var i=0;i<result.length;i++){
                      names.push(result[i].name);    //挨个取出类别并填入类别数组
                      nums.push(result[i].value);
                    }
                   myChart.hideLoading();    //隐藏加载动画
                   myChart.setOption({        //加载数据图表
                       xAxis: {
                           data: names
                       },
                       series: [{
                           // 根据名字对应到相应的系列
                           name: '确诊人数',
                           data: nums
                       }]
                   });
                   
            }
       },
        error : function(errorMsg) {
            //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
        }
   });
</script>

  <form  action="getdata" method="post">
            请输入开始时间和<input type="text" id="time1" name="time1" style="20%" placeholder="格式: yyyy-MM-dd hh:mm:ss" />
        -------
           请输入结束时间<input type="text" id="time2" name="time2" style="20%" placeholder="格式: yyyy-MM-dd hh:mm:ss"/>
         <button  type="submit" >查询</button>
         <a href="NewFile.jsp">点击查看疫情地图</a>
         
      </form>
  <table class="table table-hover table-striped table-bordered table-sm" id="resultshow">
      <tr>
          <th>日期</th>
          <th>省份</th>
          <th>城市</th>
          <th>确诊人数</th>
          <th>疑似病例</th>
          <th>治愈人数</th>
          <th>死亡人数</th>
      </tr>
        <%
           DataService dataService=new DataService();
           List<Data> list =DataService.getAll();    
           for(Data tl:list) { 
        %>
          <tr>
              <td><%=tl.getDate() %></td>
              <td><%=tl.getProvince() %></td>
              <td><%=tl.getCity() %></td>
              <td><%=tl.getConfirmed_num() %></td>
              <td><%=tl.getYisi_num() %></td>
              <td><%=tl.getCured_num() %></td>
              <td><%=tl.getDead_num() %></td>    
          </tr>
         <%
          }
         %>
  </table>
  </body>
</html>

test.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@page import="Bean.Data"%>
    <%@page import="Util.DBUtil"%>
    <%@page import="Dao.DataDao"%>
    <%@page import="java.util.List"%>
    <%@page import="Service.DataService"%>
    <%@page import="java.util.ArrayList"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 <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>
<title>浏览课程</title>

</head>
<body>
<%
         Object list = request.getAttribute("list");
         Object message = request.getAttribute("message");
         if(message!=null && !"".equals(message)){
    %>
         <script type="text/javascript">
              alert("<%=request.getAttribute("message")%>");
         </script>
    <%} %>
<div>
        <table class="table table-hover table-striped table-bordered table-sm" id="resultshow">
            <tr>
                <th>日期</th>
                <th>省份</th>
                <th>城市</th>
                <th>确诊人数</th>
                <th>疑似病例</th>
                <th>治愈人数</th>
                <th>死亡人数</th>
            </tr>
            
            <c:forEach var="tl" items="<%=list %>" >
                <tr>
                    <td><a>${tl.getDate()}</a></td>
                    <td><a>${tl.getProvince()}</a></td>
                    <td><a>${tl.getCity()}</a></td>
                    <td><a>${tl.getConfirmed_num()}</a></td>
                    <td><a>${tl.getYisi_num()}</a></td>
                    <td><a>${tl.getCured_num()}</a></td>
                    <td><a>${tl.getDead_num()}</a></td>            
                </tr>
            </c:forEach>
        </table>
    </div>
</body>
</html>

test2.jsp

2.Bean

package Bean;

import java.util.Date;

public class Data {
    int Id;
    Date date;
    String province;
    String City;
    String Confirmed_num;
    String Yisi_num;
    String Cured_num;
    String Dead_num;
    String Code;
    public int getId() {
        return Id;
    }
    public void setId(int id) {
        Id = id;
    }
    public Date getDate() {
        return date;
    }
    public void setDate(Date 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) {
        City = city;
    }
    public String getConfirmed_num() {
        return Confirmed_num;
    }
    public void setConfirmed_num(String confirmed_num) {
        Confirmed_num = confirmed_num;
    }
    public String getYisi_num() {
        return Yisi_num;
    }
    public void setYisi_num(String yisi_num) {
        Yisi_num = yisi_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;
    }
    public Data() {}
    public Data(Date date,String province,String City,String Confirmed_num,String Yisi_num,String Cured_num,String Dead_num,String Code) {
        super();
        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;
    }
}

Data

package Bean;

public class Mydata {
    private String name;
    private String value;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getValue() {
        return value;
    }
    public void setValue(String value) {
        this.value = value;
    }
}

Mydata

3.Dao

package Dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import Bean.Data;
import Util.DBUtil;

public class DataDao {


    public static List<Data> getdataByDate(String timeStamp1, String timeStamp2) {
        // TODO Auto-generated method stub
            //System.out.println(timeStamp1);
            Connection con = null;
            PreparedStatement pstmt = null;
            ResultSet rs = null; 
            List<Data> list = new ArrayList<>();
            try {
                con = DBUtil.getConnection();
                String sql = "select * from info where Date between ? and ? ";
                pstmt=con.prepareStatement(sql);
                pstmt.setString(1,timeStamp1);
                pstmt.setString(2,timeStamp2);
                rs = pstmt.executeQuery();
                Data data = null;
                while(rs.next())
                {
                    Timestamp date = rs.getTimestamp("Date");
                    String province = rs.getString("Province");
                    String city = rs.getString("City");
                    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 time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                    data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                    list.add(data);
                }         
            }catch(SQLException e){
                e.printStackTrace();
            }finally {
                DBUtil.closeAll(con, pstmt, rs);
            }
            return list;
       }

    public static List<Data> getAllinfo1() {
        // TODO Auto-generated method stub
        String sql = "select * from info1 where id < 34";
        List<Data> list = new ArrayList<>();
        Connection con = DBUtil.getConnection();
        Statement state = null;
        ResultSet rs = null;
        try {
            state = con.createStatement();
            rs = state.executeQuery(sql);
            Data data = null;
            while(rs.next())
            {
                
                Timestamp date = rs.getTimestamp("Date");
                String province = rs.getString("Province");
                String city = rs.getString("City");
                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 time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(rs.getTimestamp("date"));
                
                data = new Data(date,province,city,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                list.add(data);
            }         
        }catch(SQLException e){
            e.printStackTrace();
        }finally {
            DBUtil.closePart(con, state);
        }
        return list;
    }
    
}

DataDao

4.Servlet

package Servlet;

import java.io.IOException;
import java.sql.SQLException;
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 Bean.Data;
import Bean.Mydata;
import Dao.DataDao;
import Service.DataService;
import com.google.gson.Gson;

/**
 * echarts implementation class echarts
 */
@WebServlet("/echarts")
public class echarts extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public echarts() {
        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");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("1515");
        List<Data> Data = null;
        Data = DataService.getAllinfo1();
        List<Mydata> mydata = new ArrayList<Mydata>();
        for (Data data : Data) {
            Mydata info = new Mydata();
            info.setName(data.getProvince());
            info.setValue(data.getConfirmed_num());
            mydata.add(info);
        }
        Gson gson = new Gson();
        String json = gson.toJson(mydata);
        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);
    }

}

echarts

package Servlet;

import java.io.IOException;
import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
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 Bean.Data;
import Service.DataService;


/**
 * getdata implementation class getdata
 */
@WebServlet("/getdata")
public class getdata extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getdata() {
        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
        doPost(request,response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String time1 = request.getParameter("time1");
        String time2 = request.getParameter("time2");
        
        
        
        SimpleDateFormat time3 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");   
        Date date1 = null; //初始化date   
        Date date2 = null; //初始化date   
        try {   
        date1 = time3.parse(time1); //Mon Jan 14 00:00:00 CST 2013   
        date2 = time3.parse(time2);
        } catch (ParseException e) {   
        e.printStackTrace();     
        }        
        Timestamp timestamp1 = new Timestamp(date1.getTime());  
        Timestamp timestamp2 = new Timestamp(date2.getTime()); 
         int compareTo = timestamp1.compareTo(timestamp2);
         //System.out.println(timestamp1);
         if(compareTo<0)
         {
             String timeStamp1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(timestamp1);
             String timeStamp2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(timestamp2);
             //System.out.println(timeStamp1);
             List<Data> list=DataService.getdataByDate(timeStamp1,timeStamp2);
             if(list!=null)
             {
                 request.setAttribute("list",list);
                 request.getRequestDispatcher("test2.jsp").forward(request,response);
             }
             else {
                 request.setAttribute("message","当前无课程信息");
                 request.getRequestDispatcher("test2.jsp").forward(request,response);
             }
             
         }
    }

}

getdata

5.Service

package Service;

import java.util.ArrayList;
import java.util.List;
import Bean.Data;
import Dao.DataDao;

public class DataService {
    public static List<Data> getAllinfo1() {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getAllinfo1();
        return list;
    }

    public static List<Data> getdataByDate(String timeStamp1, String timeStamp2) {
        // TODO Auto-generated method stub
        List<Data> list = new ArrayList<>();
        list = DataDao.getdataByDate(timeStamp1, timeStamp2);
        //System.out.println(timestamp1);
        return list;
    }
}

DataService

6.数据库连接，这没啥好说的了，使用的典型的JBDC

7.文件目录

马赛克的是目前还没有用到的文件

五、运行截图(一开始写这个的时候.0的问题没有去解决）

注释：可能在页面文件中，有一个链接无法点击是因为还没有涉及到那一部分，

THE END

查看全文

相关阅读:
KVM切换声音关闭
 tmux 快捷键
 arp绑定网关MAC地址错误
 javascript的字符串模板
 cheerio, dom操作模块
 footable动态载入数据
 node-js访问rest api的方法
 重装eclipse要做的事
 爬虫(三)：对requests、xpath模块
 Java-基础篇（类和对象）

原文地址：https://www.cnblogs.com/xp-thebest/p/12445978.html