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