03全国疫情统计可视化地图-补

minadukirinno

当时做这个的时候没想太多，是自己根据数据算长度画的柱状图，然后就比较难看，而且输出数据因为采用的Stack存储，需要在最开始额外压入最大长度，否则前端页面接收后又得全部存储一遍。

 

package konoha.dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Stack;

import konoha.etc.Rtn;
import konoha.util.DBUtil;

public class UniverDao {
    public static Stack<Rtn> getLogByDate(String date1, String date2) {
        Stack<Rtn> rtn = new Stack<Rtn>();
        Rtn tmp = null;
        int max = 0;
        String sql = "select * from info1 where date between \'" + date1 + " 00:00:00\' and \'" + date2 + " 23:59:59\'";
        Connection conn = DBUtil.getConn();
        Statement state = null;
        ResultSet rs = null;
        try {
            state = conn.createStatement();
            rs = state.executeQuery(sql);
            while (rs.next()) {
                tmp = new Rtn(rs.getString("Date"), rs.getString("Province"), rs.getString("City"),
                        rs.getString("Confirmed_num"), rs.getString("Cured_num"), rs.getString("Dead_num"));
                if (Integer.parseInt(rs.getString("Confirmed_num")) > max) {
                    max = Integer.parseInt(rs.getString("Confirmed_num"));
                }
                rtn.push(tmp);
            }
            tmp = new Rtn(Integer.toString(max), null, null, null, null, null);
            rtn.push(tmp);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(rs, state, conn);
        }
        return rtn;
    }
}

 

package konoha.etc;

public class Rtn {
    public String date = new String();
    public String prov = new String();
    public String city = new String();
    public String con = new String();
    public String cur = new String();
    public String dea = new String();

    public Rtn(String i1, String i2, String i3, String i4, String i5, String i6) {
        date = i1;
        prov = i2;
        city = i3;
        con = i4;
        cur = i5;
        dea = i6;
    }
}
package konoha.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 konoha.dao.UniverDao;

/**
 * Servlet implementation class LSL
 */
@WebServlet("/LSL")
public class LSL extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        request.setAttribute("Lrtn",
                UniverDao.getLogByDate(request.getParameter("day1"), request.getParameter("day2")));
        request.getRequestDispatcher("lRtn.jsp").forward(request, response);
    }

}
package konoha.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 konoha.dao.UniverDao;

/**
 * Servlet implementation class ZSL
 */
