ECharts与javaWeb的后台数据交互(光速上手)

时间:2023-01-27 13:19:55

前言:  


大家好,俺是老王,


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


本人就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引入;
                           <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.以上完成后启动项目进去可以看到如下视图

                           ECharts与javaWeb的后台数据交互(光速上手)

                     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与javaWeb的后台数据交互(光速上手)

小结

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


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