Echarts 動態獲取數據進行圖表展示的Java示例
Echarts官網的demo都采用的數據都是靜態數據，本demo是在Echarts官網入門demo的基礎上改的，從后臺 獲取數據并展示，供入門參考
</div>
前端頁面代碼
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 800px; height: 300px"></div>
<!-- ECharts單文件引入 -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="build/dist/echarts.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths : {
echarts : 'build/dist'
}
});
// 使用
require([ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
], function(ec) {
// 基于準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : []
},
xAxis : [ {
type : 'category',
data : []
} ],
yAxis : [ {
type : 'value'
} ],
series : []
};
$.ajax({
type : "POST",
url : "gettestdata",
dataType : "json",
success : function(result) {
//將從后臺接收的json字符串轉換成json對象
var jsonobj = eval(result);
//給圖標標題賦值
option.legend.data = jsonobj.legend;
//讀取橫坐標值
option.xAxis[0].data = jsonobj.axis;
var series_arr = jsonobj.series;
//驅動圖表生成的數據內容，數組中每一項代表一個系列的特殊選項及數據
for (var i = 0; i < series_arr.length; i++) {
option.series[i] = result.series[i];
}
//過渡控制，隱藏loading（讀取中）
myChart.hideLoading();
// 為echarts對象加載數據
myChart.setOption(option);
}
});
});
</script>
</body>
后臺數據封裝代碼
//通過ajax請求數據 將請求的數據返回到頁面進行圖表的顯示
@RequestMapping("gettestdata")
public void getTestData(HttpServletResponse response) {
List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "銷量"}));
List<String> axis = new ArrayList<String>(
Arrays.asList(new String[] { "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" }));
List<Series> series = new ArrayList<Series>();
series.add(new Series("銷量", "bar", new ArrayList<Integer>(Arrays.asList(5, 20, 40, 10, 10, 20))));
Echarts echarts = new Echarts(legend, axis, series);
response.setContentType("text/html;charset=utf-8");
PrintWriter out;
try {
out = response.getWriter();
Gson gson = new Gson();
String str = gson.toJson(echarts);
System.out.println("str:"+str);
out.write(str);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
} 本文由用戶 cenmin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！