在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。
看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSON对象返回给前台做相应的处理。在这里推荐一个echart对应的实体依赖。在pom.xml中引入
com.github.abel533
ECharts
3.0.0.2
然后在controller封装一个echarts所需的option返回给前端,在这里从数据库的提取的过程部分的代码我就不写了。数据库就简单的两列属性【年份、金额】。在这里贴出代码,相信很多小伙伴还是明白滴,不明白的可以留言哦,我看到会一一回复的。
private void setData(){
yearList = new ArrayList<>();
amountList = new ArrayList<>();
List gdpList = gdpService.selectList(new EntityWrapper());
for (Gdp gdp:gdpList) {
yearList.add(gdp.getYear());
amountList.add(gdp.getAmount());
}
}
/**
* 柱状图
*/
@RequestMapping("/bar_chart")
@ResponseBody
public String barChart(){
setData();
Option option = new Option();
option.title().text("中华人民共和国国内生产总值(GDP)").subtext("纯属虚构");
option.tooltip().trigger(Trigger.axis);
option.legend("万亿元");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView,
new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.xAxis(new CategoryAxis().data(yearList.toArray()));
option.yAxis(new ValueAxis());
Bar bar = new Bar("万亿元");
bar.data(amountList.toArray());
bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"),
new PointData().type(MarkType.min).name("最小值"));
bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));
option.series(bar);
return JSON.toJSONString(option);
}
然后前端发起ajax请求,获取option对象并显示。
柱状图.wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -155px}
.footer,.push{ height:155px}
table.gridtable{ font-family:verdana,arial,sans-serif; font-size:11px;
color:#333; border-width:1px; border-color:#666;
border-collapse:collapse; margin:5px auto}
table.gridtable th{ border-width:1px; padding:8px; border-style:solid;
border-color:#666; background-color:#dedede}
table.gridtable td{ border-width:1px; padding:8px; border-style:solid;
border-color:#666; background-color:#fff}
.middle{ text-align:center; margin:0 auto; width:90%; height:auto}
.info{ font-size:12px; text-align:center; line-height:20px; padding:40px}
.info a{ margin:0 10px; text-decoration:none; color:green}
window.onload = function(){
$.ajax({
type: "post",
url: "${ctx}/gdp/bar_chart",
dataType: "json",
async: false,
success: function (data) {
var option = eval("("+data+")");
// theme 来源于 macarons.js
var myChart = echarts.init(document.getElementById('main'),theme);
myChart.setOption(option);
}
})
}