今天继续学习了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=" 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层就不展示，应该都是可以做到的。
效果图：
