转发：Ajax动态画EChart图表

本人由于项目需要，在状态变化的时候需要动态绘制对应数据的EChart图表，并且不刷新整个网页。

所以就用Ajax动态画EChart图表，下面是开发过程中遇到的一些坑的总结。

流程：页面首次加载时展示一幅原始的图形，若后台数据更新，则进行一定的业务处理后，前端通过AJAX动态绘制出最新的数据

一、前端JSP代码

准备一个放图表的容器

    //初始化echarts实例
    var myAScan = echarts.init(document.getElementById('AScanChart'));
    //使用制定的配置项和数据显示图表

myAScan.setOption(aScanOption);

注：这里省略了原始图形aScanOption的代码

下面是JS代码

//定时ajax请求判断是否有报警
$(document).ready(function() {
setInterval(showAlert, 10000);//每隔10秒调用一次
});
function showAlert() {
var url = "monitorAction_showAlert.action";
var sendData = {
"tempSensorNum" : "${monitor.sensorNum}"
};
//发送post请求
$.post(url, sendData, function(backData, status) {
//window.alert(backData);
//window.alert(status);

var showAlertJsonString = backData.split("&&");
//window.alert(showAlertJsonString[0]);
//将JSON字符串转出json对象
var showAlertJsonObject = eval("(" + showAlertJsonString[0] + ")");

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

$("#blink").html("缺陷报警");
setInterval(changeColor, 250); //设置一个定时器，每200毫秒调用一次变色函数
} else {
$("#blink").html("监测正常");
}
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 : [ '用户来源' ]
},
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);
}
});
}