echarts 动态数据交互实例
最近在学习echarts,找到了很多的资料,找起来比较麻烦,为了方便自己以后的使用,特此做个笔记。
首先是echarts如何使用,要先下载echarts相关的包,我这边提供的是echarts3.0的下载地址:http://echarts.baidu.com/download.html</p><p>
之前看到echarts2.0的引入有两种方法:模块化单文件引入和标签式单文件引入,介绍如下,感兴趣的可以看一看:http://study.163.com/course/introduction.htm?
之前在网上找了好多资料,都没有实现,自己整理了各路大神的资料,下面我将介绍一个Demo,实现动态数据交互
1,前台jsp页面</p><p>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实例,并配置</p><p></p><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);
- }
- });
- }
- t;/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;
- @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);
- }
- }
- <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();
- }
- }
- }
- }
- 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