ECharts与javaWeb的后台数据交互（光速上手）

前言：  

大家好，俺是老王，

昨天做一个项目，用到了一个数据统计图，

本人就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整合代码）

               1.首先我下载的是一个4.0.4的一个源代码，下载出来就是一个js文件：echarts.js。然后将echarts.js引入；

                            2.创建一个div容器 放在body里，我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

                            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"%>	














     

                              4.以上完成后启动项目进去可以看到如下视图

                           

                     5.第一步。我们要把 数据 放到统计图里面，先把数据查出来，我用是标签发送请求到后台；

                  查询统计图

                        6.发送请求到Controller层，后台以Controller层为例，代码如下:

                                  

          我们通过注入的Service层对象，查询并获取到了数据库中User表的信息集合，并通过model属性传递到了前台，页面跳转至index.jsp。

        @RequestMapping("/login")
	public String login(Model model){
		
           List 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"%>	














  




	

标红的el表达式中forEach遍历User集合list分别将 name和age 里的数据 填充到横纵坐标的data数组中，实现动态数据可视化。启动项目，访问到该页面可以看到如下效果，即为成功。

                   

小结

　　就目前项目中数据结构而言，对象关系图、环形统计图、柱状图等等都是应用很广泛的图表，ECharts实例以及社区的案例也比较丰富，基本能够满足项目的需要，花一天不到的时间"掌握"一项数据可视化技术.

如果有觉得不够全面，请留言，本人将手把手教学。共同探讨，共同学习.