我们可以使用ECharts获取后台数据,通过Ajax,JavaScript在线生成图表。
我们制作测试用例,就不使用自动加载,采用手动方式进行生成,让流程直观。
<a href="#" target="rightFrame" οnclick="showSale()">查看销售额</a><script type="text/javascript"> function showSale() { $("#main").css("display", "block"); var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '门店年销售额' //显示在图表左上角 可以认为是图表的名字 }, tooltip: {}, //Echarts提示框(tooltip)浮层位置,不设置时,默认位置会跟随鼠标的位置。 legend: { data: ["销售额"] //用于设置图表样式 例如上下间距/颜色 type:plain\scroll 分为普通样式/滚动翻页 }, xAxis: {//X坐标显示什么 //通过后台获取 data: [] }, yAxis: {},//Y坐标显示什么 不设置 会根据返回数据进行自动设置 series: [{//中间显示的数据 name: '销量', type: 'bar', //echarts 里系列类型就是图表类型,比如line(折线图),bar(柱状图),pie(饼图)等,详细可以参考echarts官网手册。 data: [] //通过后台返回 }] }; //设置加载动画 myChart.showLoading(); //定义数组来接受后台返回数据 var names = [];//用于接受名称 var sales = [];//用接受销量 //利用ajax请求发起数据请求 $.ajax({ url: "showsale", type: "post", data: {}, dataType: "json", success: function (result) { console.log(result) for (var i = 0; i < result.length; i++) { names.push(result[i].name)//往最后一个元素追加 } for (var i = 0; i < result.length; i++) { sales.push(result[i].sale)//往最后一个元素追加 } //隐藏加载动画 myChart.hideLoading(); //将数据覆盖进入列表 myChart.setOption({ xAxis: { data: names }, series: [{ data: sales }] }) } } ); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 } </script>
后台代码:
@WebServlet("/showsale") public class ShowSaleServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException { System.out.println("ShowSale 接受请求"); response.setContentType("text/text"); response.setCharacterEncoding("UTF-8"); DoorDao doorDao=new DoorDao(); try { List<Door> list=doorDao.showSale(); System.out.println(list); Gson gson=new Gson(); String json=gson.toJson(list); System.out.println(json); //通过输出流返回给浏览器 response.getWriter().write(json); } catch (SQLException e) { e.printStackTrace(); } } }
结果图: