echarts 动态数据交互实例

来源：互联网发布：淘宝金牌卖家在哪编辑：程序博客网时间：2024/04/28 21:58

最近在学习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包，为了手机上显示美观

<!-- 移动设备优先（让项目友好的支持移动设备） --><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 准备一个具备大小（宽高）的

<body><div id="main"  style="width: 600px;height:400px;"></div></body>

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

 $(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);         }       }); } </script>

2，后台交互

a,新建ApplyServlet

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;@Overrideprotected 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

  <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

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

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

0 0