ECharts學習二 --- 非同步載入
阿新 • • 發佈：2018-12-14
ECharts 中實現非同步資料的更新非常簡單，在圖表初始化後不管任何時候只要通過 jQuery 等工具非同步獲取資料後通過 setOption 填入資料和配置項就行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 初始 option //顯示標題，圖例和空的座標軸 myChart.setOption({ title: { text: '非同步資料載入示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); function fetchData(cb) { // 通過 setTimeout 模擬非同步載入 setTimeout(function () { cb({ categories: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"], data: [5, 20, 36, 10, 10, 20] }); }, 1000); } fetchData(function (data) { myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] }); }); //setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 就會執行一個指定的 method 或 function //setTimeout("alert('對不起, 要你久候')", 3000 ) 設定等 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) </script> </body> </html>
ECharts 中在更新資料的時候需要通過name屬性對應到相應的系列，上面示例中如果name不存在也可以根據系列的順序正常更新，但是更多時候推薦更新資料的時候加上系列的name資料