ECharts Java 动态加载数据

1、前台JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ECharts</title>
	<script type="text/javascript" src="${ctx}/plugins/echarts-2.2.1/echarts.js"></script>
	<script type="text/javascript" src="${ctx}/plugins/jquery-1.8.3/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		// 配置路径
		require.config({
			paths: {
				echarts: '${ctx}/plugins/echarts-2.2.1'
			}
		});
		
		// 按需加载
		require(
			[
			 	'echarts', 
			 	'echarts/chart/bar',
			 	'echarts/chart/line'
			],
			function (ec) {
				var chart = document.getElementById('chart');
				var echart = ec.init(chart);
				
				echart.showLoading({
					text: '正在努力加载中...'
				});
				
				var categories = [];
				var values = [];
				
				// 同步执行
				$.ajaxSettings.async = false;
				
				// 加载数据
				$.getJSON('${ctx}/dataAccessServlet', 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
					    }
					]
				};
				
				echart.setOption(option);
				echart.hideLoading();
			}
		);
	</script>
</head>
<body>
	<div id="chart" style="width: 580px;height: 420px;margin: 0 auto;border: 1px solid gray;"></div>
</body>
</html>

2、后台JSON数据

protected void doPost(HttpServletRequest request,
		HttpServletResponse response) 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, request, response);
}

3、FastjsonPropertyFilter

package com.echarts.utils.json;

import java.util.HashSet;
import java.util.Set;

import com.alibaba.fastjson.serializer.PropertyFilter;

/**
 * FASTJSON属性过滤器
 * 
 * @author MrChu
 * @version 1.0
 * @date 2015年3月12日
 */
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;
	}
	
}

4、JsonUtils

package com.echarts.utils.json;

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;

/**
 * JSON工具类
 * 
 * @author MrChu
 * @version 1.0
 * @date 2015年3月12日
 */
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();
			}
		}
	}

}

5、最终实现效果

ECharts首页：http://echarts.baidu.com/

ECharts Java 类库：http://git.oschina.net/free/ECharts