码迷，mamicode.com
首页 > 编程语言 > 详细

Echarts-echart和springMVC实现堆栈图

时间：2015-07-06 18:08:40      阅读：703      评论：0      收藏：0      [点我收藏+]

标签：echarts   图表   

效果图:

技术分享

通过工具栏切换成折线图：

技术分享

1.部署好springMVC工程

2.*****在lib中加入ECharts-2.2.4.jar   下载地址：http://git.oschina.net/free/ECharts

3.因为要用到fastJson所以还要导入其所需的jar包fastjson-1.2.5-sources.jar 和fastjson-1.2.5.jar

4.springMVC的服务层的代码：EchartsT.java

package com.service;

import com.github.abel533.echarts.Label;
import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.Title;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.LineType;
import com.github.abel533.echarts.code.Magic;
import com.github.abel533.echarts.code.MarkType;
import com.github.abel533.echarts.code.Orient;
import com.github.abel533.echarts.code.PointerType;
import com.github.abel533.echarts.code.SelectedMode;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.code.Y;
import com.github.abel533.echarts.data.Data;
import com.github.abel533.echarts.data.PointData;
import com.github.abel533.echarts.feature.MagicType;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Funnel;
import com.github.abel533.echarts.series.Line;
import com.github.abel533.echarts.series.Map;
import com.github.abel533.echarts.series.MapLocation;
import com.github.abel533.echarts.series.Pie;
import com.github.abel533.echarts.style.ItemStyle;
import com.github.abel533.echarts.style.LineStyle;

/**
 * @author lyx
 *	
 * 2015-6-12下午1,34,50
 *
 *springechart.com.service.EchartsT
 */
public class EchartsT {
 
    
    /**
     * @return
     * 堆积图
     */
    public Option stackChart()
    {
    	Option option = new Option();
    	
    	//标题
    	option.title("获取信息途径所占比重");
    	//提示框
    	option.tooltip().trigger(Trigger.axis);
    	option.tooltip().axisPointer().type(PointerType.shadow);
    	//图例说明
    	option.legend().data("直接访问","邮件营销","联盟广告","视频广告","搜索引擎","百度","谷歌","必应","其他");
    	//工具栏
    	option.toolbox().show(true).orient(Orient.vertical).x(X.right).y(Y.center)
    	.feature(Tool.mark,Tool.dataView,Tool.dataZoom,new MagicType(Magic.bar,Magic.line,Magic.stack,Magic.tiled),
    			Tool.restore,Tool.saveAsImage);
    	
    	//是否启用拖拽重计算特性
    	option.calculable(true);
    	
    	//x轴 -类目轴
    	option.xAxis(new CategoryAxis().data("周一","周二","周三","周四","周五","周六","周日"));
    	//Y轴 -值轴
    	option.yAxis(new ValueAxis());
    	
    	//系列 ,其中stack表示堆栈图的设置
    	Bar bar1 = new Bar("直接访问");
    	bar1.data(320, 332, 301, 334, 390, 330, 320);
    	
    	Bar bar2 = new Bar("邮件营销");
    	bar2.stack("广告");
    	bar2.data(120, 132, 101, 134, 90, 230, 210);
    	
    	Bar bar3 = new Bar("联盟广告");
    	bar3.stack("广告");
    	bar3.data(220, 182, 191, 234, 290, 330, 310);
    	
    	Bar bar4 = new Bar("视频广告");
    	bar4.stack("广告");
    	bar4.data(150, 232, 201, 154, 190, 330, 410);
    	
    	Bar bar5 = new Bar("搜索引擎");
    	bar5.data(862, 1018, 964, 1026, 1679, 1600, 1570);
    	//标记线
    	bar5.markLine().itemStyle().normal().lineStyle(new LineStyle().type(LineType.dashed));
        bar5.markLine().data(new PointData().type(MarkType.min),new PointData().type(MarkType.max));
    	
    	Bar bar6 = new Bar("百度");
    	bar6.stack("搜索引擎");
    	bar6.data(620, 732, 701, 734, 1090, 1130, 1120);
    	
    	Bar bar7 = new Bar("谷歌");
    	bar7.stack("搜索引擎");
    	bar7.data(120, 132, 101, 134, 290, 230, 220);
    	
     	Bar bar8 = new Bar("必应");
    	bar8.stack("搜索引擎");
    	bar8.data(60, 72, 71, 74, 190, 130, 110);
    	
    	Bar bar9 = new Bar("其他");
    	bar9.stack("搜索引擎");
    	bar9.data(62, 82, 91, 84, 109, 110, 120);
    	
    	//添加到系列中
    	option.series(bar1,bar2,bar3,bar4,bar5,bar6,bar7,bar8,bar9);

    	return option;
    }
}

5.控制层的代码：echartsContr.java

package com.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.alibaba.fastjson.JSON;
import com.github.abel533.echarts.Option;
import com.service.EchartsT;

/**
 * @author lyx
 *	
 * 2015-6-12下午1:36:51
 *
 *springechart.com.controller.echartsContr
 */
@Controller
@RequestMapping("/echarts")
public class echartsContr {
	
	EchartsT ech = new EchartsT();
	/**
	 * @param res
	 * @return
	 * 
	 * 堆栈图
	 */
	@RequestMapping("/stackChart")
	public String stackChart(HttpServletRequest res)
	{
		Option option = ech.stackChart();
		
		String opt = JSON.toJSONString(option);
		
		res.setAttribute("option", opt);
		
		return "/ec";
	}
}

