假期05

今天继续学习了eacharts，这次尝试着与后台数据进行交互，实验结果成功，

数据库数据：

 

 

然后是jsp页面的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@page import="java.util.List" %>
 <%@page import="com.pp.fruitsum" %>
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>图表页面</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var names=[];
        var num=[];
        <%
            List<fruitsum> list=(List<fruitsum>)request.getAttribute("list");
            int a=list.size();
            int i=0;
            for(i=0;i<a;i++){
        %>
        names.push('<%=list.get(i).getName()%>');
        num.push(<%=list.get(i).getSum()%>);
        <%
            }
        %>
         var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '水果售卖'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: names
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: num
                }]
            };
            myChart.setOption(option);
    </script>
</body>
</html>

servlet层的代码：

public void tubiao(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        dao d=new dao();
        List<fruitsum> list=d.selectFruitSum();
        response.setContentType("text/html; charset=utf-8");
        request.setAttribute("list",list);
        request.getRequestDispatcher("bootstrap.jsp").forward(request, response);
    }

dao层和bean层就不展示，应该都是可以做到的。

效果图：

 

posted @ 2021-01-29 11:02  哦心有  阅读(67)  评论(0)  编辑  收藏  举报