@WebServlet("/ZSL")
public class ZSL extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        request.setAttribute("Zrtn",
                UniverDao.getLogByDate(request.getParameter("zday1"), request.getParameter("zday1")));
        request.getRequestDispatcher("zRtn.jsp").forward(request, response);
    }

}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
iframe{
    border:0px;
    margin:0px;
    padding:0px;
    width:100%;
}
</style>
<body>
<div align="center" style="width:100%;">
柱状图:
<select id="zYY"><option value="2020">2020</option></select>年
<select id="zMM" onchange="dCon(\'zMM\',\'zDD\');"><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月
<select id="zDD"><option value=\'01\'>1</option><option value=\'02\'>2</option><option value=\'03\'>3</option>
<option value=\'04\'>4</option><option value=\'05\'>5</option><option value=\'06\'>6</option>
<option value=\'07\'>7</option><option value=\'08\'>8</option><option value=\'09\'>9</option>
<option value=\'10\'>10</option><option value=\'11\'>11</option><option value=\'12\'>12</option>
<option value=\'13\'>13</option><option value=\'14\'>14</option><option value=\'15\'>15</option>
<option value=\'16\'>16</option><option value=\'17\'>17</option><option value=\'18\'>18</option>
<option value=\'19\'>19</option><option value=\'20\'>20</option><option value=\'21\'>21</option>
<option value=\'22\'>22</option><option value=\'23\'>23</option><option value=\'24\'>24</option>
<option value=\'25\'>25</option><option value=\'26\'>26</option><option value=\'27\'>27</option>
<option value=\'28\'>28</option><option value=\'29\'>29</option><option value=\'30\'>30</option>
<option value=\'31\'>31</option></select>日
<input type="button" value="查询柱状图" onclick="zCon();" />
</div>
<iframe id="zC" src="ZSL?zday1=2020-01-01" height="1100" width="1800"></iframe>
<div align="center" style="width:100%;">从
<select id="lYY"><option value="2020">2020</option></select>年
<select id="lMM" onchange="dCon(\'lMM\',\'lDD\');"><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月
<select id="lDD"><option value=\'01\'>1</option><option value=\'02\'>2</option><option value=\'03\'>3</option>
<option value=\'04\'>4</option><option value=\'05\'>5</option><option value=\'06\'>6</option>
<option value=\'07\'>7</option><option value=\'08\'>8</option><option value=\'09\'>9</option>
<option value=\'10\'>10</option><option value=\'11\'>11</option><option value=\'12\'>12</option>
<option value=\'13\'>13</option><option value=\'14\'>14</option><option value=\'15\'>15</option>
<option value=\'16\'>16</option><option value=\'17\'>17</option><option value=\'18\'>18</option>
<option value=\'19\'>19</option><option value=\'20\'>20</option><option value=\'21\'>21</option>
<option value=\'22\'>22</option><option value=\'23\'>23</option><option value=\'24\'>24</option>
<option value=\'25\'>25</option><option value=\'26\'>26</option><option value=\'27\'>27</option>
<option value=\'28\'>28</option><option value=\'29\'>29</option><option value=\'30\'>30</option>
<option value=\'31\'>31</option></select>日&nbsp;到&nbsp;
<select id="l2YY"><option value="2020">2020</option></select>年
<select id="l2MM" onchange="dCon(\'l2MM\',\'l2DD\');"><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月
<select id="l2DD"><option value=\'01\'>1</option><option value=\'02\'>2</option><option value=\'03\'>3</option>
<option value=\'04\'>4</option><option value=\'05\'>5</option><option value=\'06\'>6</option>
<option value=\'07\'>7</option><option value=\'08\'>8</option><option value=\'09\'>9</option>
<option value=\'10\'>10</option><option value=\'11\'>11</option><option value=\'12\'>12</option>
<option value=\'13\'>13</option><option value=\'14\'>14</option><option value=\'15\'>15</option>
<option value=\'16\'>16</option><option value=\'17\'>17</option><option value=\'18\'>18</option>
<option value=\'19\'>19</option><option value=\'20\'>20</option><option value=\'21\'>21</option>
<option value=\'22\'>22</option><option value=\'23\'>23</option><option value=\'24\'>24</option>
<option value=\'25\'>25</option><option value=\'26\'>26</option><option value=\'27\'>27</option>
<option value=\'28\'>28</option><option value=\'29\'>29</option><option value=\'30\'>30</option>
<option value=\'31\'>31</option></select>日
<input type="button" value="查询清单" onclick="lCon();" />
</div>
<iframe id="lC" src="LSL?day1=2020-01-01&day2=2020-01-01" height="500" width="1800"></iframe>
</body>
<script>
function zCon(){
    document.getElementById("zC").setAttribute("src","ZSL?zday1="+document.getElementById("zYY").value+"-"+
            document.getElementById("zMM").value+"-"+document.getElementById("zDD").value);
}
function lCon(){
    document.getElementById("lC").setAttribute("src","LSL?day1="+document.getElementById("lYY").value+"-"+document.getElementById("lMM").value+"-"+document.getElementById("lDD").value
            +"&day2="+document.getElementById("l2YY").value+"-"+document.getElementById("l2MM").value+"-"+document.getElementById("l2DD").value
    );
}
function dCon(mName,dName){
    var mon = document.getElementById(mName).value;
    var cor="<option value=\'01\'>1</option><option value=\'02\'>2</option><option value=\'03\'>3</option><option value=\'04\'>4</option><option value=\'05\'>5</option><option value=\'06\'>6</option><option value=\'07\'>7</option><option value=\'08\'>8</option><option value=\'09\'>9</option><option value=\'10\'>10</option><option value=\'11\'>11</option><option value=\'12\'>12</option><option value=\'13\'>13</option><option value=\'14\'>14</option><option value=\'15\'>15</option><option value=\'16\'>16</option><option value=\'17\'>17</option><option value=\'18\'>18</option><option value=\'19\'>19</option><option value=\'20\'>20</option><option value=\'21\'>21</option><option value=\'22\'>22</option><option value=\'23\'>23</option><option value=\'24\'>24</option><option value=\'25\'>25</option><option value=\'26\'>26</option><option value=\'27\'>27</option><option value=\'28\'>28</option>";
    if(mon==\'01\'||mon==\'03\'||mon==\'05\'||mon==\'07\'||mon==\'08\'||mon==\'10\'||mon==\'12\'){
        cor=cor+"<option value=\'29\'>29</option><option value=\'30\'>30</option><option value=\'31\'>31</option>";
    }else if(mon==\'02\'){
        cor=cor+"<option value=\'29\'>29</option>";
    }else{
        cor=cor+"<option value=\'29\'>29</option><option value=\'30\'>30</option>";
    }
    document.getElementById(dName).innerHTML=cor;
}
</script>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="konoha.etc.Rtn" import="java.util.Stack"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center" style="background-color:#f0f0f0;">
<table id="Table0">
<tr>
    <th>日期</th><th>省份</th><th>城市</th><th>确诊</th><th>治愈</th><th>死亡</th>
