最近開發專案用到echarts圖表展示資料資訊，需要呼叫后臺介面，寫一篇博客來記錄一下實作程序，末尾附原始碼
首先準備一個json檔案echarts.json（名字無所謂），用來模擬從后臺獲取資料
第二步上echarts官網下載，或直接參考生成圖表用到的js，這里給出官網：https://www.echartsjs.com/index.html
然后在頁面直接參考
這里給出echarts.js的下載鏈接：https://echarts.baidu.com/dist/echarts.min.js
第三步在body中準備一個容器，用來顯示圖表
緊接著在js中初始化echarts物件，直接上代碼
<script type="text/javascript"> var container = document.getElementById('container'); // 初始化加載物件myContainer var myContainer = echarts.init(container); //未獲取資料前，顯示loading加載影片 myContainer.showLoading(); function bindData() { //為了效果明顯，我們做了延遲讀取資料 setTimeout(function() { //異步加載資料,get請求我們剛剛準備的json檔案,正式開發中呼叫相應的介面 $.get('js/echarts.json', function(res) { console.log(res) //獲取資料后，隱藏loading影片 myContainer.hideLoading(); myContainer.setOption(option = { title: { text: 'echartsLoading加載' }, tooltip: {}, legend: {}, // xAxis代表x軸的資料 xAxis: { data: res.name, // 欄位對應從json里面的欄位 }, // yAxis代表y軸的資料,不寫會自動適應資料 yAxis: {}, // series代表滑鼠懸浮到圖示上時提示的對應資訊 series: [{ name: '訪問量', type: 'bar', data: res.data, // 欄位對應從json里面的欄位 }] }); }) }, 2000) } bindData(); </script>看到這里如果能生成一個柱狀圖，那么恭喜你已經可以從后臺獲取資料了
如果還沒有的話就看全部代碼吧，加油哦
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>echarts-異步加載資料</title> <link rel="stylesheet" href="https://www.cnblogs.com/webdom/p/11.scss"> <script src="https://www.cnblogs.com/webdom/p/js/eacher.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.cnblogs.com/webdom/p/js/new_file.js" type="text/javascript" charset="utf-8"></script> <style> #container{ width: 500px; height: 400px; border: 1px solid #ccc; /**/ } </style> </head> <body> <div id="container"></div> <!-- --> <script type="text/javascript"> var container = document.getElementById('container'); // 初始化加載物件myContainer var myContainer = echarts.init(container); //未獲取資料前，顯示loading加載影片 myContainer.showLoading(); function bindData() { //為了效果明顯，我們做了延遲讀取資料 setTimeout(function() { //異步加載資料,get請求我們剛剛準備的json檔案,正式開發中呼叫相應的介面 $.get('js/echarts.json', function(res) { console.log(res) //獲取資料后，隱藏loading影片 myContainer.hideLoading(); myContainer.setOption(option = { title: { text: 'echartsLoading加載' }, tooltip: {}, legend: {}, // xAxis代表x軸的資料 xAxis: { data: res.name, // 欄位對應從json里面的欄位 }, // yAxis代表y軸的資料,不寫會自動適應資料 yAxis: {}, // series代表滑鼠懸浮到圖示上時提示的對應資訊 series: [{ name: '訪問量', type: 'bar', data: res.data, // 欄位對應從json里面的欄位 }] }); }) }, 2000) } bindData(); </script> </body></html>json檔案
{ "name":["iso","english","china","ufo","seo"], "data":[400,200,300,100,11]}效果圖
轉載于:https://www.cnblogs.com/songzxblog/p/11383879.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/36731.html
標籤：HTML5