本案例前台基于html5后台利用springMvc进行数据填充，并对书记进行展示。
后台代码：
import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.util.ArrayList; import java.util.Date; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi.hssf.usermodel.HSSFRow; import org.apache.poi.hssf.usermodel.HSSFSheet; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Qualifier; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import com.chengpai.person.bean.Person; import com.chengpai.person.bean.bumenMidObject; import com.chengpai.person.service.PersonService; import util.Mobile; import util.Upload; @Controller public class PersonController { @RequestMapping(value = "testxml.do") @ResponseBody public List<Person> testxml(HttpServletRequest request, HttpServletResponse response) { List<Person> p = new ArrayList<Person>(); Person p1 = new Person(); p1.setAcount("acount"); p1.setAge(30); p1.setId(1); p1.setName("梅西"); p1.setPassword("messi"); p1.setPhoto("字母罗"); Person p2 = new Person(); p2.setAcount("acount"); p2.setAge(32); p2.setId(2); p2.setName("C罗"); p2.setPassword("messi"); p2.setPhoto("字母罗"); Person p3 = new Person(); p3.setAcount("acount"); p3.setAge(25); p3.setId(3); p3.setName("内马尔"); p3.setPassword("messi"); p3.setPhoto("字母罗"); Person p4 = new Person(); p4.setAcount("acount"); p4.setAge(33); p4.setId(4); p4.setName("伊涅斯塔"); p4.setPassword("messi"); p4.setPhoto("字母罗"); Person p5 = new Person(); p5.setAcount("acount"); p5.setAge(36); p5.setId(5); p5.setName("皮克"); p5.setPassword("messi"); p5.setPhoto("字母罗"); Person p6 = new Person(); p6.setAcount("acount"); p6.setAge(26); p6.setId(6); p6.setName("布斯克茨"); p6.setPassword("messi"); p6.setPhoto("字母罗"); Person p7 = new Person(); p7.setAcount("acount"); p7.setAge(28); p7.setId(7); p7.setName("苏亚雷斯"); p7.setPassword("messi"); p7.setPhoto("字母罗"); Person p8 = new Person(); p8.setAcount("acount"); p8.setAge(33); p8.setId(8); p8.setName("戈麦斯"); p8.setPassword("messi"); p8.setPhoto("字母罗"); p.add(p1); p.add(p2); p.add(p3); p.add(p4); p.add(p5); p.add(p6); p.add(p7); p.add(p8); return p; } }H5界面实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试数据渲染</title> <style type="text/css"> @import url(css/jquery.tableui.css); </style> <style> .main { height: 330px; overflow: hidden; padding: 10px; margin-bottom: 10px; } </style> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.tableui.js"></script> <script type="text/javascript" src="js/JQuery.js"></script> <script type="text/javascript" src="js/jquery.htools.select.js"></script> <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="js/echarts.min.js"></script> <script type="text/javascript"> function begin() { $("#div1").hide(); $("#div2").hide(); $("#div3").hide(); $("#div4").hide(); $("#div5").hide(); } $(document).ready(function() { var type = ''; $("#myselect").change(function() {//根据下拉框选择渲染数据 type = $("#myselect").val(); if (type == "表格") {//以表格方式渲染数据 createShowingTable(); $("#div2").hide(); $("#div3").hide(); $("#div4").hide(); $("#div5").hide(); $("#div1").show(); } if (type == "柱状图") {//以柱状图方式渲染数据 createZZT(); $("#div1").hide(); $("#div3").hide(); $("#div4").hide(); $("#div5").hide(); $("#div2").show(); } if (type == "饼图") {//以饼图方式渲染数据 createPie(); $("#div1").hide(); $("#div2").hide(); $("#div4").hide(); $("#div5").hide(); $("#div3").show(); } if (type == "折线图") {//以折线图方式渲染数据 createZX(); $("#div1").hide(); $("#div2").hide(); $("#div3").hide(); $("#div5").hide(); $("#div4").show(); } if (type == "请选择") {//点击请选择无数据 $("#div1").hide(); $("#div2").hide(); $("#div3").hide(); $("#div4").hide(); $("#div5").hide(); } if (type == "Messi") {//点击查看全部渲染方式 createLd(); $("#div1").hide(); $("#div2").hide(); $("#div3").hide(); $("#div4").hide(); $("#div5").show(); } if (type == "展示全部表格") {//点击查看梅西能力值 createShowingTable(); createZZT(); createPie(); createZX(); createLd(); $("#div1").show(); $("#div2").show(); $("#div3").show(); $("#div4").show(); $("#div5").show(); } }); }); </script> </head> <body οnlοad="begin();"> <div class="vertical"> 选择数据渲染方式： <select id="myselect"> <option value="请选择" selected="selected">请选择</option> <option value="表格">表格</option> <option value="柱状图">柱状图</option> <option value="饼图">饼图</option> <option value="折线图">折线图</option> <option value="Messi">雷达图</option> <option value="展示全部表格">展示全部表格</option> </select> </div> <div id="div1"> <!--表格 --> <table class="bordered" border="0" cellspacing="0"> <thead> <th>编号</th> <th>姓名</th> <th>年龄</th> </thead> <tbody id="dataTable"></tbody> </table> </div> <div id="div2" style="width: 1000px; height: 600px"> <!-- 柱状图 --> </div> <div id="div3" style="width: 1000px; height: 600px;"> <!-- 饼图 --> </div> <div id="div4" style="height: 400px; width: 1000px"> <!-- 折线图 --> </div> <div id="div5" class="main" style="height: 600px; width: 600px"> <!-- 雷达图 --> </div> </body> </html> Jquery代码实现： $("#button1").click(function() { // 在后台获取数据 var userList = new Array(); $(document).ready(function() { $.ajax({ url : "testxml.do", data : JSON.stringify(""), type : "POST", success : function(data, textStatus) { userList = data; }, error : function(data, textStatus, errorThrown) { // console.log(data); }, }) }); // 创建表格 function createShowingTable() { var tableStr = ""; for (var i = 0; i < userList.length; i++) { tableStr = tableStr + "<tr><td>" + userList[i].id + "</td><td>" + userList[i].name + "</td>" + "<td>" + userList[i].age + "</td></tr>"; } $("#dataTable").html(tableStr); } // 创建柱状图 function createZZT() { var name = new Array(); var age = new Array(); for (var i = 0; i < userList.length; i++) { name.push(userList[i].name); age.push(userList[i].age); } // 路径配置 // 基于准备好的dom，初始化echarts图表 // var myChart = echarts.init(document.getElementById('div2')); // 设置数据 var myChart = echarts.init(document.getElementById("div2")); var option = { title : { text : '世界球星年龄分布', subtext : '独家报道', x : 'center' }, // 设置坐标轴 xAxis : [ { name : '姓名', type : 'category', splitLine : { show : false }, data : name } ], yAxis : [ { splitLine : { show : false }, name : '年龄', type : 'value' } ], // 设置数据 series : [ { "name" : "年龄", "type" : "bar", "data" : age, itemStyle : { normal : { // 柱状图颜色随机显示 color : function(d) { return "#" + Math.floor( Math.random() * (256 * 256 * 256 - 1)) .toString(16); } // 柱状图颜色定制显示（按顺序） // color: function(params) { // var colorList = // ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', // '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 // ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' // ]; // return colorList[params.dataIndex] // } }, }, } ], tooltip : { // 触发类型，默认（'item'）数据触发，可选为：'item' | 'axis' trigger : 'item' }, }; // 为echarts对象加载数据 myChart.setOption(option); } // 绘制饼状图 function createPie() { var name = new Array(); var json = new Array(); var json1 = ''; for (var i = 0; i < userList.length; i++) { name.push(userList[i].name); json1 = { value : userList[i].age, name : userList[i].name }; json.push(json1); } var echartsPie; var option = { title : { text : '世界球星年龄分布', subtext : '独家报道', x : 'center' }, tooltip : { trigger : 'item', formatter : "{a} <br/>{b} : {c} 岁" }, legend : { orient : 'vertical', x : 'left', 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 : json } ] }; echartsPie = echarts.init(document.getElementById('div3')); echartsPie.setOption(option); } // 生成折线图 function createZX() { var name = new Array(); var age = new Array(); for (var i = 0; i < userList.length; i++) { name.push(userList[i].name); age.push(userList[i].age); } var chart = document.getElementById('div4'); var echart = echarts.init(chart); var option = { title : { text : '世界球星年龄分布', subtext : '独家报道', x : 'center' }, tooltip : { trigger : 'axis' }, grid : { left : '3%', right : '4%', bottom : '3%', containLabel : true }, toolbox : { feature : { saveAsImage : {} } }, xAxis : { name : '姓名', type : 'category', boundaryGap : false, data : name }, yAxis : { name : '年龄', type : 'value' }, series : [ { name : '年龄', type : 'line', stack : '年龄', data : age } ] }; echart.setOption(option); } // 绘制雷达图 function createLd() { var myChart; var domMain = document.getElementById('div5'); var option = { title : { text : '梅西能力值', subtext : '世界足球先生 里奥·梅西 能力值', show : true }, tooltip : { trigger : 'axis' }, legend : { x : 'center', data : [ '能力值' ], show : false }, toolbox : { show : false, feature : { mark : { show : false }, dataView : { show : false, readOnly : false }, restore : { show : false }, saveAsImage : { show : false } } }, calculable : false, polar : [ { indicator : [ { text : '盘带', max : 100 }, { text : '过人', max : 100 }, { text : '突破', max : 100 }, { text : '左脚', max : 100 }, { text : '右脚', max : 100 }, { text : '长传', max : 100 }, { text : '短传', max : 100 }, { text : '任意球', max : 100 }, { text : '防守', max : 100 } ], radius : 130 } ], series : [ { name : '能力值', type : 'radar', itemStyle : { normal : { areaStyle : { type : 'default' } } }, data : [ { value : [ 95, 100, 100, 95, 90, 85, 100, 95, 75 ], name : '能力值', itemStyle : { normal : { color : '#2c87e5', label : { show : true, formatter : function(params) { return params.value; } }, areaStyle : { color : 'rgba(44,135,229,0.3)' } } } } ] } ] }; myChart = echarts.init(domMain); myChart.setOption(option, true); }