zoukankan      html  css  js  c++  java
  • Echart图表

    做题思路:

    先在jsp文件中做一个日期查询的界面,获取输入日期,传到servlet层,在讲输入日期传到Dao层,在Dao层中依据日期在数据库筛选出符合条件的数据,利用List<>传到servlet层中,在讲数据传到jsp文件中,用<c:forEach>来获取数据动态显示在表格之中,然后在按同样的操作复制到X,Y坐标上。然后显示出echart表图。

    echart.jsp:

    <%@ 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>
        <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    
    <body>
    <%
            Object message = request.getAttribute("message");
            if (message != null && !"".equals(message)) {
        %>
        <script type="text/javascript">
                   alert("<%=request.getAttribute("message")%>");
        </script>
        <%
            }
        %>
        <div id="main" style=" 600px;height:400px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    
    var arr = new Array();
    var index = 0;
    <c:forEach items="${list}" var="item">
        arr[index++] = ${item.confirmed_num};
    </c:forEach>
    
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '全国疫情统计'
        },
        tooltip: {
            show: true
        },
        legend: {
            data:['患者数']
        },
        xAxis : [
            {
                type : 'category',
                axisLabel:{  
                     interval:0,//横轴信息全部显示  
                     rotate:40,//-30度角倾斜显示  
                      },
                data : [
                    <c:forEach items="${list}" var="item">
                    ["${item.province}"],
                    </c:forEach>
                ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'患者数',
                type:'bar',
                data: arr
            }
        ]
    };
    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
            </script>
    <table >
    <form action="selectServlet" method="post">
    <table style="position:relative;top:20px;left:30px">
    <tr>
    <td>请输入日期:</td>
    <td><input type="text" name="starttime" style="150px;" placeholder="#2020-03-03"></td>
    <td ><input type ="submit" value="查询" style="80px;" ></td>
    </tr>
    </table>
    </form>
    <br>
        <table border="1">
            <tr>
                <td>序号</td>
                <td>省份</td>
                <td>确诊人数</td>
                <td>治愈人数</td>
            </tr>
            <c:forEach items="${list}" var="item" >
                <tr>
                    <td>${item.id}</td>
                    <td>${item.province}</td>
                    <td>${item.confirmed_num}</td>
                    <td>${item.cured_num}</td>
                </tr>
            </c:forEach>
        </table>
    
    </body>
    </html>

    Bean:

    package Bean;
    
    public class shengfen {
      public String province;
      public int id;
      public int confirmed_num;
      public int cured_num;
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public int getConfirmed_num() {
        return confirmed_num;
    }
    public void setConfirmed_num(int confirmed_num) {
        this.confirmed_num = confirmed_num;
    }
    public int getCured_num() {
        return cured_num;
    }
    public void setCured_num(int cured_num) {
        this.cured_num = cured_num;
    }
    public shengfen(String province, int id, int confirmed_num, int cured_num) {
        super();
        this.province = province;
        this.id = id;
        this.confirmed_num = confirmed_num;
        this.cured_num = cured_num;
    }
    
      
    }

    Dao:

    package Dao;
    
    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 Bean.shengfen;
    import DBUtil.DBUtil;
    
    public class Dao {
    static int id = 1;
        public List<shengfen> selecttime(String starttime) {
            String sql="select * from info where Date = '"+starttime+"' and City = '' ";
            System.out.println(sql);
            Connection conn = DBUtil.getConn();
            Statement stat = null;
            List<shengfen> list = new ArrayList<>();
            ResultSet rs = null;
            shengfen sf =null;
            try {
                stat = conn.createStatement();
                rs = stat.executeQuery(sql);
                while(rs.next()) {
                    
                    String Province = rs.getString("Province");
                    int Confirmed_num = rs.getInt("Confirmed_num");
                    int Cured_num = rs.getInt("Cured_num");
                    sf = new shengfen(Province,id,Confirmed_num,Cured_num);
                    id++;
                    list.add(sf);
                }
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            id = 1;
            return list;
        }
    
    }

    selectServlet:

    package Servlet;
    
    import java.io.IOException;
    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 Bean.shengfen;
    import Dao.Dao;
    
    /**
     * Servlet implementation class selectServlet
     */
    @WebServlet("/selectServlet")
    public class selectServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public selectServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                request.setCharacterEncoding("UTF-8");
                String starttime = request.getParameter("starttime");
                Dao dao = new Dao();
                java.util.List<shengfen> list = dao.selecttime(starttime);
                System.out.println(list);
                if(list != null) {
                    request.setAttribute("list", list);
                    request.getRequestDispatcher("achart.jsp").forward(request, response);
                }else {
                    request.setAttribute("message", "数据获取失败!");
                    request.getRequestDispatcher("achart.jsp").forward(request, response);
                }
        }
    
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
        }
    
    }
  • 相关阅读:
    奶酪(NOIP2017 Day2 T1)
    图的遍历(某谷P3916)
    20154331 EXP9web安全基础实践
    20154331 EXP8 web基础
    20154331EXP7 网络欺诈
    20154331 Exp6 信息搜集与漏洞扫描
    Exp5 MSF基础应用
    Exp4 恶意代码分析
    Exp3 免杀原理与实践
    20154331黄芮EXP2 后门原理与实践
  • 原文地址:https://www.cnblogs.com/yangxionghao/p/12416282.html
Copyright © 2011-2022 走看看