在日常的开发中，我们常常需要使用图表对数据进行展示，在这里作者使用百度的开源图表echarts动态的展示数据。
看过echarts的API都知道，要想使用某种类型的图表展示数据，必须封装好一个JSON对象返回给前台做相应的处理。在这里推荐一个echart对应的实体依赖。在pom.xml中引入
<!-- ECharts的JAVA类库 -->
<!-- 项目地址：https://github.com/abel533/ECharts -->
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0.2</version>
</dependency>
然后在controller封装一个echarts所需的option返回给前端，在这里从数据库的提取的过程部分的代码我就不写了。数据库就简单的两列属性【年份、金额】。在这里贴出代码，相信很多小伙伴还是明白滴，不明白的可以留言哦，我看到会一一回复的。
private void setData(){
yearList = new ArrayList<>();
amountList = new ArrayList<>();
List<Gdp> gdpList = gdpService.selectList(new EntityWrapper<Gdp>());
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对象并显示。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>柱状图</title>
<style>*{ margin:0} html,body{ height:100%}
.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}</style>
<script type="text/javascript" src="resources/jquery/jquery-2.2.3.min.js"></script>
<!-- ECharts单文件引入 -->
<script src="${ctx}/resources/js/echarts-all-3.js"></script>
<!-- 修改主题 -->
<script src="${ctx}/resources/js/macarons.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
<script>
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);
}
})
}
</script>
</body>
</html>
版权声明：本文为CSDN博主「weixin_34290000」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34290000/article/details/92306474
![javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)