在echarts开发中遇到一个问题:前端去后台API请求数据,由于使用了ajax异步请求,前端发出请求后,就继续执行之后的代码,导致后台返回的数据还没来及赋值到Echarts的option参数,Echarts就直接渲染空的option。最后导致Echarts不显示图。
两种做法:
1.将ajax异步请求改为同步请求,改完之后效率会降低很多,因此不推荐。
$.ajax({
async: true, //true为异步 ,flase为同步
url: 后台接口地址,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//option赋值代码
myChart.setOption(option, true);
},
error: function () {
alert("请求超时错误!");
}
})
2.采用官方推荐的异步请求方式,按官方的文档
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
即可实现数据的异步加载。