图表相对于数据报表,能够更加直观的展示总体数据趋势,概况等问题,常见的图表有柱状图,折线图,饼状图等,在Java中可以使用框架对图表进行展示.
后台框架为freechart,这种框架为后台获取数据并生成图表的图片,前端使用<img>
标签异步发送请求,接收图片流即可,但是该框架配置较为麻烦,而且生成的图表样式比较老少,所以不推荐使用.
这里主要讲一下咱们国产大厂百度提供的Echart框架,这种框架为前端框架,只需要导入百度提供的一个js文件即可, (感谢百度的大力支持),文件可在Echart官网下载.然后通过后台传来的json数据在设定好的div中进行图表生成.然后只需要简单的配置即可.可通过观察案例结构来动态获取后台数据封装到json中再配置到图表的配置项
以柱状图为例:前端页面如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>饼状图</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
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 : [
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$(function(){
$.get("getBarJson.action",function(json){
option.xAxis[0].data=json.xaxis;
option.legend.data=json.legend;
$.each(json.bardata, function(i,item){
option.series[i]={
name:item.name,
type:'bar',
data:item.value,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
})
myChart.setOption(option);
})
})
</script>
</body>
</html>
action类如下:为了方便不再从数据库取值
public class BarAction {
private BarJson bardata;
public String getBarJson() {
bardata = new BarJson();
List<Bar> bars = new ArrayList<>();
Double[] zf = {2.0, 4.9, 7.0, 23.2, 50.0, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3};
Double[] js = {2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3};
bars.add(new Bar(Arrays.asList(js),"降水量"));
bars.add(new Bar(Arrays.asList(zf),"蒸发量"));
String[] ax = {"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"};
String[] le = {"蒸发量","降水量"};
bardata.setLegend(Arrays.asList(le));
bardata.setBardata(bars);
bardata.setXaxis(Arrays.asList(ax));
return "success";
}
public BarJson getBardata() {
return bardata;
}
public void setBardata(BarJson bardata) {
this.bardata = bardata;
}
}
其中BarJson的结构如下:
private List<Bar> bardata;
private List<String> xaxis;
private List<String> legend;
Bar结构如下:
private List<Double> value;
private String name;
struts.xml配置
<action name="getBarJson" class="cn.action.BarAction" method="getBarJson">
<result name="success" type="json">
<param name="root">bardata</param>
</result>
</action>