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实现动态数据加载的更多相关文章

  1. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...

  2. ECharts动态数据加载

    最近有用到ECharts做可视化报表,小结一下 一.准备数据 1.官网下载echarts.min.js 2.引入jquery.js 3.请求用的json数据 { "list":[ ...

  3. 实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）

    实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624 ...

  4. ios ableviewcell的动态加载数据，模仿喜马拉雅动态数据加载

    iphone(UITableViewCell)动态加载图片http://developer.apple.com/library/ios/#samplecode/LazyTableImages/Intr ...

  5. AJAX 基本结构 数据加载

    AJAX -- 网页数据异步加载 .ashx 一般处理程序   json 数据格式,在不同的语言之间传递数据 对象格式:     "{"key":"value& ...

  6. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

  7. echarts异步数据加载(在下拉框选择事件中异步更新数据)

    接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

  8. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  9. Jquery使用ajax以及angularjs 动态模板加载并进行渲染

    1. 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

随机推荐

  1. iOS开发中的远程推送实现(最新，支持iOS9)

    我的个人项目<丁丁印记>中加入了远程推送功能,按照操作说明去做还是比较容易实现的,但是学的不够不系统,而且iOS8之后的推送和之前的版本是有所不同的,因此这篇文章希望总结一下最新的iOS推 ...

  2. mybatis 的 resulttype 和resultMap

    resultType适合返回值比较简单的,比如一个数据类型,或者一个对象.比如对象的情况,是将表的列名和对象的属性一一对应的. 但是resultType无法处理返回值比较复杂的,特别是连接查询,需要用 ...

  3. servlet filter可以用注解

    现在好像可以在新建一个servlet.filter等的的时候在选项中设置urlmapping,通过注解的方式来监控action,以及设置初始参数initparameter.

  4. 按Right-BICEP要求的任务二的测试

    测试方法:Right-BICEP 测试计划: 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.P-是否满足性能要求? 4.是否有乘除法? 5.是否有括号? 6.是否有输出方 ...

  5. poj1141 区间dp+路径

    //Accepted 176 KB 47 ms //感谢大神们为我们这群渣渣铺平前进的道路!! //用scanf("%s",s)!=EOF WA到死 #include <cs ...

  6. openstack 中 log模块分析

    1 . 所在模块,一般在openstack/common/log.py,其实最主要的还是调用了python中的logging模块: 入口函数在 def setup(product_name, vers ...

  7. 极客DIY：RFID飞贼打造一款远距离渗透利器

    本文使用最新的渗透工具RFID飞贼(Tastic RFID Thief)和RFID感应破解技术来获取一些拥有安防的建筑物的访问权限. Tastic RFID Thief是一个无声远距离RFID读卡器, ...

  8. hdoj 2059 ：龟兔赛跑 (DP)[转]

      转的别人的找了很多就这个比较好理解.   Problem Description 据说在很久很久以前,可怜的兔子经历了人生中最大的打击——赛跑输给乌龟后,心中郁闷,发誓要报仇雪恨,于是躲进了杭州下 ...

  9. Objects and Data Structures

    Date Abstraction Hiding implementation is not just a matter of putting a layer of fucntions between ...

  10. [转]Why Not Paxos

    http://blog.csdn.net/cszhouwei/article/details/38374603 Why Not Paxos Paxos算法是莱斯利·兰伯特(LeslieLamport, ...