转发：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);
}
});
}

注：

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句代码是关键：由于后端传过来的是JSON字符串，而ECHart的图表需要JSON对象，所有首先将JSON字符串转JSON对象（第一句），这样还没完，现在取出的数据还是字符串，需要将对象.对应的字段，再进行一次JSON转换（这是我项目中的坑）。

2.由于最开始画了图，所以更新时加上myAScan.clear();。先清空再画

3.有些情况下若未更新，则设置Option的时候，给第2个参数赋为true即可

转发：Ajax动态画EChart图表相关推荐

canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
Echarts3通过ajax动态获取数据，30秒定时图表数据,设置图表线条颜色和粗细
Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细代码块 <!DOCTYPE html> <head><meta charset=&q ...
ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
vue动态给散点图每个圆球设置背景色 - echart图表
如图所示: 代码如下:(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html> <head><meta charset=&qu ...
页面中动态画有超连接的图
最近有个项目,客户要求在客户端能动态显示不同年份数据,用折线图来表示,并且单击相关年份能查看详细数据,这里就有个问题放在面前,要从数据库里动态生成折线图,并且不只图,还能友好的操作. 分析了一下,可以 ...
echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}back ...
动态改变eachers图表高_让你的Excel图表动起来
有读者提了这样一个问题,想要制作如下的动态图表,要怎么实现? 动态图表展示.gif 可以看到,这个动态效果里有4种选择器,左上方的组合框呈现出选择不同的方案展示相应柱形图的效果: 中间的复选框勾上显示 ...
echart图表缩放到一定比例（可自定义）后，停止放大，还可以缩小回去
一.需求: 有时候,我们有这样的需求:当echart图表(特别是折线图)的数据量很大,客户要求可以放大图表来仔细查看数据.echart有dataZoom这种技术来支持,也蛮好用的.但是有的客户就是很刁 ...
Cesium：实现动态画多边形并测量面积
运行效果知识点相比于Cesium实现动态画点.线并测距代码原理是差不多的,我做了一些优化,动态添加标签,而不是在直接写在html中,感觉对性能有一定优化. 这个代码里我把求面积的注释了,因为没法直 ...

转发：Ajax动态画EChart图表

转发：Ajax动态画EChart图表相关推荐

最新文章

热门文章