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

最新推荐文章于 2024-05-01 19:17:00 发布

有故事的男人G

最新推荐文章于 2024-05-01 19:17:00 发布

阅读量1.2w

点赞数 15

文章标签： Echarts java jsp 数据统计图条状统计图

本文链接：https://blog.csdn.net/qq_41186788/article/details/79607005

版权

前言：

大家好，俺是老王，

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

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

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实例以及社区的案例也比较丰富，基本能够满足项目的需要，花一天不到的时间"掌握"一项数据可视化技术.

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

有故事的男人G

关注

15
点赞
踩
78

收藏

觉得还不错? 一键收藏
6
评论
ECharts与javaWeb的后台数据交互（光速上手）

前言：大家好，俺是老王，昨天做一个项目，用到了一个数据统计图，本人就google了半天，也是第一次看到ECharts这个图表库，然后就研究了会，做了个条形统计图，当然其他统计图的方法也是大同小异，以下教程分享。（觉得不好勿喷）　ECharts是使用 JavaScript 实现的" 开源 "可视化库，提供了创建多种多样的图标方式，包括坐标系，图例，提示，工具...
复制链接

扫一扫