Echarts實現疫情圖(折線圖)

 

 

 

代碼：

package com.me.Bean;

import java.util.Date;

public class Bean {
    private int id;
    private Date date;
    private String province;
    private String city;
    private String confirmed_num;
    private String cured_num;
    private String dead_num;

    
    public Bean(int id, Date date, String province, String city, String confirmed_num, String cured_num,
            String dead_num) {
        super();
        this.id = id;
        this.date = date;
        this.province = province;
        this.city = city;
        this.confirmed_num = confirmed_num;
        this.cured_num = cured_num;
        this.dead_num = dead_num;
    }


    @Override
    public String toString() {
        return "Bean [id=" + id + ", date=" + date + ", province=" + province + ", city=" + city + ", confirmed_num="
                + confirmed_num + ", cured_num=" + cured_num + ", dead_num=" + dead_num + "]";
    }


    public int getId() {
        return id;
    }


    public void setId(int id) {
        this.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) {
        this.city = city;
    }


    public String getConfirmed_num() {
        return confirmed_num;
    }


    public void setConfirmed_num(String confirmed_num) {
        this.confirmed_num = confirmed_num;
    }


    public String getCured_num() {
        return cured_num;
    }


    public void setCured_num(String cured_num) {
        this.cured_num = cured_num;
    }


    public String getDead_num() {
        return dead_num;
    }


    public void setDead_num(String dead_num) {
        this.dead_num = dead_num;
    }


    public Bean() {
        // TODO Auto-generated constructor stub
    }

}

Bean.java

package com.me.Dao;

import java.sql.SQLException;
import java.util.Date;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.me.Bean.Bean;
import com.me.Bean.Bean2;
import com.me.Utils.DBUtils;

public class Dao {

    public static List<Bean> selectAllProvinces() throws SQLException {
        QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
        String sql = "select * from info where id<33";
        List<Bean> list = qr.query(sql, new BeanListHandler<Bean>(Bean.class));
        return list;
    }

    public static List<Bean> selectByDate(String time1,String time2) throws SQLException {
        QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
        String sql = "select * from info2 where Date between ? and ?";
        List<Bean> list = qr.query(sql, new BeanListHandler<Bean>(Bean.class), time1,time2);
        return list;
    }
    
    public static List<Bean2> select() throws SQLException {
        QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
        String sql = "select * from info2";
        List<Bean2> list = qr.query(sql, new BeanListHandler<Bean2>(Bean2.class));
        return list;
    }

    public Dao() {
        // TODO Auto-generated constructor stub
    }

}

Dao.java

package com.me.Servlet;

import java.io.IOException;
import java.sql.SQLException;
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.me.Bean.Bean;
import com.me.Dao.Dao;

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

    /**
     * @see HttpServlet#HttpServlet()
     */
    public SelectByTimeServlet() {
        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
        response.setCharacterEncoding("UTF-8");
        response.getWriter().append("Served at: ").append(request.getContextPath());
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String time1 = request.getParameter("time1");
        String time2 = request.getParameter("time2");
        List<Bean> list = null;
        try {
            list = Dao.selectByDate(time1, time2);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        request.setAttribute("list", list);
        response.setContentType("text/html;charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        request.getRequestDispatcher("index.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);
    }

}

SelectByTimeServlet.java

package com.me.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 com.me.Bean.Bean;
import com.me.Bean.InfoBean;
import com.me.Dao.Dao;
import com.google.gson.Gson;


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

    /**
     * @see HttpServlet#HttpServlet()
     */
    public SelectProvincesServlet() {
        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
//        response.getWriter().append("Served at: ").append(request.getContextPath());
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        List<Bean> list = null;
        try {
             list = Dao.selectAllProvinces();
             for (Bean bean : list) {
                System.out.println(bean);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        List<InfoBean> il=new ArrayList<InfoBean>();
        for (Bean bean : list) {
            InfoBean info =new InfoBean();
            info.setProvinceName(bean.getProvince());
            info.setCured_num(bean.getCured_num());
            info.setDead_num(bean.getDead_num());
            info.setConfirmed_num(bean.getConfirmed_num());
            il.add(info);
        }
        Gson gson =new Gson();
        String json=gson.toJson(il);
        response.getWriter().write(json);
        System.out.println(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);
    }

}

SelectProvinceServlet.java

package com.me.Utils;

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

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DBUtils {

    private static DataSource dataSource = new ComboPooledDataSource();

    private static ThreadLocal<Connection> tl = new ThreadLocal<Connection>();

    // 直接能夠獲取一個鏈接池
    public static DataSource getDataSource() {
        return dataSource;
    }

    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }

    // 獲取鏈接對象
    public static Connection getCurrentConnection() throws SQLException {

        Connection con = tl.get();
        if (con == null) {
            con = dataSource.getConnection();
            tl.set(con);
        }
        return con;
    }

    // 開啓事務
    public static void startTransaction() throws SQLException {
        Connection con = getCurrentConnection();
        if (con != null) {
            con.setAutoCommit(false);
        }
    }

    // 事務回滾
    public static void rollback() throws SQLException {
        Connection con = getCurrentConnection();
        if (con != null) {
            con.rollback();
        }
    }

    // 提交而且 關閉資源及從ThreadLocall中釋放
    public static void commitAndRelease() throws SQLException {
        Connection con = getCurrentConnection();
        if (con != null) {
            con.commit(); // 事務提交
            con.close();// 關閉資源
            tl.remove();// 從線程綁定中移除
        }
    }

    // 關閉資源方法
    public static void closeConnection() throws SQLException {
        Connection con = getCurrentConnection();
        if (con != null) {
            con.close();
        }
    }

    public static void closeStatement(Statement st) throws SQLException {
        if (st != null) {
            st.close();
        }
    }

    public static void closeResultSet(ResultSet rs) throws SQLException {
        if (rs != null) {
            rs.close();
        }
    }
}

