關於ajax後臺獲取資料 ，echarts表呈現資料
首先建立後臺json資料 自己構造的後臺資料如下：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json; charset=utf-8");JSONObject jsonObj=new JSONObject();
//後臺資料，這裡給定資料就不從資料庫獲取了
Map map=new HashMap();
map.put("categor", new String[]{"第一季度","第二季度","第三季度","第四季度"});
map.put("soft_data", new int[]{80, 120, 200,90} );
map.put("net_data", new int[]{50, 200, 120, 110});
map.put("mobile_data",new int[]{20, 60, 30, 15});
jsonObj.putAll(map);
response.getWriter().println(jsonObj.toString());
}
然後在html檔案中程式碼：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="echarts.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="main" style="width: 500px;height:600px;"></div>
<script type="text/javascript">
$(function () {
//獲得後臺資料
var category_data; //型別資訊
var soft_data; //軟板塊銷售資料
var net_data; //網板塊銷售資料
var mobile_data; //移動板塊銷售資料
$.ajax({
url: "/JavaEchartsJson/servlet/JavaEchartsJson",
async: false,
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
success: function (data) {
//成功時執行的回撥方法
category_data = data.categor;
soft_data = data.soft_data;
net_data = data.net_data;
mobile_data = data.mobile_data;
},
error: erryFunction //錯誤時執行方法
});
function erryFunction() {
alert("資料沒返回成功！");
};
var mychart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: "天貓商場季度報表",
subtext: "資料純屬虛構"
},
tooltip: {
show: true,
trigger: "axis"
},
legend: {
left:"right",
data: ['軟體板塊', '網路板塊', '移動板塊']
},
toolbox: {
show: true,
restore: {show: false},
magicType: {show: true, type: ["line", "bar"]},
saveImage: {show: true}
},
xAxis: {
type: 'category',
data: category_data
},
yAxis: {
type: "value"
},
series: [{
name: "軟體板塊", type: "bar", data: soft_data
}, {
name: "網路板塊", type: "bar", data: net_data
}, {
name: "移動板塊", type: "bar", data: mobile_data
}]
}
mychart.setOption(option);
});
</script>
</body>
</html>