echarts 动态数据交互实例

最新推荐文章于 2024-04-11 11:23:18 发布

ruoshui09172104

最新推荐文章于 2024-04-11 11:23:18 发布

阅读量1.8w

点赞数 5

分类专栏：前台框架文章标签： echarts 动态数据交互 ajax jquery bootstrap

本文链接：https://blog.csdn.net/ruoshui09172104/article/details/50579544

版权

前台框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在学习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;
	
	@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

  <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

ruoshui09172104

关注

5
点赞
踩
30

收藏

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

最近在学习echarts，找到了很多的资料，找起来比较麻烦，为了方便自己以后的使用，特此做个笔记。首先是echarts如何使用，要先下载echarts相关的包，我这边提供的是echarts3.0的下载地址：http://echarts.baidu.com/download.html之前看到echarts2.0的引入有两种方法：模块化单文件引入和标签式单文件引入，介绍如下，感兴趣的可以看一看
复制链接

扫一扫