Echarts--異步數據加載和更新
阿新 • • 發佈：2017-07-02
meta timeout jquer 加載 text chart 雪紡衫 body pan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>異步數據加載和更新</title> </head> <body> <div id="main" style="width: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>
Echarts--異步數據加載和更新