echarts 动态数据交互实例

最新推荐文章于 2024-05-29 11:43:42 发布

westbrook_wang

最新推荐文章于 2024-05-29 11:43:42 发布

阅读量1.1k

点赞数

echarts 动态数据交互实例

原创 2016年01月25日 13:44:43

最近在学习echarts，找到了很多的资料，找起来比较麻烦，为了方便自己以后的使用，特此做个笔记。

首先是echarts如何使用，要先下载echarts相关的包，我这边提供的是echarts3.0的下载地址：http://echarts.baidu.com/download.html

之前看到echarts2.0的引入有两种方法：模块化单文件引入和标签式单文件引入，介绍如下，感兴趣的可以看一看：http://study.163.com/course/introduction.htm?

之前在网上找了好多资料，都没有实现，自己整理了各路大神的资料，下面我将介绍一个Demo，实现动态数据交互

1，前台jsp页面a.首先引入echarts jar包，我这里还加入了jquery jar包和bootstrap jar包，为了手机上显示美观

[html]view plain copy 
    
 <!-- 移动设备优先（让项目友好的支持移动设备） -->  
 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">  
 <title>echarts动态数据交互</title>  
 <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">  
 <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.1.4.js"></script>  
 <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>  
 <script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts.js"></script>  

b.其次为 ECharts 准备一个具备大小（宽高）的

[html]view plain copy 
    
 <body>  
 <div id="main"  style="width: 600px;height:400px;"></div>  
 </body>  

c，下面就是最主要的部分，初始化echarts实例，并配置<pre name="code" class="javascript"><script type="text/javascript">

[java]view plain copy 
    
 $(function(){  
     var url = '<%=request.getContextPath()%>/ApplyServlet';  
 var id = 'main';  
 setChartBar(url);  
 });  
   
 /设置ajax访问后台填充柱图  
 function setChartBar(url){  
   
  var Chart=echarts.init(document.getElementById("main"));  
  Chart.showLoading(  
          {text: 'Loding...'  }  
 );  
  var categories=[];  
  var values=[];  
  $.ajax({  
         url:url,  
         dataType:"json",  
         type:'post',  
         success:function(json){  
           
             categories = json.categories;    
            values = json.values;   
             
         var option = {    
                 tooltip: {    
                     show: true    
                 },    
                 legend: {    
                     data: ['销量']    
                 },    
                 xAxis: [    
                     {    
                         type: 'category',    
                         data: categories    
                     }    
                 ],    
                 yAxis: [    
                     {    
                         type: 'value'    
                     }    
                 ],    
                 series: [    
                     {    
                         'name': '销量',    
                         'type': 'bar',    
                         'data': values    
                     }    
                 ]    
             };  
         Chart.hideLoading();  
         Chart.setOption(option);    
         }  
         });  
 }   
   
 t;/script>  

2，后台交互

a,新建ApplyServlet

[java]view plain copy 
    
 package com.fpp.action;  
   
 import java.io.IOException;  
 import java.util.HashMap;  
 import java.util.Map;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 import com.fpp.util.JsonUtils;  
   
 public class ApplyServlet extends HttpServlet {  
   
     /** 
      *  
      */  
     private static final long serialVersionUID = 1L;  
       
     @Override  
     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
           
         String[] categories = {"鞋", "衬衫", "外套", "牛仔裤"};    
         Integer[] values = {80, 50, 75, 100};    
         Map<String, Object> json = new HashMap<String, Object>();    
         json.put("categories", categories);    
         json.put("values", values);    
         JsonUtils.writeJson(json, req, resp);    
     }  
   
 }  

b.配置web.xml

[html]view plain copy 
    
 <servlet>  
   <servlet-name>ApplyServlet</servlet-name>  
   <servlet-class>com.fpp.action.ApplyServlet</servlet-class>  
 </servlet>  
 <servlet-mapping>  
   <servlet-name>ApplyServlet</servlet-name>  
   <url-pattern>/ApplyServlet</url-pattern>  
 </servlet-mapping>  

c，配置一个工具类JsonUtils

