前言：
大家好，俺是老王，
昨天做一个项目，用到了一个数据统计图，
本人就google了半天，
也是第一次看到ECharts这个图表库，
然后就研究了会，做了个条形统计图，
当然其他统计图的方法也是大同小异，以下教程分享。（觉得不好勿喷）
ECharts是使用 JavaScript 实现的" 开源 "可视化库，提供了创建多种多样的图标方式，包括坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。
如果你想要用较少的代码实现比较酷炫的数据统计表，echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考： http://echarts.baidu.com 感兴趣可以先一睹为快！！！
演示实例： ECharts有不同的版本，接触过2.0系列,3.0系列（常用，本文以4.04版本示例），目前已经出到了最新的4.0后版本。
注意：我搭建的框架是Maevn+Spring+Spring-mvc+mybatis。
数据库：MySQL 工具：Eclipse （整合框架代码就不写了 直接开始写java和Echarts整合代码）
<script type="text/javascript" src="./js/echarts.js"></script>
2.创建一个div容器 放在body里，我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
3.新建一个Jsp页面。代码如下：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<script type="text/javascript" src="<%=request.getContextPath()%>/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
4.以上完成后启动项目进去可以看到如下视图
5.第一步。我们要把 数据 放到统计图里面，先把数据查出来，我用是<a>标签发送请求到后台；
<a href="<%=request.getContextPath()%>/user/login.do">查询统计图</a>
6.发送请求到Controller层，后台以Controller层为例，代码如下:
我们通过注入的Service层对象，查询并获取到了数据库中User表的信息集合，并通过model属性传递到了前台，页面跳转至index.jsp。
@RequestMapping("/login")
public String login(Model model){
List<User> list=userService.login();
model.addAttribute("list", list);
return "/index"; //把list集合里的数据带到你需要展示统计图的页面
}
7.index代码如下：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<script type="text/javascript" src="<%=request.getContextPath()%>/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text : '条状统计图'
},
tooltip : {},
legend : {
data : [ '销量' ]
},
xAxis : {
data : [
<c:forEach var="i" begin="0" end="${list.size()-1}"> '${list[i].name}', </c:forEach>
],
},
yAxis : {},
series :[ {
name : '销量',
type : 'bar',
data: [ <c:forEach var="i" begin="0" end="${list.size()-1}"> '${list[i].age}', </c:forEach>]
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
标红的el表达式中forEach遍历User集合list分别将 name和age 里的数据 填充到横纵坐标的data数组中，实现动态数据可视化。启动项目，访问到该页面可以看到如下效果，即为成功。
小结
就目前项目中数据结构而言，对象关系图、环形统计图、柱状图等等都是应用很广泛的图表，ECharts实例以及社区的案例也比较丰富，基本能够满足项目的需要，花一天不到的时间"掌握"一项数据可视化技术.