Echarts实时获取后台数据之三：Ajax实时获取数据

最新推荐文章于 2022-07-25 06:45:00 发布

「已注销」

最新推荐文章于 2022-07-25 06:45:00 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

文章标签： Echarts Ajax

本文链接：https://blog.youkuaiyun.com/StriverLi/article/details/86616366

本文介绍如何使用原始Ajax技术实现实时更新的ECharts图表，无需任何前端框架，直接从后端获取JSON数据并动态更新图表内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Ajax之后，效果就是图会根据后台数据实时变化，不会有加载动画。
首先，本人没用使用任何前端框架，用的是原始的Ajax，不需要导入任何文件。
代码如下：

function userAjax() {
	var dom = document.getElementById("userContainer");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	var xmlhttp = getXMLHttpRequest();
	// 绑定回调函数
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var Ajaxdata = [];
			var Ajaxcats = [];
			var i = 0;
			var jsonObj = eval("(" + xmlhttp.responseText + ")");
			for ( var key in jsonObj[0]) {
				// alert(key + ':' + jsonObj[0][key]);
				Ajaxcats[i] = key;
				Ajaxdata[i] = jsonObj[0][key];
				i++;
			}
			var series = [];
			series.push({
				data : Ajaxdata,
				type : 'bar',
				label : {
					show : true,
					position : 'top'
				},
			});
			option = {
				title : {
					text : '近12月注册用户统计',
					subtext : '纯属虚构',
					x : 'center'
				},
				xAxis : {
					type : 'category',
					data : Ajaxcats,
					axisLabel : {
						rotate : '30',
					}
				},
				yAxis : {
					type : 'value'
				},
				grid : {
					right : '0px',
				},
				
				series : series
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		}
	};
	// 3.open
	xmlhttp.open("GET", "/shixi/userAjax");
	// 4.send
	xmlhttp.send(null);
}

然后在用过setInterval函数设置定时调用这个函数即可实现功能，后台的话将数据存储到map中，然后转换为json数据，通过

response.getWriter().write(json.toString());

将数据传到前台。
其实很多框架中都封装了Ajax，如jQuery中，使Ajax的使用更加简洁方便，以后有写的话在来更新。