Echarts通过Ajax实现动态数据加载
Echarts（3.x版）官网实例的数据都是静态的，实际使用中往往会要求从服务器端取数据进行动态显示，官网教程里给出的异步数据加载很粗略，下面就以官网最简单的实例为例子，详细演示如下过程：1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成json数据并返回给客户端；4.客户端接收数据后显示。
1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表：
（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title> <!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
}); </script> </body>
</html>
看到了吧，现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title> <!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
}); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names=[]; //类别数组（实际用来盛放X轴坐标值）
var nums=[]; //销量数组（实际用来盛放Y坐标值） $.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "TestServlet", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
}); } },
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
}) </script> </body>
</html>
2.服务器端Servlet接收请求
客户端的请求url是’TestServlet‘，那我们得先在web.xml配置以下映射：
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>test.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
然后就来着手写处理客户端请求的TestServlet啦！
3.生成json数据并返回给客户端
生成Json数据要用到额外的jar包，这里我使用的jackson，json-lib 2010年就没有再更新了… （2016-5-3日更：发现Google出品的Gson也蛮好用的，重点是很小巧，只需引入一个jar就搞定，用法也很简单）
简单介绍一下jackson的用法：
①：先去http://mvnrepository.com/下载 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官网不知为何不提供服务了…这三个jar让我一阵好找）
②：在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。（关于jackson的详细用法，这里贴一下官网教程：http://wiki.fasterxml.com/JacksonInFiveMinutes）
TestServlet代码如下：
package test; import java.io.IOException;
import java.util.*; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; public class TestServlet extends HttpServlet { @Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Product> list = new ArrayList<Product>(); //这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30)); ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类 String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组 //System.out.println(json); //将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}
TestServlet类中用到的自定义的Product类代码如下：
package test;
public class Product {
private String name; //类别名称
private int num; //销量
public Product(String name, int num) {
this.name = name;
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
4.客户端接收数据后显示
客户端接受服务器数据并解析后，就可以正常显示图表数据了：
本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-05/131719.htm
Echarts通过Ajax实现动态数据加载的更多相关文章
- 【微信小程序】模仿58同城页面制作以及动态数据加载
完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...
- ECharts动态数据加载
最近有用到ECharts做可视化报表,小结一下 一.准备数据 1.官网下载echarts.min.js 2.引入jquery.js 3.请求用的json数据 { "list":[ ...
- 实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）
实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624 ...
- ios ableviewcell的动态加载数据，模仿喜马拉雅动态数据加载
iphone(UITableViewCell)动态加载图片http://developer.apple.com/library/ios/#samplecode/LazyTableImages/Intr ...
- AJAX 基本结构 数据加载
AJAX -- 网页数据异步加载 .ashx 一般处理程序 json 数据格式,在不同的语言之间传递数据 对象格式: "{"key":"value& ...
- echarts ajax数据加载方法
一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...
- echarts异步数据加载(在下拉框选择事件中异步更新数据)
接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- Jquery使用ajax以及angularjs 动态模板加载并进行渲染
1. 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
随机推荐
- 登陆sqlserver及修改端口号 （转）
在一台计算机上面同时安装两个sql server数据库实例,第一次安装默认为机器名,端口号为1433 1.如果不知道服务器名,却想登陆的话可以直接输入127.0.0.1登陆之后,在新建查询中输入:SE ...
- Java面向对象的三大特征
Java面向对象的三大特征 java面向对象的三大特征:“封装.继承.多态”.更多Java技术知识,请登陆疯狂软件教育官网.微信搜索微信号:疯狂软件,参加2015年优惠活动,有机会获得优惠劵和代金劵. ...
- Design Patterns
经典的<设计模式>一书归纳出23种设计模式,本文按<易学设计模式>一书归纳分类如下:1．创建型模式 前面讲过,社会化的分工越来越细,自然在软件设计方面也是如此,因此对象的创建和 ...
- MSDN在线
https://msdn.microsoft.com/zh-cn/library/aa139615.aspx
- ios--NSCalendar NSDateComponents
原文: ios时间那点事--NSCalendar NSDateComponents http://my.oschina.net/yongbin45/blog/156181 目录[-] iOS时间那点事 ...
- 在VS2010 中兼容Qt4和Qt5
1,同时安装Qt4和Qt5 Qt_add,然后在 2. 如果之前的项目使用Qt4编写的,如果新添加新的类和ui的话,一定要选择Qt Add_in 1.1.11,不然就无法生成moc文件,随便选择 Ch ...
- 使用busybox构建根文件系统
当我们在Qemu上运行起来自己编译的内核之后,需要使用busybox构建一个文件系统,将此文件系统挂载上去就可以使用busybox提供的各种命令了. 1.编译安装busybox 源码下载地址:http ...
- Java Abstract Class
在Baths-stomp里面的每个Fluent Interface Interactor Impl,都继承了MarketDataAccessor,which is an abstract class. ...
- array_count_values函数
array_count_values() 函数用于统计数组中所有值出现的次数. 本函数返回一个数组,其元素的键名是原数组的值,键值是该值在原数组中出现的次数. 例子 <?php $a=array ...
- Inno打包教程_百度经验
Inno打包教程 Inno工具,是比较常用的打包软件.简简单单,一招叫你学会使用inno打包. 工具/原料 inno setup 软件 方法/步骤 双击桌面的:Inno setup compiler图 ...