弄这个饼图获取动态数据也弄了挺久,所以发出来,也是记录分享一下
首先页面引入jquery.js和echarts.js
然后把官方文档例子的获取静态数据,改为用ajax获取后台数据库传递数据:
echarts.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> </head> <body> <div id="echartsPie" style="width: 800px; height: 600px;"></div> <script type="text/javascript"> var echartsPie = echarts.init(document.getElementById('echartsPie')); // $.get('js/data.json').done(function (data) { $.post("user_linkByPhone.action", function(datas) { //alert(datas); console.log(datas); var data= $.parseJSON(datas); //将传递过来的json字符串转化为对象 //alert(data); console.log(data); var servicedata=[]; for(var i=0;i<data.name.length;i++){ var obj=new Object(); obj.name=data.name[i]; obj.value=data.data[i]; servicedata[i]=obj; } // alert(servicedata); echartsPie.setOption({ title : { text: '月内点击量数据', subtext: '饼图', x:'center' }, tooltip : { trigger: 'item', formatter: "{b} <br/>{c} : {d} %" //a 系列名称,b 数据项名称,c 数值,d 百分比 }, legend: { orient : 'vertical', x : 'left', data:data.name }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'点击量', type:'pie', radius : '55%',//饼图的半径大小 center: ['50%', '60%'],//饼图的位置 data:servicedata } ] }) }) </script> </body> </html>
后台传递json字符串,在页面转化为json对象,控制台打印数据格式如下:
UserAction.java:
/** * 根据手机号把该账户下的点击用户查找 * @throws IOException * * */ public String linkByPhone() throws IOException { HttpServletRequest req=ServletActionContext.getRequest(); HttpServletResponse resp = ServletActionContext.getResponse(); resp.setCharacterEncoding("UTF-8"); String serviceNumber=req.getParameter("phoneNum"); String count=user4Service.findByNumber(serviceNumber); String countToday=user4Service.findNUmberToday(serviceNumber); //String[] categories= {"今日点击量","总点击量"}; //String[] data= {countToday,count}; String[] name= {"一月内点击量","一周内点击量","昨天点击量","今天点击量"}; String[] data= {"233","121","97","23"}; Map<String, Object> map = new HashMap<>(); //map.put("count", count); //map.put("countToday", countToday); map.put("name", name); map.put("data", data); Gson gson=new Gson(); String mapJson=gson.toJson(map); System.out.println(mapJson); PrintWriter out = resp.getWriter(); out.print(mapJson); out.flush(); out.close(); return null; }
这里用了一个gson.jar,百度一下就能找到
为了显示的美观些,我把数据库获取的数据换成了静态数据,效果图如下: