长沙做企业网站推广的公司,抖音代运营计划书,wordpress链接出错,模板网站外链做不起来本人由于项目需要#xff0c;在状态变化的时候需要动态绘制对应数据的EChart图表#xff0c;并且不刷新整个网页。
所以就用Ajax动态画EChart图表#xff0c;下面是开发过程中遇到的一些坑的总结。
流程#xff1a;页面首次加载时展示一幅原始的图形#xff0c;若后台数据…本人由于项目需要在状态变化的时候需要动态绘制对应数据的EChart图表并且不刷新整个网页。
所以就用Ajax动态画EChart图表下面是开发过程中遇到的一些坑的总结。
流程页面首次加载时展示一幅原始的图形若后台数据更新则进行一定的业务处理后前端通过AJAX动态绘制出最新的数据
一、前端JSP代码准备一个放图表的容器 div idAScanChart stylewidth:50%; height: 60%;float: left;/div//初始化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 xDataeval(( monitorObject[0].xDataJson )); var aScanDataeval(( monitorObject[0].aScanDataJosn )); var bScanDataeval(( 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); } }); } 注var showAlertJsonObject eval(( showAlertJsonString[0] ));var xDataeval(( monitorObject[0].xDataJson ));var aScanDataeval(( monitorObject[0].aScanDataJosn ));var bScanDataeval(( monitorObject[0].baseAScanDataJosn ));1.这4句代码是关键由于后端传过来的是JSON字符串而ECHart的图表需要JSON对象所有首先将JSON字符串转JSON对象第一句这样还没完现在取出的数据还是字符串需要将对象.对应的字段再进行一次JSON转换这是我项目中的坑。2.由于最开始画了图所以更新时加上myAScan.clear();。先清空再画3.有些情况下若未更新则设置Option的时候给第2个参数赋为true即可
