弄這個餅圖獲取動態數據也弄了挺久，所以發出來，也是記錄分享一下
首先頁面引入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，百度一下就能找到
為了顯示的美觀些，我把數據庫獲取的數據換成了靜態數據，效果圖如下：