6.  ec.jsp 页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
  <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
  </head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>
 
 <span style="white-space:pre">	</span><script type="text/javascript" src="../js/echarts.js"></script> 
   
    <script type="text/javascript">

    //路径配置
    	require.config({
    		paths:{
	    		 echarts: '../js'
	    		}
    	});
  
    	//获得后台传过来的JSON数据
    	var opt =${option};
    	//设置主要样式
    	require(
	    	[ //需要什么图形就加载什么图形 这里只用到了柱状图，只需加载bar就行
	    		'echarts',	
	    		'echarts/chart/bar',//柱状图
	    		'echarts/chart/line', //折线
	    		'echarts/chart/pie', //椭圆
	    		'echarts/chart/map', //地图
	    		'echarts/chart/funnel' //漏斗
	    	],
	    	function(ec){ 
	    		//初始化echart对象
	    		var chart =ec.init(document.getElementById('main'));//ec.init( $("#main"));

			   	chart.setOption(opt);
			   	
			  	 });
                      
   
   
    </script>
    
   
</body>
</html>

7.生成后的页面源码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
  <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
  </head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>

    <!-- ECharts单文件引入 -->
    <!--  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  --> 

 	 <script type="text/javascript" src="../js/echarts.js"></script> 
   
   <!-- <script type="text/javascript" src="js/echarts-all.js"></script> -->
    <script type="text/javascript">

    //路径配置
    	require.config({
    		paths:{
	    		 echarts: '../js'
	    		}
    	});
  
    	//获得后台传过来的JSON数据
    	var opt ={"calculable":true,"legend":{"data":["直接访问","邮件营销","联盟广告","视频广告","搜索引擎","百度","谷歌","必应","其他"]},"series":[{"data":[320,332,301,334,390,330,320],"name":"直接访问","type":"bar"},{"data":[120,132,101,134,90,230,210],"name":"邮件营销","stack":"广告","type":"bar"},{"data":[220,182,191,234,290,330,310],"name":"联盟广告","stack":"广告","type":"bar"},{"data":[150,232,201,154,190,330,410],"name":"视频广告","stack":"广告","type":"bar"},{"data":[862,1018,964,1026,1679,1600,1570],"markLine":{"data":[{"type":"min"},{"type":"max"}],"itemStyle":{"normal":{"lineStyle":{"type":"dashed"}}}},"name":"搜索引擎","type":"bar"},{"data":[620,732,701,734,1090,1130,1120],"name":"百度","stack":"搜索引擎","type":"bar"},{"data":[120,132,101,134,290,230,220],"name":"谷歌","stack":"搜索引擎","type":"bar"},{"data":[60,72,71,74,190,130,110],"name":"必应","stack":"搜索引擎","type":"bar"},{"data":[62,82,91,84,109,110,120],"name":"其他","stack":"搜索引擎","type":"bar"}],"title":{"text":"获取信息途径所占比重"},"toolbox":{"feature":{"mark":{"lineStyle":{"color":"#1e90ff","type":"dashed","width":2},"show":true,"title":{"mark":"辅助线开关","markClear":"清空辅助线","markUndo":"删除辅助线"}},"dataView":{"lang":["数据视图","关闭","刷新"],"readOnly":false,"show":true,"title":"数据视图"},"dataZoom":{"show":true,"title":{"dataZoom":"区域缩放","dataZoomReset":"区域缩放后退"}},"magicType":{"show":true,"title":{"line":"折线图切换","stack":"堆积","bar":"柱形图切换","tiled":"平铺"},"type":["bar","line","stack","tiled"]},"restore":{"show":true,"title":"还原"},"saveAsImage":{"lang":["点击保存"],"show":true,"title":"保存为图片","type":"png"}},"orient":"vertical","show":true,"x":"right","y":"center"},"tooltip":{"axisPointer":{"type":"shadow"},"trigger":"axis"},"xAxis":[{"data":["周一","周二","周三","周四","周五","周六","周日"],"type":"category"}],"yAxis":[{"type":"value"}]};
    	//设置主要样式
    	require(
	    	[
	    		'echarts',	
	    		'echarts/chart/bar',
	    		'echarts/chart/line',
	    		'echarts/chart/pie',
	    		'echarts/chart/map',
	    		'echarts/chart/funnel'
	    	],
	    	function(ec){ 
	    		//初始化echart对象
	    		var chart =ec.init(document.getElementById('main'));//ec.init( $("#main"));

			   	chart.setOption(opt);
			   	
			  	 });
                      
   
   
    </script>
    
   
</body>
</html>

8.工程完成整代码下载：

springEcharts.rar下载


参考网站：http://git.oschina.net/free/ECharts

通过上面网站作者所编写的ECharts-2.2.4.jar ,导入到我们工程中这样我们的页面中的js代码，就可以现在项目的后台生成，并通过json转换成字符串传入到页面中，在jsp页面接收传入的json格式的字符串，后就可以生成我们设置的图表了。


版权声明：本文为博主原创文章，未经博主允许不得转载。

Echarts-echart和springMVC实现堆栈图

标签：echarts   图表   

原文地址：http://blog.csdn.net/u013147600/article/details/46775145
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！