</tr>
<tr>
<td colspan=\'6\'><hr /></td>
</tr>
<%
if(request.getAttribute("Lrtn")!=null){
    Stack<Rtn> res=(Stack<Rtn>)request.getAttribute("Lrtn");
    res.pop();
    while(!res.empty()){
        Rtn tmp = null;
        tmp = res.pop();
        if(!tmp.city.equals("")){
            out.print("<tr><td>"+tmp.date+"</td>"+"<td>"+tmp.prov+"</td>"+"<td>"+tmp.city+"</td>"+"<td>"+tmp.con+"</td>"+"<td>"+tmp.cur+"</td>"+"<td>"+tmp.dea+"</td></tr>");
        }
    }%>
    <%
    out.print("<tr><td colspan=\'6\' align=\'center\'><hr /></td></tr>");
}else{
    out.print("<td colspan=\'6\' align=\'center\' style=\'color:red;\'>发生未知错误</td>");
}
%>
</table>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="konoha.etc.Rtn" import="java.util.Stack"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="left">
<table id="Table0">
<tr><td colspan=\'2\'><hr /></td></tr>
<%
if(request.getAttribute("Zrtn")!=null){
    Stack<Rtn> res=(Stack<Rtn>)request.getAttribute("Zrtn");
    Rtn tmp = null;
    int max = 0;
    tmp = res.pop();
    if(Integer.parseInt(tmp.date)==0){
        out.print("<tr><td colspan=\'2\'>嗯...库里没有这天的数据...</td></tr>");
    }else{
        max=Integer.parseInt(tmp.date);
        while(!res.empty()){
            tmp = res.pop();
            if(tmp.city.equals("")){
                out.print("<tr><td>"+tmp.prov+"(确诊"+tmp.con+"人)</td>"+"<td><div style=\'background-color:red;height:10px;width:"+(Integer.parseInt(tmp.con)*1500/max)+"px;\'></div></td></tr>");
            }
        }
    }
    out.print("<tr><td colspan=\'2\' align=\'center\'><hr /></td></tr>");
}else{
    out.print("<td colspan=\'2\' align=\'center\' style=\'color:red;\'>发生未知错误</td>");
}
%>
</table>
</div>
</body>
</html>

这次因为一些原因，没考虑到用echarts之类的，而是自己通过代码实现柱状图。说实话，很丑，而且效率低下，一般工程里没人会这么用。而且也正是因为没想到用现有工具类，后面阶段的全国地图不知道该怎么展开。

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode