后台部分代码:
returnMap.put("powerLevelCategories", powerLevelCategories);
returnMap.put("powerLevelSeries", powerLevelSeries);
try
{
response.setContentType("text/text;charset=UTF-8");// 给发送到前端的数据
// 设置编码格式
// 这边适合非IE浏览器
String jsonResult = JsonMapper.toJsonString(returnMap);
PrintWriter out = response.getWriter();
out.print(jsonResult);// 发送数据到前端
out.flush();
out.close();// 关闭流
}
catch (Exception e)
{
e.printStackTrace();
}
return null;
由于ajax返回前端的数据为一个json字符串,而echart的data需要的是一个数组类型的数据,如果我们在后台将数据组成“['xxx','aaa','bbb']”传给前端echart,echart是无法展示的,所以我们需要在前端将数据拆分放入数组中再传给echart就可以展示了。
$.ajax({
type: "post",
url: "${ctx}/power/project/total/cityChart?city="+type,
async: false,
success: function(data)
{
var dataStr = JSON.parse(data);
categoriesdata = [];
seriesdata = [];
var strs1= new Array(); //定义一数组
var strs2= new Array(); //定义一数组
strs1 = dataStr.powerLevelCategories.toString().split(",");
strs2 = dataStr.powerLevelSeries.toString().split(",");
//将需要展示的数据放入数组中
for(var i = 0; i < strs1.length; i++){
categoriesdata.push(strs1[i]);
}
for(var i = 0; i < strs2.length; i++){
seriesdata.push(parseInt(strs2[i]));
}
}
});