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="../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.project完毕整代码下载：
參考站点：http://git.oschina.net/free/ECharts
