Echarts实现疫情图_Echarts

 

 

 

代码:

Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
package dao;

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

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

import pojo.ProvinceInfo;
import utils.MyDataSoureUtils;

public class InfoDao {

    public List<ProvinceInfo> getAllInfo() throws SQLException {
        QueryRunner qr = new QueryRunner(MyDataSoureUtils.getDataSource());
        String sql = "select * from info1 where id < ?";
        List<ProvinceInfo> list = qr.query(sql, new BeanListHandler<ProvinceInfo>(ProvinceInfo.class),"34");
        return list;
    }

    public List<ProvinceInfo> getLiebiao(String start, String end) throws SQLException {
        QueryRunner qr = new QueryRunner(MyDataSoureUtils.getDataSource());
        String sql = "select * from info1 where date between ? and ?";
        List<ProvinceInfo> list = qr.query(sql, new BeanListHandler<ProvinceInfo>(ProvinceInfo.class),start,end);
        return list;
    }
    
    

}
infoDao.java
Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
package pojo;

public class MyInfo {
    
    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;
    }
    
    

}
MyInfo.java
Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
package utils;

import java.sql.Connection;
import java.sql.SQLException;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class MyDataSoureUtils {
    
    private static ComboPooledDataSource dataSource = new ComboPooledDataSource();

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

    public static void startTransaction() throws SQLException {
        Connection conn = getCurrentConnection();
        conn.setAutoCommit(false);
    }
    

    public static void rollback() throws SQLException {
        getCurrentConnection().rollback();
    }
    

    public static void commit() throws SQLException {
        
        Connection conn = getCurrentConnection();
        

        conn.commit();
        

        tl.remove();
        
        //�ر�����
        conn.close();
    }
    

    public static Connection getCurrentConnection() throws SQLException {

        Connection conn = tl.get();

        if(conn == null) {

            conn = getConnection();

            tl.set(conn);
        }
        
        return conn;
    
    }
    
    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }
    
    public static DataSource getDataSource() {
        return dataSource;
    }

}
MyDataSource.java
Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
package web;

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 dao.InfoDao;
import pojo.ProvinceInfo;

/**
 * Servlet implementation class chaxun
 */
@WebServlet("/chaxun")
public class chaxun extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        String start = request.getParameter("start");
        String end = request.getParameter("end");
        InfoDao dao = new InfoDao();
        List<ProvinceInfo> list = null;
        try {
            list = dao.getLiebiao(start,end);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        request.setAttribute("list", list);
        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);
    }

}
chauxn.java
Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
package web;

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.google.gson.Gson;

import dao.InfoDao;
import pojo.MyInfo;
import pojo.ProvinceInfo;

/**
 * Servlet implementation class GetData
 */
@WebServlet("/getData")
public class GetData extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("1515");
        InfoDao dao = new InfoDao();
        List<ProvinceInfo> infoList = null;
        try {
            infoList = dao.getAllInfo();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        List<MyInfo> myInfoList = new ArrayList<MyInfo>();
        for (ProvinceInfo province : infoList) {
            MyInfo info = new MyInfo();
            info.setName(province.getProvince());
            info.setValue(province.getConfirmed_num());
            myInfoList.add(info);
        }
        Gson gson = new Gson();
        String json = gson.toJson(myInfoList);
        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);
    }

}
getData.java
Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>

  <default-config>
    <property name="driverClass">com.mysql.cj.jdbc.Driver</property>
    <property name="jdbcUrl">jdbc:mysql://localhost:3306/payiqing?useSSL=false&amp;serverTimezone=UTC&amp;characterEncoding=UTF-8</property>
    <property name="user">root</property>
    <property name="password">root</property>
    <property name="initialPoolSize">5</property>
    <property name="maxPoolSize">20</property>
  </default-config>
  
  <named-config name="oracle"> 
    <property name="driverClass">com.mysql.jdbc.Driver</property>
    <property name="jdbcUrl">jdbc:mysql:///web_07</property>
    <property name="user">root</property>
    <property name="password">123</property>
  </named-config>
  

</c3p0-config>
c3p0-config.xml
Echarts实现疫情图_Echarts_02Echarts实现疫情图_Echarts_03
<%@ 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">
<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>Insert title here</title>
<script type="text/javascript">
    function chaxun() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var url = "${pageContext.request.contextPath }/chaxun?start="
                + startTime + "&end=" + endTime;
        window.location.href = url;
    }
</script>

</head>
<body>

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 800px;; height: 600px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题,图例和空的坐标轴
        myChart.setOption({
            title : {
                text : '全国各省确诊人数'
            },
            tooltip : {},
            legend : {
                data : [ '确诊人数' ],
                width : '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 }/getData", //请求发送到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="history" method="post">
        <label for="username" class="col-sm-1"
            style="text-align: right; margin-top: 17px">时间:</label>
        <div class="col-sm-2">
            <input type="date" name="startTime" id="startTime"
                class="form-control col-sm-6" placeholder="请输入姓名"
                style="width: 150px; margin-top: 7px">

        </div>

        <label for="username" class="col-sm-1"
            style="text-align: right; margin-top: 17px">到:</label>

        <div class="col-sm-2">
            <input type="date" name="endTime" id="endTime"
                class="form-control col-sm-6" placeholder="请输入姓名"
                style="width: 150px; margin-top: 7px">

        </div>

        <input type="button" value="查找情况" class="btn btn-primary col-sm-5"
            style="width: 100px; margin-top: 7px; margin-left: 10px"
            onclick="chaxun()" />

    </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>${xuhao.count }</td>
                <td>${item.date }</td>
                <td>${item.province }</td>
                <td>${item.city }</td>
                <td>${item.getConfirmed_num() }</td>
                <td>${item.getDead_num() }</td>
                <td>${item.getCured_num() }</td>
            </tr>
        </c:forEach>
    </table>



</body>
</html>
index.jsp

 

 

Echarts实现疫情图_Echarts_16

 

 

 

Echarts实现疫情图_Echarts_17

 

Echarts实现疫情图_Echarts_18

 

Echarts实现疫情图_Echarts_19