在做项目中遇到了一个echarts异步加载数据的填充,首先,查看官方文档示例,了解相关属性之后,再去了解异步请求的相关属性,之后在异步中进行定义横坐标和值数组定义,通过遍历获取result的值存放在定义的数组中,最后存放在data下便实现异步加载获取数据,以下是示例:
function test(){ var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '预计生产产量' }, tooltip: {}, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['数量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '数量', type: 'bar', data: [] }] }); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names=[]; //类别数组(实际用来盛放X轴坐标值) var nums=[]; //销量数组(实际用来盛放Y坐标值) $.ajax({ type : "get", async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url : "http://localhost:8080/wisdomeet/a/real/realProgress/realList", //请求发送到TestServlet处 success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].process.name); //挨个取出类别并填入类别数组 } for(var i=0;i<result.length;i++){ // nums.push(result[i].productionArrangement.number); //挨个取出销量并填入销量数组daliy nums.push(result[i].productionArrangement.daliy); } myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 xAxis: { data: names }, series: [{ // 根据名字对应到相应的系列 name: '数量', data: nums }] }); } }, error : function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }); };
后台接口示例:
@ResponseBody @RequestMapping(value="realList") public List<RealProgress> realList(RealProgress realProgress, HttpServletRequest request, HttpServletResponse response, Model model) { List<RealProgress> realList = realProgressService.findList(realProgress); return realList; }