[java]view plain copy 
    
 package com.fpp.util;  
   
 import java.io.IOException;  
 import java.io.PrintWriter;  
 import java.util.Arrays;  
   
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 import com.alibaba.fastjson.JSON;  
 import com.alibaba.fastjson.serializer.SerializerFeature;  
   
 public class JsonUtils {  
     public static void writeJson(Object object,     
             HttpServletRequest request, HttpServletResponse response) {    
         writeJsonByFilter(object, null, null, request, response);    
     }    
         
     public static void writeJsonByIncludesProperties(Object object, String[] includesProperties,    
             HttpServletRequest request, HttpServletResponse response) {    
         writeJsonByFilter(object, includesProperties, null, request, response);    
     }    
         
     public static void writeJsonByExcludesProperties(Object object, String[] excludesProperties,    
             HttpServletRequest request, HttpServletResponse response) {    
         writeJsonByFilter(object, null, excludesProperties, request, response);    
     }    
         
     public static void writeJsonByFilter(Object object, String[] includesProperties,    
             String[] excludesProperties, HttpServletRequest request, HttpServletResponse response) {    
         response.setContentType("text/html;charset=utf-8");    
         response.setHeader("Cache-Control", "no-cache");    
         PrintWriter writer = null;    
         try {    
             writer = response.getWriter();    
             FastjsonPropertyFilter filter = new FastjsonPropertyFilter();    
             if (includesProperties != null && includesProperties.length > 0) {    
                 filter.getIncludes().addAll(Arrays.<String> asList(includesProperties));    
             }    
             if (excludesProperties != null && excludesProperties.length > 0) {    
                 filter.getExcludes().addAll(Arrays.<String> asList(excludesProperties));    
             }    
             String userAgent = request.getHeader("User-Agent");    
             if (userAgent.indexOf("MSIE") > -1 && (userAgent.indexOf("MSIE 6") > -1)) {    
                 writer.write(JSON.toJSONString(object, filter,     
                         SerializerFeature.WriteDateUseDateFormat,     
                         SerializerFeature.DisableCircularReferenceDetect,     
                         SerializerFeature.BrowserCompatible));    
             } else {    
                 writer.write(JSON.toJSONString(object, filter,     
                         SerializerFeature.WriteDateUseDateFormat,     
                         SerializerFeature.DisableCircularReferenceDetect));    
             }    
             writer.flush();    
         } catch (IOException e) {    
             e.printStackTrace();    
         } finally {    
             if (writer != null) {    
                 writer.close();    
             }    
         }    
     }    
 }  

d.FastjsonPropertyFilter,注意，这里需要引入一个包 fastjson-1.2.2.jar

[java]view plain copy 
    
 package com.fpp.util;  
   
 import java.util.HashSet;  
 import java.util.Set;  
   
 import com.alibaba.fastjson.serializer.PropertyFilter;  
   
 public class FastjsonPropertyFilter implements PropertyFilter {    
       
     private final Set<String> includes = new HashSet<String>();    
     private final Set<String> excludes = new HashSet<String>();    
         
     public boolean apply(Object source, String name, Object value) {    
         if (excludes.contains(name)) {    
             return false;    
         }    
         if (excludes.contains(source.getClass().getSimpleName() + "." + name)) {    
             return false;    
         }    
         if (includes.size() == 0 || includes.contains(name)) {    
             return true;    
         }    
         if (includes.contains(source.getClass().getSimpleName() + "." + name)) {    
             return true;    
         }    
         return false;    
     }    
         
     public Set<String> getIncludes() {    
         return includes;    
     }    
         
     public Set<String> getExcludes() {    
         return excludes;    
     }    
         
 }    

3，最终的效果

源码地址：点击打开链接

学习相关网址：
echarts jar包下载地址：http://echarts.baidu.com/download.html
echarts API :http://echarts.baidu.com/api.html#echarts
echarts 实例：http://echarts.baidu.com/echarts2/doc/example.html
echarts 配置：http://echarts.baidu.com/option.html#series-pie.data

westbrook_wang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
echarts 动态数据交互实例

echarts 动态数据交互实例原创 2016年01月25日 13:44:43标签：echarts /动态数据交互 /ajax /jquery /bootstrap5339最近在学习echarts，找到了很多的资料，找起来比较麻烦，为了方便自己以后的使用，特此做个笔记。首先是echarts如何使用，要先下载echarts相关的包，
复制链接

扫一扫