使用echart插件制作疫情信息可视化柱状图、折线图，本次测试紧跟现实热点，很有价值。

本次任务完成速度不错，但是页面美观度低，没有完成三层下钻。

部分代码如下：(在转移文档位置后，文档中中文注释发生了乱码

package 疫情;
import 疫情.BaseConnection;
import java.util.ArrayList;
import java.util.List;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import org.eclipse.jdt.internal.compiler.lookup.ClassScope;

import 疫情.Yiqing;


public class YiqingDao {

    public static List<String> find(String start, String stop,String sheng)
    {
        
        List<String> list = new ArrayList<String>();
        
        String sql = "select * from python where lastUpdateTime>'"+start+"' and lastUpdateTime<'"+stop+"' and Province = '"+sheng+"'";
        Connection conn = BaseConnection.getConnection();
        Statement state = null;
        ResultSet rs = null;
        String a="";
        try {
            state = conn.createStatement();
            rs = state.executeQuery(sql);
            Yiqing yiqing=null;
            while (rs.next()) {
                

                String start1 = rs.getString("Date");
                String stop1 = rs.getString("Date");
                String sheng1 = rs.getString("Province");
                String city = rs.getString("City");
                String num = rs.getString("Confirmed_num");
                
                yiqing = new Yiqing(start1,stop1,sheng1,city,num);
            
                
            }
        } catch (SQLException e) {
            // TODO �Զ����ɵ� catch ��
            e.printStackTrace();
        }finally
        {
            BaseConnection.close(rs, state, conn);
        }
        return list;
    }

    public static ArrayList<String> findapp(String timeend,String sheng) {
        ArrayList<String> list = new ArrayList<String>();

        String sql = "select * from python where lastUpdateTime = '"+timeend+"'and province ='"+sheng+"'";
        Connection conn = BaseConnection.getConnection();
        Statement state = null;
        ResultSet rs = null;
        
        try {
            state = conn.createStatement();
            rs = state.executeQuery(sql);
            while (rs.next()) {
                list.add(rs.getString("lastUpdateTime"));
                list.add(rs.getString("province"));
                list.add(rs.getString("city"));
                list.add(rs.getString("total_confirm"));
                
                
                
            }
        } catch (SQLException e) {
            // TODO �Զ����ɵ� catch ��
            e.printStackTrace();
        }finally
        {
            BaseConnection.close(rs, state, conn);
        }
        return list;
    }

    
    ArrayList<String> findss (String meeting)
    {
        ArrayList<String> list = new ArrayList<String>();
        Connection conn = BaseConnection.getConnection();
        Statement statement = null;
        String sql = "SELECT * FROM yiqingcc where Time='"+meeting+"'";  
        ResultSet rs = null;
        try {
            statement = conn.createStatement();
            rs = statement.executeQuery(sql);

            while(rs.next())
            {
                list.add(rs.getString(1));
                list.add(rs.getString(2));
                list.add(rs.getString(3));
                list.add(rs.getString(4));
                list.add(rs.getString(5));
                list.add(rs.getString(6));
                list.add(rs.getString(7));

            } 
        }catch (SQLException e) {
                e.printStackTrace();
            }finally
            {
                BaseConnection.close(rs, statement, conn);
            }
            return list;
        }
    }

 

package 疫情;




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

public class BaseConnection {
    
     public static Connection getConnection(){//�����������ȡmysql������
         Connection conn=null;
         String driver = "com.mysql.jdbc.Driver";
         String url = "jdbc:mysql://localhost:3306/payiqing?characterEncoding=utf8&useSSL=true";
         String user = "root";
         String password = "mysjz";
         try{
             Class.forName(driver);//����������
             conn=DriverManager.   
                     getConnection(url,user,password);//��url���ݿ��IP��ַ��user���ݿ��û�����password���ݿ����룩
         }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();
                }
            }
        }


    public static void main(String[] args) {
        System.out.println("���ӳɹ�");
    }
}
package 疫情;

import java.util.List;

public class Page<T> {
 
    private List<T> list;     //��ǰҳ�б�����
    private int pageNumber;   //��ǰҳ
    private int totalRecord;  //�ܼ�¼��
    private int pageSize;     //ÿҳ��ʾ��������
    
//    private int totalPage;    //��ҳ��(��Ҫ����õ�)
//    private int index;        //��ǰҳ������(��Ҫ����õ�)
    
