第一次接触统计报表的内容，分享两个统计报表的模板。不过这个模板是静态的，需要转成jsp并处理，都把代码贴出来吧；
slittingTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:800px;margin-left: 100px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data1 = {
"name": "分切日报表",
"children": [
{
"name": "玉溪 新平C3F,6000KG",
"children": [
{"name": "叶基 4000G", "value": 8833},
{"name": "非叶基 1500KG", "value": 1732},
{
"name": "损耗 500KG",
"children": [
{"name":"碎烟 150KG","value": 721},
{"name": "霉烟 30KG", "value": 4294},
{"name": "杂物 20KG", "value": 4294}
]
}
]
},
{
"name": "德宏梁河 XO2,6000KG",
"children": [
{"name": "叶基 4000G", "value": 8833},
{"name": "非叶基 1500KG", "value": 1732},
{
"name": "损耗 500KG",
"children": [
{"name":"碎烟 150KG","value": 721},
{"name": "霉烟 30KG", "value": 4294},
{"name": "杂物 20KG", "value": 4294}
]
}
]
},
{
"name": "德宏梁河 XO2,6000KG",
"children": [
{"name": "叶基 4000G", "value": 8833},
{"name": "非叶基 1500KG", "value": 1732},
{
"name": "损耗 500KG",
"children": [
{"name":"碎烟 150KG","value": 721},
{"name": "霉烟 30KG", "value": 4294},
{"name": "杂物 20KG", "value": 4294}
]
}
]
},
{
"name": "玉溪峨山 X2F,6000KG",
"children": [
{"name": "叶基 4000G", "value": 8833},
{"name": "非叶基 1500KG", "value": 1732},
{
"name": "损耗 500KG",
"children": [
{"name":"碎烟 150KG","value": 721},
{"name": "霉烟 30KG", "value": 4294},
{"name": "杂物 20KG", "value": 4294}
]
}
]
}
]
};
var data2 = {
"name": "flare",
"children": [
{
"name": "flex",
"children": [
{"name": "FlareVis", "value": 4116}
]
},
{
"name": "scale",
"children": [
{"name": "IScaleMap", "value": 2105},
{"name": "LinearScale", "value": 1316},
{"name": "LogScale", "value": 3151},
{"name": "OrdinalScale", "value": 3770},
{"name": "QuantileScale", "value": 2435},
{"name": "QuantitativeScale", "value": 4839},
{"name": "RootScale", "value": 1756},
{"name": "Scale", "value": 4268},
{"name": "ScaleType", "value": 1821},
{"name": "TimeScale", "value": 5833}
]
},
{
"name": "display",
"children": [
{"name": "DirtySprite", "value": 8833}
]
}
]
};
myChart.hideLoading();
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [data1],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 18,
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 13
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
// // 指定图表的配置项和数据
// var option = {
// title: {
// text: 'ECharts 入门示例'
// },
// tooltip: {},
// legend: {
// data:['入库量']
// },
// xAxis: {
// data: ["峨山","新平","德宏","玉溪","江川","曲靖"]
// },
// yAxis: {},
// series: [{
// name: '销量',
// type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
// }]
// };
// var optionTwo = {
// title : {
// text: '五库区存储情况',
// subtext: '存储图'
// },
// tooltip : {
// trigger: 'axis'
// },
// legend: {
// data:['蒸发量','降水量']
// },
// toolbox: {
// show : true,
// feature : {
// dataView : {show: true, readOnly: false},
// magicType : {show: true, type: ['line', 'bar']},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
// calculable : true,
// xAxis : [
// {
// type : 'category',
// data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
// }
// ],
// yAxis : [
// {
// type : 'value'
// }
// ],
// series : [
// {
// name:'蒸发量',
// type:'bar',
// data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
// markLine : {
// data : [
// {type : 'average', name: '平均值'}
// ]
// }
// },
// {
// name:'降水量',
// type:'bar',
// data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
// markPoint : {
// data : [
// {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
// {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
// ]
// },
// markLine : {
// data : [
// {type : 'average', name : '平均值'}
// ]
// }
// }
// ]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(optionTwo);
</script>
</body>
</html>
echarts.js 文件的代码有2000多行，直接粘出来太卡了，可以链接：http://download.csdn.net/download/qq_27790011/10217839
效果图：
将静态页面整合成jsp,数据从后台数据库获取
slittingTest.jsp
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%><html>
<head>
<title>分切日报表</title>
<meta name="decorator" content="default" />
<script src="/yyxt/static/ECharts/echarts.js" type="text/javascript"
charset="utf-8"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li ><a href="${ctx}/grading/slittingstatistical/slittingYieldOutput/">分切后统计列表</a></li>
<li class="active"><a href="${ctx}/grading/slittingstatistical/slittingYieldOutput/report">分切日报表</a></li>
<li ><a href="${ctx}/grading/slittingstatistical/slittingYieldOutput/report1">分切统计报表</a></li>
</ul>
<div id="main" style="width: 1200px; height: 800px; margin-left: 100px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data1;
$.get(
"${ctx}/grading/slittingstatistical/slittingYieldOutput/statistic",
{}, function success(data, status) {
//alert("执行成功");
console.log(data.name);
//var object=JSON.stringify(data);
//alert(object);
data1 =data;
myChart.hideLoading();
myChart.setOption(option = {
tooltip : {
trigger : 'item',
triggerOn : 'mousemove'
},
series : [ {
type : 'tree',
data : [ data1 ],
top : '1%',
left : '7%',
bottom : '1%',
right : '20%',
symbolSize : 18,
label : {
normal : {
position : 'left',
verticalAlign : 'middle',
align : 'right',
fontSize : 13
}
},
leaves : {
label : {
normal : {
position : 'right',
verticalAlign : 'middle',
align : 'left'
}
}
},
expandAndCollapse : true,
animationDuration : 550,
animationDurationUpdate : 750
} ]
});
}, "json");
/* var data1 = {"name":"分切日报表","children":[{"name":"云南玉溪,3000.00Kg","children":[{"name":"基叶 5000.0KG","value":""},{"name":"非基叶 5000.0KG","value":""},{"name":"损耗 379.0KG","children":[{"name":"碎烟 233KG"},{"name":"霉烟 123KG"},{"name":"杂物 23KG"}]}]},{"name":"云南玉溪,3008.00Kg","children":[{"name":"基叶 5000.0KG","value":""},{"name":"损耗 543.0KG","children":[{"name":"碎烟 22KG"},{"name":"霉烟 455KG"},{"name":"杂物 66KG"}]}]},{"name":"云南玉溪,11444.11Kg","children":[{"name":"基叶 5000.0KG","value":""},{"name":"非基叶 5000.0KG","value":""},{"name":"损耗 1377.44KG","children":[{"name":"碎烟 55KG"},{"name":"霉烟 78KG"},{"name":"杂物 1244.44KG"}]}]}]}; */ /*
var data2 = {
"name" : "flare",
"children" : [ {
"name" : "flex",
"children" : [ {
"name" : "FlareVis",
"value" : 4116
} ]
}, {
"name" : "scale",
"children" : [ {
"name" : "IScaleMap",
"value" : 2105
}, {
"name" : "LinearScale",
"value" : 1316
}, {
"name" : "LogScale",
"value" : 3151
}, {
"name" : "OrdinalScale",
"value" : 3770
}, {
"name" : "QuantileScale",
"value" : 2435
}, {
"name" : "QuantitativeScale",
"value" : 4839
}, {
"name" : "RootScale",
"value" : 1756
}, {
"name" : "Scale",
"value" : 4268
}, {
"name" : "ScaleType",
"value" : 1821
}, {
"name" : "TimeScale",
"value" : 5833
} ]
}, {
"name" : "display",
"children" : [ {
"name" : "DirtySprite",
"value" : 8833
} ]
} ]
}; */
</script>
</body>
</html>
还有一个页面如图：
把整合后的jsp页面贴出来吧：
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%><html>
<head>
<title>分切统计报表</title>
<meta name="decorator" content="default" />
<script src="/yyxt/static/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li ><a href="${ctx}/grading/slittingstatistical/slittingYieldOutput/">分切后统计列表</a></li>
<li ><a href="${ctx}/grading/slittingstatistical/slittingYieldOutput/report">分切日报表</a></li>
<li class="active"><a href="${ctx}/grading/slittingstatistical/slittingYieldOutput/report1">分切统计报表</a></li>
</ul>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
//app.title = '多 X 轴示例';
var myChart = echarts.init(document.getElementById('main'));
//app.title = '嵌套环形图';
var data1;
$.get("${ctx}/grading/slittingstatistical/slittingYieldOutput/statistic1",
{}, function success(data, status) {
//alert("执行成功");
//var object=JSON.stringify(data);
//alert(object);
data1 =data.sunhao;
data2 =data.jiye;
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['叶基','非叶基','损耗','碎烟','霉烟','杂物']
},
series: [
{
name:'损耗产量',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data : data1,
},
{
name:'产出量',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data : data2 ,
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}, "json");
/* var data1=[{value:100, name:'碎烟', selected:true},
{value:50, name:'霉烟'},
{value:40, name:'杂物'}];
var data2=[{value:3000, name:'叶基'},
{value:1800, name:'非叶基'},
{value:190, name:'损耗'}]; */
</script>
</body>
</html>
然后资源代码上传了，echarts.js文件在链接：http://download.csdn.net/download/qq_27790011/10217839
欢迎大家关注个人公众号
分享各种学习资料，包含java，linux，大数据等。资料包含视频文档以及源码，仅供学习交流和分享，不涉及任何商业用途。同时分享本人及投递的优质技术博文。
转载自原文链接, 如需删除请联系管理员。
原文链接：统计报表的模板，转载请注明来源！