ECharts動態獲取資料
阿新 • • 發佈：2019-01-05
最近做專案的需要，我不得不接觸一下Echarts這個外掛。以前看著網上的一些餅圖柱形圖之類的，我就想這應該只有牛人才做的出來吧！其實好多時候，一葉障目不見泰山，殊不知有好多看似覺得高大上的東西，在你接觸過了解後就知道，其實很簡單。下面這篇記錄一下我用Echarts簡單的AJAX動態繫結資料。
下面是json資料：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts-all.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="chartmain" style="width: 800px; height: 500px;"></div> <script type="text/javascript"> //初始化echarts例項 var myChart = echarts.init(document.getElementById('chartmain')); myChart.showLoading({ text: '正在努力的讀取資料中...', //loading }); //非同步載入的配置項和資料顯示圖表 function bindData(){ $.ajax({ async: true, url: 'js/data.json', type: 'get', dataType: 'json', data: {}, success:function(echartData){ if(echartData){ myChart.setOption({ tooltip: { show: true }, legend: { data:['銷量'] }, xAxis : [ { type : 'category', data : echartData.name } ], yAxis : [ { type : 'value' } ], series : [ { "name":"銷量", "type":"bar", "data":echartData.data } ] }) myChart.hideLoading(); //loading hidden } } }) } bindData(); </script> </body> </html>
{
"name":["Android","IOS","PC","Other"],
"data":[420,200,360,100]
}因為後臺的介面沒有寫好，我是在本地測試的，記住本地測試路徑應該像這樣：http://127.0.0.1:8020/echarts%E5%8A%A8%E6%80%81%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE/index.html?__hbt=1506561862746
不可以類似於這種的file:///D:/
其中原因我說不太清楚