    private String path;
    
    
    public Page() {
        super();    
    }
    
    public List<T> getList() {
        return list;
    }
    
    public int getPageNumber() {
        if(pageNumber<1){
            pageNumber=1;
        }
        if(pageNumber>getTotalPage()){
            pageNumber=getTotalPage();
        }
        return pageNumber;
    }
    
    public int getTotalPage() {
        
        if(totalRecord%pageSize==0){
            return totalRecord/pageSize;
        }else{
            return (totalRecord/pageSize)+1;
        }
        
    }
    
    public int getTotalRecord() {
        return totalRecord;
    }
    
    public int getPageSize() {
        return pageSize;
    }
    
    public int getIndex() {      //��ҳ��ѯ�������ݷ��ʲ����getIndex�����������ֵ
        /**
         * pageNumber    pageSize    Index
         *     1              3           0
         *     2              3           3
         *     3              3           6
         *     
         *    index=(pageNumber-1)*pageSize
         */
        
        return (getPageNumber()-1)*getPageSize();
        
    }
    
    public void setList(List<T> list) {
        this.list = list;
    }
    
    public void setPageNumber(int pageNumber) {
        this.pageNumber = pageNumber;
    }
    
    public void setTotalRecord(int totalRecord) {
        this.totalRecord = totalRecord;
    }
    
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
    
    @Override
    public String toString() {
        return "Page [list=" + list + ", pageNumber=" + pageNumber
                + ",  totalRecord=" + totalRecord
                + ", pageSize=" + pageSize + "]";
    }

    public Page(int pageNumber, int totalRecord, int pageSize) {
        super();
        this.pageNumber = pageNumber;
        this.totalRecord = totalRecord;
        this.pageSize = pageSize;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }
    
}
<%@ 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" >
<title>查询结果</title>
</head>
<!-- ECharts单文件引入 -->  
    <script type="text/javascript" defer="defer" src="<%=request.getContextPath() %>/My97DatePicker/WdatePicker.js"></script>
    <script src="echarts.min.js" ></script>
    </head>
    <body>
        <div align="center">
    

        <form action="${pageContext.request.contextPath}/YiqingServlet?method=find" method="post" onsubmit="return check()">
            <div >
                开始时间<input class="Wdate" name="start" type="text" onfocus="WdatePicker()" >
            </div>
            <div >
                结束时间<input class="Wdate" name="stop" type="text" onfocus="WdatePicker()" >
            </div>
            <div >
                省份<input type="text" name="sheng" >
            </div>
            <div >
                <button type="submit" class="b">查&nbsp;&nbsp;&nbsp;询</button>
            </div>
        </form>
    </div>
        <table>
            <tr>
                <td>
                
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 500px;height:400px;"></div>
                   
                    <script type="text/javascript">
                    
                        // 基于准备好的dom，初始化echarts实例
                        var city1=[];
                        <c:forEach items="${list}" var="a">
                         city1.push("${a.city}");
                        </c:forEach>
                        var num1=[];
                        <c:forEach items="${list}" var="b">
                         num1.push("${b.num}");
                        </c:forEach>
                        var myChart = echarts.init(document.getElementById('main'));
                     
                        // 指定图表的配置项和数据
                        option = {
                    title : {
                        text: '各地市疫情',
                        subtext: '城市和人数'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['城市','人数']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : city1,
                            axisLabel:{
                                interval:0,
                                rotate:30,
                                
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'患者数',
                            type:'bar',
                            data:num1}]
                        };
                           
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>
                </td>
            </tr>
        </table>
        
        <div align="center">
        <table class="tb">
            <tr>
                
                <td style="width: 200px;">时间</td>
                <td style="width: 200px;">省份</td>
                <td style="width: 200px;">城市</td>
                <td style="width: 200px;">人数</td>
                
            </tr>
            <!-- forEach遍历出adminBeans -->
            <c:forEach items="${list}" var="item" varStatus="status">
                <tr>
                    
                    <td style="width: 200px;">${item.start}</td>
                    <td style="width: 200px;">${item.sheng}</td>
                    <td style="width: 200px;">${item.city}</td>
                    <td style="width: 200px;">${item.num}</td>
                    
                </tr>
            </c:forEach>
        </table>
    </div>
        
        
        
    </body>
</html>

 

实验收获：本次实验学会了echart的简单应用，更重要的是学会了怎么去网上学习相关知识、阅读相关文档。