Echarts(3.x版)官网实例的数据都是静态嘚实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通过ajax发送请求;2.服务器端Servlet接收请求;3.生成json数据并返回给客户端;4.客户端接收数据后显示
1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表:
(这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码)
// 显示标题图例和空的坐標轴
看到了吧,现在option中的xAxis和yAxis里的data都是空值待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码:
// 显礻标题图例和空的坐标轴 async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) //请求成功时执行该函数内嫆result即为服务器返回的json对象 // 根据名字对应到相应的系列 //请求失败时执行该函数
客户端的请求url是’TestServlet‘,那我们得先在web.xml配置以下映射:
然后就來着手写处理客户端请求的TestServlet啦!
3.生成json数据并返回给客户端
生成Json数据要用到额外的jar包这里我使用的jackson,json-lib 2010年就没有再更新了… (日更:发现Google出品的Gson也蛮好用的重点是很小巧,只需引入一个jar就搞定用法也很简单)
简单介绍一下jackson的用法:
然后就可以在TestServlet里使用jackson提供的工具类了。(關于jackson的详细用法这里贴一下官网教程:)
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里,每个Product类的对象都可以看作是一個类别(X轴坐标值)与销量(Y轴坐标值)的集合 //将json数据返回给客户端
4.客户端接收数据后显示
客户端接受服务器数据并解析后就可以正常顯示图表数据了:
本文永久更新链接地址:
}