zoukankan html css js c++ java

全国疫情可视化地图（一）

第一阶段目标：

导入全国疫情数据库payiqing.sql（MySQL数据库）。
可以按照时期查询各个省市的疫情统计表格。
以折线图或柱状图展示某天的全国各省的疫情统计情况。

实现过程：

源代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1">
<title>全国疫情统计可视化地图</title>
<link rel="stylesheet" href="layui/layui.css">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">全国疫情统计可视化地图</div>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" >
                    <li class="layui-nav-item"><a href="listall.jsp" target="frame">疫情查询</a></li>
                    <li class="layui-nav-item"><a href="Chart"     target="frame">全国疫情柱状图统计</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <iframe name="frame" width="100%" height="100%"
                style="border: 1px solid #CCC;"></iframe>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            全国疫情统计可视化地图
        </div>
    </div>

    <script src="layui/layui.all.js"></script>
    <script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element; 
});
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="chart/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height:400px"></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};
    </c:forEach>

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '全国疫情统计'
        },
        tooltip: {
            show: true
        },
        legend: {
            data:['患者数']
        },
        xAxis : [
            {
                type : 'category',
                data : [
                    <c:forEach items="${pres}" var="g">
                    ["${g.name}"],
                    </c:forEach>
                ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'患者数',
                type:'bar',
                data: arr
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浏览需求</title>
</head>
<body>
<%
        Object message = request.getAttribute("message");
        if (message != null && !"".equals(message)) {
    %>
    <script type="text/javascript">
               alert("<%=request.getAttribute("message")%>");
    </script>
    <%
        }
    %>
    <div align="center">
        <h1>各省市疫情统计表</h1>
        <br>
        日期范围<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime">
        <button type="button" class="btn btn-info" onclick="checkfind()">查询</button>    
        <br><br>
        <table>
          <thead>
            <tr>
                <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">

function checkfind()
{
    var btime=document.getElementById("btime").value;
    var etime=document.getElementById("etime").value;
    if(btime==""||etime==""||(btime==""&&etime==""))
    {
        alert("请填写时间");
        return ;
    }
    else
    {
        window.location.href = "checkfind?btime="+btime+"&etime="+etime;
    }
}

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

2、后台部分

Pre.java

package entity;

public class Pre {
    private int id;
    private String name;
    private String city;
    private String confirmed;
    private String cured;
    private String dead;
    private String date;
    
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getConfirmed() {
        return confirmed;
    }
    public void setConfirmed(String confirmed) {
        this.confirmed = confirmed;
    }
    public String getCured() {
        return cured;
    }
    public void setCured(String cured) {
        this.cured = cured;
    }
    public String getDead() {
        return dead;
    }
    public void setDead(String dead) {
        this.dead = dead;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }
    
    public Pre() {
        super();
    }
    public Pre(int id, String name, String city, String confirmed, String cured, String dead, String date) {
        super();
        this.id = id;
        this.name = name;
        this.city = city;
        this.confirmed = confirmed;
        this.cured = cured;
        this.dead = dead;
        this.date = date;
    }
    public Pre(String name,String confirmed) {
        super();
        this.name = name;
        this.confirmed = confirmed;

    }
    
}

predao.java

package dao;

import java.sql.*;
import java.util.ArrayList;

import entity.Pre;
import util.DBUtil;

public class predao {
    public ArrayList<Pre> getquanguo()
    {
        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;
        int flag=0;
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                String name=rs.getString("Province");
                String confirmed=rs.getString("Confirmed_num");
                bean=new Pre(name,confirmed);
                list.add(bean);
                if(name.equals("西藏自治区")){
                    flag=1;
                }
                if(flag==1)
                    break;
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return list;
    }
    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;
    }
}

Chart.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 entity.Pre;

/**
 * Servlet implementation class Chart
 */
@WebServlet("/Chart")
public class Chart extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Chart() {
        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");
        predao dao=new predao();
        ArrayList<Pre> list=dao.getquanguo();
        request.setAttribute("pres", list);
        request.getRequestDispatcher("chart.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);
    }

}

checkfind.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 entity.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=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);
    }

}

DBUtil.java

package util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBUtil {
    
    private static final String db_url="jdbc:mysql://localhost:3306/mmm?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true";
    public static String db_user = "root";
    public static String db_pass = "123456";
    
    public static Connection getConn () {
        Connection conn = null;
        
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(db_url, db_user, db_pass);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return conn;
    }
    
    
    public static void close (Statement state, Connection conn) {
        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    
    public static void close (ResultSet rs, Statement state, Connection conn) {
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

效果展示：

查看全文

相关阅读:
第三十五篇 os模块、sys模块、json模块、pickle模块
 第三十三篇包
 <词云图>疾风剑豪-亚索词云图
 <爬虫>常见网址的爬虫整理
 <爬虫>反反爬虫的各种知识
 <爬虫>崔庆才的爬虫课
 <随便写>番茄工作法笔记
 <就业指导>为了找到更好的工作
 <人事面试>人事面试整理
 <面试题>面试题整理(101-200)

原文地址：https://www.cnblogs.com/charles-s/p/13087510.html

全国疫情可视化地图 （一）

全国疫情可视化地图（一）