echarts ajax動態呼叫資料
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>echarts</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="echarts/common/js/echarts.min.js"></script>
<script type="text/javascript" src="echarts/common/js/jquery-1.7.2.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px; height: 300px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text : '產品統計圖',
subtext : '純屬虛構'
},
tooltip : {
show : true
},
legend : {
data : [ '銷量' ]
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [ {
type : 'category',
data : (function() {
var arr = [];
$.ajax( {
type : "post",
async : false, //同步執行
url : "servlet/TestEchartsService",
data : {},
dataType : "json", //返回資料形式為json
success : function(result) {
if (result) {
for ( var i = 0; i < result.length; i++) {
console.log(result[i].name);
arr.push(result[i].name);
}
}
},
error : function(errorMsg) {
alert("不好意思，大爺，圖表請求資料失敗啦!");
myChart.hideLoading();
}
})
return arr;
})()
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "銷量",
"type" : "bar",
"data" : (function() {
var arr = [];
$.ajax( {
type : "post",
async : false, //同步執行
url : "servlet/TestEchartsService",
data : {},
dataType : "json", //返回資料形式為json
success : function(result) {
if (result) {
for ( var i = 0; i < result.length; i++) {
console.log(result[i].num);
arr.push(result[i].num);
}
}
},
error : function(errorMsg) {
alert("不好意思，大爺，圖表請求資料失敗啦!");
myChart.hideLoading();
}
})
return arr;
})()
} ]
};
// 為echarts物件載入資料
myChart.setOption(option);
</script>
</body>
</html>
其實我們如果是x.y 的ajax請求統一url，且返回同一物件，可以將ajax提到外面，這樣就只有一次ajax請求了。
如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="echarts/common/js/echarts.min.js"></script>
<script type="text/javascript" src="echarts/common/js/jquery-1.7.2.js"></script>
<title>Insert title here</title>
</head>
<body>
為ECharts準備一個具備大小（寬高）的Dom
<div id="main" style="width: 600px; height: 300px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
var arrListOne = new Array();
var arrListTwo = new Array();
$.ajax( {
type : "post",
async : false, //同步執行
url : "cms/see.action",
dataType : "json", //返回資料形式為json
success : function(result) {
if (result!=null) {
for ( var i = 0; i < result.length; i++) {
arrListOne.push(result[i].timestamp.substring(10));
arrListTwo.push(result[i].average);
}
}
},
error : function(errorMsg) {
alert("不好意思，大爺，圖表請求資料失敗啦!");
myChart.hideLoading();
}
}) ;
console.log(arrListOne);
console.log(arrListTwo);
var option = {
title : {
text : 'CPU統計圖',
subtext : ''
},
tooltip : {
show : true
},
legend : {
data : [ 'CPU佔比' ]
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [{
type : 'category',
data : arrListOne
}],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "CPU佔比",
"type" : "line",
"data" : arrListTwo
} ]
};
// 為echarts物件載入資料
myChart.setOption(option);
</script>
</body>
</html>
此時ajax返回的json物件有可能是含有陣列，如果迴圈陣列是沒有結果，可以
console.log(result);
console.log("datapoints");
var res = result.datapoints;
re = JSON.parse(res);（要轉換後才能迴圈）
console.log(re);
alert(re.length);
for (var i=0; i<re.length; i++)
{
tt = re[i].timestamp;
console.log(tt);
}