DBUtils.java

<?xml version="1.0" encoding="UTF-8" ?>
<c3p0-config>
    <default-config>
        <property name="user">root</property>
        <property name="password">root</property>
        <property name="driverClass">com.mysql.cj.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql:///payiqing?serverTimezone=UTC&amp;characterEncoding=UTF8</property>
    </default-config> 
</c3p0-config> 

c3p0-config.xml

<%@ 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.js"></script>
<title>疫情分析圖</title>
</head>
<body>

    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 1000px;; height: 600px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 顯示標題，圖例和空的座標軸
        myChart.setOption({
            title : {
                text : '全國各省疫情圖',
                subtext : '截止到2020-2-8'
            },
            tooltip : {
                show:true,
                trigger:'item'
            },
            toolbox:{
                feature:{
                    restore:{
                        show:true
                    },
                    magicType:{
                        type:['line','bar']
                        
                    },
                    saveAsImage:{
                        show:true
                    },
                    dataView:{
                        show:true
                    },
                    dataZoom:{
                        show:true
                    }
                }
                
            },
            legend : {
                data : [ '確診人數','死亡人數','治癒人數' ],
            },
            xAxis : {
                type : 'category'
                
            },
            yAxis : {},
            series : [ {
                name : '確診人數',
                type : 'line',
                data : []
            },
            {
                name : '死亡人數',
                type : 'line',
                data : []
            },
            {
                name : '治癒人數',
                type : 'line',
                data : []
            }]
        });
        myChart.showLoading();//出現進度條


        $.ajax({
            type : "post",
            async : true,
            url : "${pageContext.request.contextPath }/SelectProvincesServlet", //請求發送到SelectProvincesServlet
            success : function(resultJson) {
                var result = jQuery.parseJSON(resultJson);
                var name = new Array();
                var Cured_num = new Array();
                var Dead_num= new Array();
                var Confirmed_num= new Array();
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        name.push(result[i].provinceName);
                        Cured_num.push(result[i].cured_num);
                        Dead_num.push(result[i].dead_num);
                        Confirmed_num.push(result[i].confirmed_num);
                    }
                    myChart.hideLoading(); //隱藏加載動畫
                    myChart.setOption({ //加載數據圖表
                        xAxis : {
                            data : name,
                            axisLabel:{
                                rotate:40
                            }
                        },
                        series : [ {
                            
                            name : '確診人數',
                            data : Confirmed_num
                        },
                        {
                            
                            name : '死亡人數',
                            data : Dead_num
                        },
                        {
                            
                            name : '治癒人數',
                            data : Cured_num
                        }
                        ]
                    });

                }
            },
            error : function(errorMsg) {
                //請求失敗時執行該函數
                alert("圖表請求數據失敗!");
                myChart.hideLoading();
            }
        });
    </script>

    <form action="SelectByTimeServlet" method="post">
        時間:
        <div class="col-sm-2">
            <input type="date" name="time1" id="time1">
        </div>

        <label class="col-sm-1">至:</label>

        <div class="col-sm-2">
            <input type="date" name="time2" id="time2">

        </div>


        <input type="submit" value="查找" class="btn btn-primary col-sm-6" />

    </form>
    
            <form action="Servlet">
        <input type="submit" value="查詢">
        </form>

    <table class="table table-hover table-striped">
        <tr>
            <td>序號</td>
            <td>時間</td>
            <td>省份</td>
            <td>地區</td>
            <td>確診人數</td>
            <td>死亡人數</td>
            <td>治癒人數</td>
        </tr>
        <c:forEach items="${list }" var="item" varStatus="xuhao">
            <tr>
                <td>${item.id}</td>
                <td>${item.date}</td>
                <td>${item.province}</td>
                <td>${item.city}</td>
                <td>${item.confirmed_num}</td>
                <td>${item.dead_num}</td>
                <td>${item.cured_num}</td>
            </tr>
        </c:forEach>
    </table>



</body>
</html>

index.jsp