基于SpringMVC、Html5 的图表展示

来源：互联网发布：银行家算法详细流程编辑：程序博客网时间：2024/05/20 10:14

本案例前台基于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;@Controllerpublic class PersonController {@RequestMapping(value = "testxml.do")@ResponseBodypublic 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 onload="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);

阅读全文

0 0