在jsp页面将数据运用echarts遍历成数据表格式
1.jsp页面遍历
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>客户报表</title>
<script type="application/javascript" src="/static/bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="/static/js/echarts.js"></script>
</head>
<body>
<div>
年度报表数据查询：
<select id="years">
<option value="2017">2017</option>
<option value="2018" selected>2018</option>
<option value="2019">2019</option>
</select>
<button onclick="query()" id="btnh" type="button">查询</button></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:400px; border:1px solid black; float:left;"></div>
<div id="main1" style="width: 600px;height:400px; border:1px solid black; float:left;"></div>
<div id="main2" style="width: 900px;height:400px; border:1px solid black; float:left;"></div>
<%--准备盒子--%>
<%--第一个单个条形图--%>
<script type="text/javascript">
var counts=new Array();
var types=new Array();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '客户分类人数对比'
},
color:['orange'],<%--条形图颜色--%>
tooltip: {},
legend: {
data:['类别人数']
},
xAxis: {
// data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data: types
},
yAxis: {},
series: [{
barWidth: '40%',
name: '类别人数',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
data: counts
}]
};
//页面加载完毕时获取数据
$(function(){
$.ajax({
url:"${pageContext.request.contextPath}/Sales/doSelectSalesList",
dataType:"json",
type:"get",
success:function(result){
//把后台返回的数据给数组赋值
for(var a in result){
var t= result[a].types;
types.push(t);
}
for(var a in result){
var c= result[a].counts;
counts.push(c);
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
})
$(function(){
query();
})
<%--第二个是双个条形图--%>
function query(){
var year=$("#years").val();
var shu=new Array();
var lei=new Array();
var ding=new Array();
// 基于准备好的dom，初始化echarts实例
var myCharta = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
var options = {
title: {
text: '客户购买人数对比'
},
tooltip: {},
legend: {
data:['类别人数','订购人数']
},
xAxis: {
// data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data: lei
},
yAxis: {},
series: [{
color:['red'],
barWidth: '30%',
name: '类别人数',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
data: shu
},
{
color:['black'],
barWidth: '30%',
name: '订购人数',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
data: ding
}]
};
//页面加载完毕时获取数据
$(function(){
$.ajax({
url:"${pageContext.request.contextPath}/Sales/doSelectSalesList3",
dataType:"json",
data:"jiaoyear="+year,
type:"get",
success:function(result){
//把后台返回的数据给数组赋值
for(var a in result){
var d= result[a].ding;
ding.push(d);
}
for(var a in result){
var l= result[a].lei;
lei.push(l);
}
for(var a in result){
var s= result[a].shu;
shu.push(s);
}
// 使用刚指定的配置项和数据显示图表。
myCharta.setOption(options);
}
})
})
<%--第三个是折线图--%>
var months3=new Array();
// 基于准备好的dom，初始化echarts实例
var myCharta1 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option2 = {
title: {
text: '月度任务完成折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['月售出量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
},
yAxis: {
type: 'value'
},
series: [
{
name:'月售出量',
type:'line',
stack: '总量',
data:months3
}
]
};
//页面加载完毕时获取数据
$(function(){
for( var a=0;a<12;a++){
months3[a]=0;
}
$.ajax({
url:"${pageContext.request.contextPath}/Sales/doSelectSalesList4",
dataType:"json",
data:"jiaoyear="+year,
type:"get",
success:function(result){
//把后台返回的数据给数组赋值
for(var car in result){
if(result[car]!=null){
var a=result[car].m;
var b=result[car].c;
months3[a-1]=b;
}
}
// 使用刚指定的配置项和数据显示图表。
myCharta1.setOption(option2);
}
})
})
}
</script>
</body>
</html>
2.图片展示
