在日常的開發中，我們常常需要使用圖表對資料進行展示，在這裡作者使用百度的開源圖表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=)