<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步数据加载和更新</title> </head> <body> <div id="main" style="800px;height:600px;"></div> <script src="jquery.min.js"></script> <script src="echarts.js"></script> <script> $(function(){ myChart = echarts.init(document.querySelector('#main')); myChart.setOption({ title:{ text:'异步数据加载示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data:[] // data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[] // data:[12,45,32,61,24,11]/ }] }) myChart.showLoading(); var json=[{name:'衬衫',value:12},{name:'羊毛衫',value:45},{name:'雪纺衫',value:32},{name:'裤子',value:61},{name:'高跟鞋',value:24},{name:'袜子',value:11}] var dataName = []; var dataVal = []; for(var i=0;i< json.length; i++){ dataName[i] = json[i].name; dataVal[i] = json[i].value; } var time = setTimeout(function(){ clearTimeout(time); myChart.setOption({ xAxis:{ data:dataName }, series:[{ name:'销量', data:dataVal }] }) },3000) var time1 = setTimeout(function(){ myChart.hideLoading(); },2800) }) </script> </body> </html>