Echarts-echart和springMVC实现堆栈图

效果图:



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

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格式的字符串，后就可以生成我们设置的图表了。