Echarts实时获取后台数据之三:Ajax实时获取数据
时间:2019-01-23
本文章向大家介绍Echarts实时获取后台数据之三:Ajax实时获取数据,主要包括Echarts实时获取后台数据之三:Ajax实时获取数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
使用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的使用更加简洁方便,以后有写的话在来更新。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 非零环绕规则
- Linux被中断的系统如何调用详解
- centos 修改ssh默认端口号的方法示例
- Linux中特殊权限SUID、SGID与SBIT的深入讲解
- linux新文件权限设置之umask的深入理解
- 在 CentOS 8/RHEL 8 上安装和使用 Cockpit的方法
- Linux删除文件提示Operation not permitted的处理办法
- 微任务与宏任务
- Linux 文件权限的详细介绍
- Linux统计一个文件中特定字符个数的方法
- CentOS7 安装 zabbix 4.0 教程(图文详解)
- 浅谈简单使用CentOS7防火墙及开放端口
- Linux后台运行Python程序的几种方法讲解
- tr命令在统计英文单词出现频率中的妙用
- 浅析CentOS8虚拟机访问Windows10主机文件夹方法