Echarts 后台传入数据
2016-03-25 10:58
441 查看
jsp页面：
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:["销售0","销售1","销售2"]
},
xAxis: {
type : "category",
data :[]
},
yAxis: [{
type : "value",
}],
series: [
{
name:"销售0",
type:"bar",
data:[]
},
{
name:"销售1",
type:"bar",
data:[]
},
{
name:"销售2",
type:"bar",
data:[]
}
]
};
myChart.showLoading();
//通过Ajax获取数据
$.ajax({
type : "post",
async : true, //异步执行
url : "AcceptData",
dataType : "json", //返回数据形式为json
success : function(json) {
if (json) {
fetchData(function (data) {
myChart.hideLoading();
myChart.setOption({
xAxis:{
data:json.xAxisData
},
series: json.seriesList
});
});
}
},
error : function(errorMsg) {
alert("请求数据失败");
}
});
myChart.setOption(option);
</script>
</body>
</html> Servlet：package com.cdm.Hive;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONObject;
public class AcceptData extends HttpServlet {
JSONObject jsonObject=null;
public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
try{
req.setCharacterEncoding("utf-8");
resp.setContentType("utf-8");
resp.setCharacterEncoding("utf-8");
PrintWriter write = resp.getWriter();
Map<String,String[]> map = new HashMap<String,String[]>();
List<String> xAxisData = new ArrayList<String>();
List< JSONObject> seriesList = new ArrayList< JSONObject>();
for (int i = 1; i < 13; i++) {
xAxisData.add(i+"月");
}
for (int i = 0; i < 3; i++) {
List<Integer> list = new ArrayList<Integer>();
for (int j = 1; j < 13; j++) {
list.add((int)(Math.random()*40));
}
Series series = new Series("销售"+i, Series.TYPE_LINE, list);
JSONObject jsonObject2 = new JSONObject();jsonObject2.put("name", series.toName());
jsonObject2.put("type","bar");
jsonObject2.put("data",series.data);
seriesList.add(jsonObject2);
}
//xAxisData和seriesList转为json
JSONObject jsonObject1 = new JSONObject();
jsonObject1.put("xAxisData", xAxisData);
jsonObject1.put("seriesList", seriesList);
//发送给前台
write.write(jsonObject1.toString());
write.flush();
write.close();
}catch (IOException e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException,IOException{
doGet(req,resp);
}
}<strong>
</strong> Series：import java.util.List;
import org.json.JSONObject;
public class Series {
public String name;
public String type;
public List<Integer> data;
public static String TYPE_LINE = "line";
public static String TYPE_BAR = "bar";
public Series( String name, String type, List<Integer> data) {
this.name = name;
this.type = type;
this.data = data;
}
public String toName(){
return name;
}
}结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