echarts實現非同步載入數據，點擊更新圖表功能。
項目需求：根據幫農頁面非同步添加數據，實現頁面的圖表數據點擊更新。具體的源碼如下，僅供參考。
未用ajax實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<style>
.btu{ width:104px; height:198px;}
.btu ul{ margin:0; padding:0;width:104px; height:198px;}
.btu ul li{ list-style:none; width:50px; height:20px; background-color:#999;
color:#fff; float:left; margin-left:2px; margin-top:2px;cursor:pointer;}
.btu ul .yanse{ background-color:#F00;}
</style>
</head>
<body>
<div class="btu">
<ul>
<li class="yanse">仔豬</li>
<li>活豬</li>
<li>豬肉</li>
<li>羊肉</li>
<li>牛肉</li>
<li>生鮮乳</li>
<li>活雞</li>
<li>白條雞</li>
<li>雞蛋</li>
<li>代蛋雛雞</li>
<li>代肉雛雞</li>
<li>主產省雞蛋</li>
<li>玉米</li>
<li>豆粕</li>
<li>進口魚粉</li>
<li>豬飼料</li>
<li>肉雞飼料</li>
<li>蛋雞飼料</li>
</ul>
</div>
<div id="main" stylex="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById(main));
// 指定圖表的配置項和數據
myChart.setOption({
title: {
text:
},
tooltip : {
trigger: axis
},
legend: {
data:[]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: 3%,
right: 4%,
bottom: 5%,
containLabel: true
},
xAxis : [
{
type : category,
boundaryGap : false,
data : [,第一周,第一周,第一周,第一周,第一周,第一周,第一周,第一周,第一周,第一周],
axisLabel:{
interval: 0 ,
rotate:40
}
}
],
yAxis : [
{
type : value
}
],
series : [
{
name:蘋果,
type:line,
stack: 銷量,
//areaStyle: {normal: {}},
data:[]
}
]
});
myChart.showLoading();
// 使用剛指定的配置項和數據顯示圖表。
// myChart.setOption(option);
myChart.setOption({ //載入數據圖表
series: [{
data:[,0, 20, 30, 80,10, 20, 30, 0,10, 20]
}]
});
myChart.hideLoading();
$(.btu ul li).click(function(){
$(.btu ul li).removeClass(yanse);
$(this).addClass(yanse);
var index = $(this).index();
if(index==1){
console.log(nihao)
myChart.setOption({ //載入數據圖表
series: [{
data:[,0, 50, 30, 80,10, 20, 30, 20,10, 20]
}]
});
}
if(index==2){
console.log(nihao1)
myChart.setOption({ //載入數據圖表
series: [{
data:[,40, 50, 30, 80,10, 20, 30, 20,10, 20]
}]
});
myChart.hideLoading();
}
if(index==3){
console.log(nihao2)
myChart.setOption({ //載入數據圖表
series: [{
data:[,60, 50, 30, 80,10, 30, 30, 20,10, 20]
}]
});
myChart.hideLoading();
}
})
</script>
</body>
</html>
ajax請求實例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body>
<div id="main" stylex="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(main));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: 非同步數據載入示例
},
tooltip: {},
legend: {
data:[銷量]
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: 銷量,
type: bar,
data: []
}]
});
myChart.showLoading(); //數據載入完之前先顯示一段簡單的loading動畫
var names=[]; //類別數組（實際用來盛放X軸坐標值）
var nums=[]; //銷量數組（實際用來盛放Y坐標值）
$.ajax({
type : "post",
async : true, //非同步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成
才可以執行）
url : "TestServlet", //請求發送到TestServlet處
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為伺服器返回的json對象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨個取出類別並填入類別數組
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨個取出銷量並填入銷量數組
}
myChart.hideLoading(); //隱藏載入動畫
myChart.setOption({ //載入數據圖表
xAxis: {
data: names
},
series: [{
// 根據名字對應到相應的系列
name: 銷量,
data: nums
}]
});
}
},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
推薦閱讀：
※Angular 應用瘦身記——比 jQuery 更小的 TodoMVC
※簡單粗暴的移動端適配方案 - REM
※實戰 | 用原生js寫一個"多動症"的簡歷
※聊聊代碼的拆分和一些前端架構思想
※閱讀vue.js源碼可以從哪幾方面入手？