zoukankan      html  css  js  c++  java
  • 数据可视化

    1.导入全国疫情数据库

    2.可以按照时期查询各个省市的疫情统计表格

    3.折线图或柱状图展示各省确诊人数

    部分代码:

    <%@ 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">
    <title>Insert title here</title>
    <link href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
    </head>
    <script type="text/javascript">
    var dt;
    function getAllConfirmed(){
        
        var date1 = "${date1}";
        var date2 = "${date2}";
    $.ajax({
        url:"YqServlet?method=getAllConfirmed",
        async:true,
        type:"POST",
        data:{"date1":date1,
              "date2":date2
             },
        success:function(data){
            dt = data;
            //alert(dt);
        },
        error:function(){
            alert("请求失败");
        },
        dataType:"json"
    });
        
        var myChart = echarts.init(document.getElementById('yiqingchart'));
        var xd = new Array(0)//长度为33
        var yd = new Array(0)//长度为33
        for(var i=0;i<32;i++){
            xd.push(dt[i].province);
            yd.push(dt[i].confirmed_num);
        }
            // 指定图表的配置项和数据
           var option = {
            title: {
                text: '全国各省的确诊人数'
            },
            tooltip: {
                show: true,
                trigger: 'axis'
                
            },
            legend: {
                data: ['确诊人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                                            //横坐标上的文字斜着显示 文字颜色 begin 
                                                 interval:0,
                                                 rotate:45,
                                                 margin:60,
                                                 textStyle:{color:"#ec4869" }
                                            //横坐标上的文字换行显示 文字颜色end
                                                 },
                data: xd
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '确诊人数',
                    type: 'bar',
                    stack: '总量',
                    data: yd,
                    barWidth:20,
                    barGap:'10%'
                }
            ]
        };
    
           
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    }
    </script>
    <body>
        <button class="btn btn-default" onclick="getAllConfirmed()" style="padding-top:20px;font-size:20px">柱状图</button>
        <div id="yiqingchart" style="900px; height: 600px;">
            
        </div>
        <table class="table" style="font-size:20px">
            <tr>
                <td>编号</td>
                <td>日期</td>
                <td>省份</td>
                <td>城市</td>
                <td>确诊人数</td>
                <td>疑似人数</td>
                <td>治愈人数</td>
                <td>死亡人数</td>
            </tr>
            <c:forEach items="${list}" var="info">
            <tr>
                <td>${info.id}</td>
                <td>${info.date}</td>
                <td>${info.province}</td>
                <td>${info.city}</td>
                <td>${info.confirmed_num}</td>
                <td>${info.yisi_num}</td>
                <td>${info.cured_num}</td>
                <td>${info.dead_num}</td>
            </tr>
            </c:forEach>
        </table>
    </body>
    </html>
    echarts.jsp
     1 package com.biaoge;
     2 
     3 public class info {
     4     private int id;
     5     private String city;
     6     private String yisi_num;
     7     private String date;
     8     private String province;
     9     private String confirmed_num;
    10     private String cured_num;
    11     private String dead_num;
    12     private String code;
    13     public int getId() {
    14         return id;
    15     }
    16     public void setId(int id) {
    17         this.id = id;
    18     }
    19     public String getCity() {
    20         return city;
    21     }
    22     public void setCity(String city) {
    23         this.city = city;
    24     }
    25     public String getYisi_num() {
    26         return yisi_num;
    27     }
    28     public void setYisi_num(String yisi_num) {
    29         this.yisi_num = yisi_num;
    30     }
    31     public String getCode() {
    32         return code;
    33     }
    34     public void setCode(String code) {
    35         this.code = code;
    36     }
    37     public String getDate() {
    38         return date;
    39     }
    40     public void setDate(String date) {
    41         this.date = date;
    42     }
    43     public String getProvince() {
    44         return province;
    45     }
    46     public void setProvince(String province) {
    47         this.province = province;
    48     }
    49     public String getConfirmed_num() {
    50         return confirmed_num;
    51     }
    52     public void setConfirmed_num(String confirmed_num) {
    53         this.confirmed_num = confirmed_num;
    54     }
    55     public String getCured_num() {
    56         return cured_num;
    57     }
    58     public void setCured_num(String cured_num) {
    59         this.cured_num = cured_num;
    60     }
    61     public String getDead_num() {
    62         return dead_num;
    63     }
    64     public void setDead_num(String dead_num) {
    65         this.dead_num = dead_num;
    66     }
    67     
    68 }
    info.java
    package com.biaoge;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    import java.util.List;
    
    public class get {
        public List<info> listAll(String date1,String date2) {
            ArrayList<info> list = new ArrayList<>();
            Connection conn=util.getConn();
            PreparedStatement pstmt = null;
            ResultSet rs = null;
            String sql="select * from info where Date between ? and ?";
            try {
                pstmt = conn.prepareStatement(sql);
                pstmt.setString(1, date1);
                pstmt.setString(2, date2);
                rs = pstmt.executeQuery();
                while (rs.next()) {
                    info yq = new info();
                    yq.setId(rs.getInt(1));
                    yq.setDate(rs.getString(2));
                    yq.setProvince(rs.getString(3));
                    yq.setCity(rs.getString(4));
                    yq.setConfirmed_num(rs.getString(5));
                    yq.setYisi_num(rs.getString(6));
                    yq.setCured_num(rs.getString(7));
                    yq.setDead_num(rs.getString(8));
                    yq.setCode(rs.getString(9));
                    list.add(yq);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    conn.close();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            return list;
        }
    }
    get,java

    效果图:

  • 相关阅读:
    征战蓝桥 —— 2015年第六届 —— C/C++A组第5题——九数组分数
    征战蓝桥 —— 2015年第六届 —— C/C++A组第5题——九数组分数
    征战蓝桥 —— 2015年第六届 —— C/C++A组第4题——格子中输出
    SSLZYC 邮票
    SSLZYC 道路阻塞
    SSLZYC 反射
    SSLZYC 家族
    秒杀系统架构分析与实战
    工厂模式
    工厂模式
  • 原文地址:https://www.cnblogs.com/shenaoyu/p/12511682.html
Copyright © 2011-2022 走看看