可视化图表查询

1. 图形的表示使用了ECharts 

2.数据库采用老师提供的payiqing.sql

3.在编写程序的过程中，将读取的数据导入到Dateset 的source遇到了困难，最开始想要用 <c:foreach> </c:foreach>

遍历将数据导入，最后改变了思路,在jsp中直接调用Java代码 ，使用request来获取信息，通过遍历来导入数据。

4.对于ECharts 的js 文件下载：

在官网下载：https://www.echartsjs.com/zh/index.html(最好存放在js文件夹内，便于查找引用)

源码展示：
Bean

package com.Bean;

public class infos {
    private String Date;
    private String Confirmed_num;
    private String city;
    private String cure;
    private String dead;

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getCure() {
        return cure;
    }

    public void setCure(String cure) {
        this.cure = cure;
    }

    public String getDead() {
        return dead;
    }

    public void setDead(String dead) {
        this.dead = dead;
    }

    public String getDate() {
        return Date;
    }

    public void setDate(String date) {
        Date = date;
    }

    public String getConfirmed_num() {
        return Confirmed_num;
    }

    public void setConfirmed_num(String confirmed_num) {
        Confirmed_num = confirmed_num;
    }

    public infos(String date, String confirmed_num) {
        super();
        Date = date;
        Confirmed_num = confirmed_num;
    }

    public infos(String date, String confirmed_num, String city, String cure, String dead) {
        super();
        Date = date;
        Confirmed_num = confirmed_num;
        this.city = city;
        this.cure = cure;
        this.dead = dead;
    }

}

Dao

package com.Dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.Bean.infos;
import com.DBUtil.DBUtil;

public class Dao {

    public static List<infos> search2(String name) throws Exception {
        // TODO Auto-generated method stub
        Connection conn = DBUtil.getConn();
        List<infos> list = new ArrayList<infos>();
        Statement state = null;
        // sql 语句查询的顺序不能颠倒
        String sql = "select * from info where  Date like '%" + name + "%'";
        state = conn.createStatement();
        ResultSet rs = state.executeQuery(sql);
        System.out.println("666");
        infos info = null;
        while (rs.next()) {
            String Confirmed_num = rs.getString("Confirmed_num");
            String Pr = rs.getString("Province");
            String city = rs.getString("City");
            String cure = rs.getString("Cured_num");
            String dead = rs.getString("Cured_num");
            info = new infos(Pr, Confirmed_num, city, cure, dead);
            list.add(info);
        }
        return list;
    }

}

Servlet

package com.Servlet;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
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 com.Bean.info;
import com.Bean.infos;
import com.Dao.Dao;

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

    /**
     * @see HttpServlet#HttpServlet()
     */
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");

        String method = req.getParameter("method");
        if (method.equals("search")) {
            try {
                search(req, resp);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }

    private void search(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        // TODO Auto-generated method stub
        try {
            req.setCharacterEncoding("UTF-8");
        } catch (UnsupportedEncodingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        String name = req.getParameter("name");

        List<infos> list = Dao.search2(name);
        req.setAttribute("list", list);
        req.getRequestDispatcher("show.jsp").forward(req, resp);
    }
}

数据库连接代码省略

jsp代码

show.jsp

<%@ 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.infos"%>
<%@page import="java.util.List"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <%
        request.setCharacterEncoding("utf-8");
        List<infos> list = (List<infos>) request.getAttribute("list");
        int i = 0;
    %>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style=" 1200px; height: 800px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
                dataset: {
                    source: [
                        [  '省份','确诊人数'],
                        <%//获取request域中的数据
            if (list != null) {
                for (infos info : list) {
                    i++;%>
                            [<%=Integer.parseInt(info.getConfirmed_num())%>,'<%=info.getDate()%>
        '],
    <%//后边的省份重复 第33
                    if (i > 33)
                        break;
                }

            }%>
        ]
            },
            grid : {
                containLabel : true
            },
            xAxis : {},
            yAxis : {
                type : 'category'
            },

            visualMap : {
                orient : 'horizontal',
                left : 'center',
                min : 10,
                max : 100,
                text : [ '严重地区感染人数', '轻度地区感染人数' ],
                // Map the score column to color
                dimension : 0,
                inRange : {
                    color : [ '#D7DA8B', '#E15457' ]
                }
            },
            series : [ {
                type : 'bar',
                encode : {
                    // 将 "amount" 列映射到 X 轴。
                    x : '省份',
                    // 将 "product" 列映射到 Y 轴。
                    y : '确诊人数'
                }
            } ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <div align="center">
        <table border="1" style=" 600px; height: 40px; font-size: 20px">
            <tr>
                <td>省份</td>
                <td>城市</td>
                <td>确诊人数</td>
                <td>治愈人数</td>
                <td>死亡人数</td>
            </tr>

            <%
                if (list != null) {
                    for (infos info : list) {
            %>
            <tr>
                <td><%=info.getDate()%></td>
                <td><%=info.getCity()%></td>
                <td><%=info.getConfirmed_num()%></td>
                <td><%=info.getCure()%></td>
                <td><%=info.getDead()%></td>
            </tr>
            <%
                }
                }
            %>
        </table>
    </div>

</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全国疫情查询</title>
</head>
<body>

    <div align="center">
        <section>
            <form action="MainServlet?method=search" method="post"
                onsubmit="return check()">
                <span><font size="5" color="black"> 查询日期：</font></span> <input
                    style=" 200px; height: 30px; font-size: 20px" type="text"
                    name="name" id="name"> <br />
                <input style=" 50px; height: 40px; font-size: 15px"
                    type="submit" value="查询" onclick="return on_click()"> <br />
            </form>
        </section>
    </div>
</body>
</html>

结果展示