最近開發項目用到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="11.scss">
<script src="js/eacher.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
<style>
#container{
width: 500px;
height: 400px;
border: 1px solid #ccc;
/*background-color: #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] }
效果圖
