1、Echarts（3.x 版）官网实例的数据都是静态的，实际使用中往往会要求从服务器端取数据进行动态显示，官网教程里给出的异步数据加载很粗略，下面就以官网最简单的实例为例子，详细演示如下过程：1.客户端通过 ajax 发送请求；2.服务器端 Servlet 接收请求；3.生成 json 数据并返回给客户端；4.客户端接收数据后显示。1.客户端通过 ajax 发送请求先绘制一个最简单的 Echarts 图表：（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）EChartsvar myChart = echarts.init(document.getElementById(ma
2、in);/ 显示标题，图例和空的坐标轴myChart.setOption(title: text: 异步数据加载示例,tooltip: ,legend: data:销量,xAxis: data: ,yAxis: ,series: name: 销量,type: bar,data: );看到了吧，现在 option 中的 xAxis 和 yAxis 里的 data 都是空值。待会儿我们会用从服务器取回的数据去”填满“ 它。下面贴上补充了 ajax 部分的完整前端代码：EChartsvar myChart = echarts.init(document.getElementById(main);/
3、显示标题，图例和空的坐标轴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, /异步请求（同步请求将会锁住浏览器，
4、用户其他操作必须等待请求完成才可以执行）url : “TestServlet“, /请求发送到 TestServlet 处data : ,dataType : “json“, /返回数据形式为 jsonsuccess : function(result) /请求成功时执行该函数内容，result 即为服务器返回的 json对象if (result) for(var i=0;i2.服务器端 Servlet 接收请求客户端的请求 url 是TestServlet，那我们得先在 web.xml 配置以下映射：TestServlettest.TestServletTestServlet/TestSer
5、vlet然后就来着手写处理客户端请求的 TestServlet 啦！3.生成 json 数据并返回给客户端生成 Json 数据要用到额外的 jar 包，这里我使用的 jackson，json-lib 2010 年就没有再更新了 （2016-5-3 日更：发现 Google 出品的 Gson 也蛮好用的，重点是很小巧，只需引入一个 jar 就搞定，用法也很简单）简单介绍一下 jackson 的用法：先去 http:/ jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是 2.x 版本，jackson 官网不知为何不提供服
6、务了这三个 jar 让我一阵好找）：在项目的项目 WEB-INF/lib 下引入这三个 jar然后就可以在 TestServlet 里使用 jackson 提供的工具类了。（关于 jackson 的详细用法，这里贴一下官网教程：http:/ ）TestServlet 代码如下：package test;import java.io.IOException;import java.util.*;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.
7、HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;public class TestServlet extends HttpServlet Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException doPost(req,resp);Overri
8、deprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException List list = new ArrayList();/这里把“类别名称”和“销量”作为两个属性封装在一个 Product类里，每个 Product 类的对象都可以看作是一个类别（X 轴坐标值）与销量（Y轴坐标值）的集合list.add(new Product(“衬衣“, 10);list.add(new Product(“短袖“, 20);list.add
9、(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 类
10、中用到的自定义的 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.客户端接收数据后显示客户端接受服务器数据并解析后，就可以正常显示图表数据了：
