1、問題背景
將數據封裝在JSON文件中,利用get方法請求數據
2、實現源碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-JSON請求數據</title> <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"> <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script> <script type="text/javascript" src="../js/echarts.js" ></script> <script> $(document).ready(function(){ var chart = document.getElementById('chart'); var chartData = echarts.init(chart); chartData.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); $.get('../js/data.json').done(function (data) { console.dir(data); // 填入數據 chartData.setOption({ xAxis: { data: data.categories }, series: [{ name: '銷量', data: data.data }] }); }); function eConsole(param) { console.dir(param); } chartData.on("click",eConsole); }); </script> </head> <body> <div id="chart" style="width: 1900px; height: 900px;"></div> </body> </html>
data.json:
{ "categories": [ "蘋果", "橘子", "荔枝", "桃子", "栗子", "梨子", "柿子" ], "data": [ 500, 280, 386, 190, 107, 207, 452 ] }
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。