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