Echarts 動態加載數據
***bean***
package bean;
public class CategoryStatics {
private String categpryName;
private int dataCount;
public CategoryStatics() {
}
public CategoryStatics(String categpryName, int dataCount) {
this.categpryName = categpryName;
this.dataCount = dataCount;
}
public String getCategpryName() {
return categpryName;
}
public void setCategpryName(String categpryName) {
this.categpryName = categpryName;
}
public int getDataCount() {
return dataCount;
}
public void setDataCount(int dataCount) {
this.dataCount = dataCount;
}
}
***html***
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
var names = [];
var nums = [];
/* var item = {
name: res[i].categpryName,
value: res[i].dataCount
};*/
$.getJSON("JsoDataServlet").done(function (result) {
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].categoryName);
nums.push(result[i].dataCount);
}
}
myChart.setOption({
xAxis: {
data: names
},
series: [{
name: '銷量',
type: 'bar',
data: nums
}]
})
})
</script>
</body>
</html>
Servlet
package servlet;
import bean.CategoryStatics;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "jsondataServlet", urlPatterns = "/jsondataServlet")
public class jsondataServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
List<CategoryStatics> categoryStaticsList=new ArrayList<CategoryStatics>();
CategoryStatics cate =new CategoryStatics("寸衫",5);
CategoryStatics cate2 =new CategoryStatics("羊毛衫",20);
CategoryStatics cate3 =new CategoryStatics("雪紡衫",36);
CategoryStatics cate4 =new CategoryStatics("褲子",10);
CategoryStatics cate5 =new CategoryStatics("褲子",10);
CategoryStatics cate6 =new CategoryStatics("襪子",15);
categoryStaticsList.add(cate);
categoryStaticsList.add(cate2);
categoryStaticsList.add(cate3);
categoryStaticsList.add(cate4);
categoryStaticsList.add(cate5);
categoryStaticsList.add(cate6);
String cateJson= JSON.toJSONString(categoryStaticsList);
OutputStream out=response.getOutputStream();
out.write(cateJson.getBytes("UTF-8"));
out.flush();
out.close();
System.out.println(cateJson);
}
}