Echarts通过Ajax实现动态数据加载

Echarts（3.x版）官网实例的数据都是静态的，实际使用中往往会要求从服务器端取数据进行动态显示，官网教程里给出的异步数据加载很粗略，下面就以官网最简单的实例为例子，详细演示如下过程：1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成json数据并返回给客户端；4.客户端接收数据后显示。

1.客户端通过ajax发送请求

先绘制一个最简单的Echarts图表：

（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）

看到了吧，现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。

下面贴上补充了ajax部分的完整前端代码：

2.服务器端Servlet接收请求

客户端的请求url是’TestServlet‘，那我们得先在web.xml配置以下映射：

TestServlet

test.TestServlet

TestServlet

/TestServlet

然后就来着手写处理客户端请求的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 list = new ArrayList();

//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合

list.add(new Product(\"衬衣\

list.add(new Product(\"短袖\

list.add(new Product(\"大衣\

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.客户端接收数据后显示

客户端接受服务器数据并解析后，就可以正常显示图表数据了：