本案例前台基于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;
}
}<!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);}
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
