现在位置首页 / 前端开发 /正文

echarts3+java+ajax动态数据绑定形成图表

作者: IT小兵 | 2016年5月24日| 热度:℃ | 评论: |参与:

本站IT工作生活这点事分享了很多关于echarts+java的实例了,而且还发了一篇关于[echarts+java封装类实现图表的demo]的例子。本文将详细说明一下:Echarts3+java+ajax动态数据绑定形成图表的demo

echarts3已经出来很久了,官方说的很详细了:

  1. 更小体积的文件,满足更轻便的使用需求

  2. 更灵活的打包方式,可自由选择你需要的图表和组件

  3. 良好的自适应效果

  4. 专属的移动端交互体验

  5. 新增更多图表类型,更好的满足不同数据的处理需求 更多的搭配方案让你的数据呈现方式更个性和完美


先看效果图:

先从前端开始,详细演示如下过程:1.客户端通过ajax发送请求;2.服务器端Servlet接收请求;3.生成json数据并返回给客户端;4.客户端接收数据后显示。

1、jsp代码,也就是仿照官方例子拔过来就行。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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>

   result即为服务器返回的json对象,是由服务器返回的。

2、下面是服务端servlet的代码:

<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>

生成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);    
    }


自定义产品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;
    }
    
    
}

完美!


参考:

[echarts+ajax+ashx+json 动态获取后台数据实现饼图和柱状图]

[echarts+java封装类实现图表的demo]

[Echarts3模块化包引入时问题报[MODULE_MISS]问题]

[echarts最新版本echarts3使用timeline动态修改x轴]

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询