首页 > 代码库 > Echarts-echart和springMVC实现堆栈图

Echarts-echart和springMVC实现堆栈图

效果图:

技术分享

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

技术分享

1.部署好springMVCproject

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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/js/echarts.js"></script> 
   
   <!-- <script type="text/javascript" src="http://www.mamicode.com/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.project完毕整代码下载:

springEcharts.rar下载


參考站点:http://git.oschina.net/free/ECharts

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




Echarts-echart和springMVC实现堆栈图