[转载]Echarts小结——通过Ajax实现动态数据加载

    之前所写的图表以及官网的示例都是静态，但通常我们都要从服务器端获取数据来实现数据显示，下面将从简单示例来介绍着一过程 。1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成json数据并返回给客户端；4.客户端接收数据后显示。
1.客户端通过ajax发送请求

先绘制一个最简单的Echarts图表：
这个可以引用官网柱状图的示例，就不多加介绍了。
在option中的xAxis和yAxis里的data都是空值。待会儿我们从服务器取回的数据就填在此处

ajax实现代码

         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

2.服务器端Servlet接收请求

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

    
        TestServlet
        test.TestServlet
    
    
        TestServlet
        /TestServlet
    

3.生成json数据并返回给客户端
简单介绍一下jackson的用法：

①：先去http://mvnrepository.com/下载 jackson-core.jar，jackson-annotations.jar，jackson-databind.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("衬衣", 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.客户端接收数据后显示
客户端接受服务器数据并解析后，就可以正常显示图表数据了。