最近需要用图表展示一些数据，在页面展示两个饼状图即可。于是使用了echart3，功能很简单，但是其中遇到的一些小问题还是值得记录的。
初始效果如图
之后想在图例的地方加上人数
本来以为修改传入数组的字符串即可，但是浏览器报错
因为要求所有数据要在同一页面。所以试了在页面用table展示数据，但是不是很美观。
创建动态table的模板（这份是网上看到的，比较完整）
<html> <head> <title></title> <script type="text/javascript"> function creatTable(){ var div = document.getElementById("resultDiv"); div.innerHTML = ""; var row = document.getElementById("row").value; var col = document.getElementById("col").value; var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("width","100%"); var tbody = document.createElement("tbody"); table.appendChild(tbody); for(var i= 0 ;i<parseInt(row) ; i++){ var tr = document.createElement("tr"); for(var j =0 ; j<parseInt(col);j++){ var td = document.createElement("td"); td.innerHTML = j +''; tr.appendChild(td); } tbody.appendChild(tr); } div.appendChild(table); } </script> </head> <body> <table border="1"> <tr> <td style="width: 100px;height: 40px;">行：</td> <td><input id="row" type="text"/></td> </tr> <tr> <td>列：</td> <td><input id="col" type="text"/> </td> </tr> <tr><td colspan="2"> <input type="button" value="提交" οnclick="creatTable()"/> </td></tr> </table> <div id="resultDiv"> </div> </body> </html>
后面查了半天，没有看到类似的问题。抱着试试看的心情试着换成了echart2，结果问题就这么解决了，echart3比2更加规范严格了，但是反而导致需求不能满足（虽然这个需求可能比较小众），浪费了不少时间有点郁闷。
用echart2之后，需要修改option里的一些属性。
1、 legend 里面的left ，top 等要用x，y代替，不然会无效。
2、遍历数据的问题
a $.each(data,function(key,value){});
b for (var i in data) {}
c for (var i = 0; i < data.length; i++) {}
在echart3时，使用方法a遍历，图表显示正常，但在echart2里虽然饼图显示正常，但是legend显示异常，如图没有颜色区分。
使用b方法，会导致一些数据设值出错，数据为数值型，但是显示NaN。
使用c方法，正常。
jsp代码如下
用到了定时刷新
<%@ page language="java" pageEncoding="UTF-8" %> <!DOCTYPE html> <html lang="zh-CN"> <head> <script src="${_pluginPath}/echarts2/echarts-all.js"></script> <style type="text/css"> .myBtnDiv{ position:absolute; top: 20px;left: 20px; } </style> </head> <body> <div id="pieEchartM" style="height: 540px; width: 47%;position: absolute;float: left;"></div> <div id="pieEchartP" style="margin-top:30px; width: 47%;height: 540px; width: 47%;margin-left: 700px;"></div> </body> <script type="text/javascript"> var webPath= "/" + window.location.pathname.split("/")[1]; //基于准备好的dom，初始化echarts图表 var mobileChart =echarts.init(document.getElementById('pieEchartM')); var pcChart =echarts.init(document.getElementById('pieEchartP')); //全局参数 var temps={ seriesMoData : new Array(), seriesPcData : new Array(), timing:60*30*1000 ,//定时 } var ajaxTrigger = function(url,params,successFunc,errorFunc){ if(!errorFunc){ errorFunc=function(){}; } $.ajax({ url: url, type: 'post', data: params, dataType : "json", success: function(data){ successFunc(eval(data)); }, error: errorFunc }); }; //获取在线人数 getOnlineCount(); //定时刷新 window.setInterval("getOnlineCount()",temps.timing); //获取在线人数 function getOnlineCount(){ debugger var url = "url地址"; ajaxTrigger(url,null,function(data){ if(data != null){ debugger temps.seriesMoData = data.mobiles; temps.seriesMoData.title = "手机端在线人数统计图"; temps.seriesPcData = data.pcs; temps.seriesPcData.title = "电脑端在线人数统计图"; } var optionDataM = getOptionByStat(temps.seriesMoData); mobileChart.setOption(optionDataM, true); var optionDataP = getOptionByStat(temps.seriesPcData); pcChart.setOption(optionDataP, true); }); } function getOptionByStat(onlines) { var sumData = 0; //总人数 var onlinesData = new Array(); //area and count数据 var legendData = new Array(); //legend data for (var i = 0; i < onlines.length; i++) { var areaName = onlines[i].areaName; var count = onlines[i].count; onlinesData[i] = {value:count, name: areaName + '(' + count + '人)'}; legendData[i] = areaName + '(' + count + '人)'; sumData+=count; } var option = { title : { y:30, text: onlines.title, subtext: '在线总人数：'+sumData+'人', subtextStyle: { fontSize : 13 }, x:'center' }, legend: { orient : 'vertical', x : 'left', y :30, data:legendData }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, calculable : true, series : [ { name: '在线人数', type: 'pie', radius : '60%', center: ['60%', '60%'], data:onlinesData } ] }; return option; } </script> </html>
