2020年2月3日 echart入门导入数据库

一、题目

 

 

二、源程序代码

 

 

<%@page import="bean.Province"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="Echart/echarts.min.js"></script>
</head>
<body>
<%         request.setCharacterEncoding("utf-8");
List <Province> provinces =(List<Province>) request.getAttribute("provinces"); 
int i=0;%>
<div align="center">
    <div id="main" align="center" style="width: 600px;height:400px;" >
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                dataset: {
                    source: [
                        [  '省份','确诊人数'],
                        <%
                        //获取request域中的数据
                        if(provinces!=null){
                        for(Province province:provinces){i++;
                    %>
                            [<%=province.getConfirmed_number()%>,'<%=province.getName()%>'],
                    <%
                        if(i>33)break;
                        }
                    
                        }
                    %>
                    ]
                },
                grid: {containLabel: true},
                xAxis: {},
                yAxis: {type: 'category'},
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            x: '省份',
                            // 将 "product" 列映射到 Y 轴。
                            y: '确诊人数'
                        }
                    }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </div>
     
        
    </div> 
    <table border="1px" align="center">
         <tr>
         <th>省份</th>
         <th>确诊人数</th>
         <th>治愈人数</th>
         </tr>
         <%

         if(provinces!=null){
           for(Province province:provinces){
               %>
               
               <tr>                   
                   <td><%=province.getName() %></td>
                   <td><%=province.getConfirmed_number() %></td>
                   <td><%=province.getCured_number() %></td>
               </tr>
               <%
           }
         }
         %>
      </table> 
</body>
</html>
doResearch

 

package Servlet;

import java.io.IOException;
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 bean.Province;
import infoDao.InfoDao;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * Servlet implementation class ProvinceServlet
 */
@WebServlet("/provinceServlet")
public class ProvinceServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("utf-8");
        String date=request.getParameter("Date");
        InfoDao dao=new InfoDao();
        List<Province> provinces=new ArrayList();
        provinces=dao.selectByDate(date);
        request.setAttribute("provinces", provinces);
        request.getRequestDispatcher("doResearch.jsp").forward(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}
provinceServlet
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <!--         这个用来选择日期 -->
    <div align="center">
    <form action="provinceServlet" target="show" method="post">
          日期<input type="datetime" name="Date">
          <input type="submit" value="查询">
    </form>
    </div>
</body>
</html>
select

三、效果图

 

 

 四、心得体会

　　真的是，寒假没有好好学习echart，当时折腾了一下午没闹明白怎么导入数据库到echart，到开学还是逃不掉，所以还是得勤勤恳恳，一步一个脚印，学到的都是自己的！

 

posted @ 2020-03-04 17:44  酸奶面包  阅读(648)  评论(0)    收藏  举报