1. 程式人生 > >echarts 動態資料互動例項

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