本人由于項(xiàng)目需要，在狀態(tài)變化的時(shí)候需要?jiǎng)討B(tài)繪制對(duì)應(yīng)數(shù)據(jù)的EChart圖表，并且不刷新整個(gè)網(wǎng)頁(yè)。

所以就用Ajax動(dòng)態(tài)畫EChart圖表，下面是開(kāi)發(fā)過(guò)程中遇到的一些坑的總結(jié)。

流程：頁(yè)面首次加載時(shí)展示一幅原始的圖形，若后臺(tái)數(shù)據(jù)更新，則進(jìn)行一定的業(yè)務(wù)處理后，前端通過(guò)AJAX動(dòng)態(tài)繪制出最新的數(shù)據(jù)

一、前端JSP代碼

????準(zhǔn)備一個(gè)放圖表的容器?

????<div id="AScanChart" style="width:50%; height: 60%;float: left;"></div>

????//初始化echarts實(shí)例
????var myAScan = echarts.init(document.getElementById('AScanChart'));
????//使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表

????myAScan.setOption(aScanOption);

? ? 注：這里省略了原始圖形aScanOption的代碼

? ? 下面是JS代碼

????//定時(shí)ajax請(qǐng)求判斷是否有報(bào)警
$(document).ready(function() {
setInterval(showAlert, 10000);//每隔10秒調(diào)用一次
});
function showAlert() {
var url = "monitorAction_showAlert.action";
var sendData = {
"tempSensorNum" : "${monitor.sensorNum}"
};
//發(fā)送post請(qǐng)求
$.post(url, sendData, function(backData, status) {
//window.alert(backData);
//window.alert(status);


var showAlertJsonString = backData.split("&&");
//window.alert(showAlertJsonString[0]);
//將JSON字符串轉(zhuǎn)出json對(duì)象
var showAlertJsonObject = eval("(" + showAlertJsonString[0] + ")");


//window.alert(showAlertJsonObject[0].alertType);
if (showAlertJsonObject[0].alertType == 1) {


$("#blink").html("缺陷報(bào)警");
setInterval(changeColor, 250); //設(shè)置一個(gè)定時(shí)器，每200毫秒調(diào)用一次變色函數(shù)
} else {
$("#blink").html("監(jiān)測(cè)正常");
}
if (showAlertJsonString[1] != ""
&& showAlertJsonObject[0].typeChange == 1) {
var monitorObject = eval("(" + showAlertJsonString[1] + ")");
//window.alert(monitorObject[0].sensorNum);
var xData=eval("(" + monitorObject[0].xDataJson + ")");
var aScanData=eval("(" + monitorObject[0].aScanDataJosn + ")");
var bScanData=eval("(" + monitorObject[0].baseAScanDataJosn + ")");

myAScan.clear();
myAScan.setOption({
title : {
text : 'AScan data'
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross'
},
},
legend : {
data : [ '用戶來(lái)源' ]
},
xAxis : {
name : '距離(m)',
data : xData
},
yAxis : {
name : '(%)'
},
toolbox : {
left : 'center',
feature : {
dataZoom : {
yAxisIndex : 'none'
},
dataView : {
readOnly : false
},
restore : {},
}
},
dataZoom : [ {
type : 'inside'
} ],
series : [ {
name : 'signal',
type : 'line',
data : aScanData
}, {
name : 'baseSignal',
type : 'line',
data : bScanData
} ]
},true);
}
});
}

? ? 注：

????var showAlertJsonObject = eval("(" + showAlertJsonString[0] + ")");

????var xData=eval("(" + monitorObject[0].xDataJson + ")");

????var aScanData=eval("(" + monitorObject[0].aScanDataJosn + ")");

????var bScanData=eval("(" + monitorObject[0].baseAScanDataJosn + ")");

? ? 1.這4句代碼是關(guān)鍵：由于后端傳過(guò)來(lái)的是JSON字符串，而ECHart的圖表需要JSON對(duì)象，所有首先將JSON字符串轉(zhuǎn)JSON對(duì)象（第一句），這樣還沒(méi)完，現(xiàn)在取出的數(shù)據(jù)還是字符串，需要將對(duì)象.對(duì)應(yīng)的字段，再進(jìn)行一次JSON轉(zhuǎn)換（這是我項(xiàng)目中的坑）。

? ? 2.由于最開(kāi)始畫了圖，所以更新時(shí)加上myAScan.clear();。先清空再畫

? ? 3.有些情況下若未更新，則設(shè)置Option的時(shí)候，給第2個(gè)參數(shù)賦為true即可

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的转发：Ajax动态画EChart图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。