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完毕整代码下载：

springEcharts.rar下载

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

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

时间： 2024-10-30 16:26:00

Echarts-echart和springMVC实现堆栈图的相关文章

Echarts-echart和springMVC实现堆栈图（读取JSON文件数据）

这篇echarts的堆栈图主要是根据这篇D3.js堆栈图(http://blog.csdn.net/u013147600/article/details/46770415 )实现的. 效果图: 1.JSON文件数据: { "name":"某市2005-1010年利润情况", "product": [ { "name": "PC" , "sales": [ { "year&quo

【 D3.js 高级系列 — 3.0 】 堆栈图

堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑.智能手机.软件. 2005年,三种产品的利润分别为3000.2000.1100万. 2006年,三种产品的利润分别为1300.4000.1700万. 计算可得,2005年总利润为6100万,2006年为7000万. 如果要将2005年的利润用柱形表示,那么应该画三个矩形,三个矩形堆叠在一起.这时候就

转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针对上述所提出的疑问,我琢磨了一下ECharts图表组件.找到官方这样的一个适合的简单关系图:http://echarts.baidu.com/doc/example/force1.html 通过观察ECharts图表组件的简单关系图的数据结构,得出我要实现一个站点地图需要做哪些工作: 1.引入ech

使用echarts实现了一个折现图，数据是一天24小时

arr //你的数据 dataZoom : { show: true, realtime: true, startValue: arr.length - 240, endValue: arr.length } 使用echarts实现了一个折现图,数据是一天24小时,每隔30s从数据库取一次数据,但是这样可读性很低.所以需要在加载图片后,显示最近两个小时的数据,但是dataZoom只能控制起始值,用此方法来显示最近两小时的数据 原文地址:https://www.cnblogs.com/ronle/

使用Echarts几分钟制作出折线图、饼图、柱状图等

ECharts,缩写来自Enterprise Charts. ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer Data Visualization板块的开源项目.这里咱们结合上篇提到的Bootstrap简单栅格框架,来做一个小小的布局.学以致用嘛.从来不喜欢赘述,直接上代码,一切的解释,请看代码注释: <script type="text/javascript" src="js/jquery.min.j

echarts 动态生成多条折线图和动态获得x轴并于数字相对应

function drawZXT(id, data) {    myChart = echarts.init(document.getElementById(id));    option = {        title: {            text: '流量计折线图',            //subtext: '纯属虚构'        },        tooltip: {            trigger: 'axis',            axisPointer:

深入浅出ECharts系列 （二） 折线图

深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载的版本,也可以自己定制相应功能的版本,下面附上插件的下载地址: http://echarts.baidu.com/download.html 我们下载完整版为大家进行演示. 3. 正式开始 首先,我新建了一个MVC4项目,将下载的文件放到对应的位置: 然后新建一个控制器和对应的视图,添加对文件的引用

用Echart创建简单的折线图

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD

echarts入门基础，画折线图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ transform: translate(50%,50%); -webkit-transform: translate(-50%,-50%); -moz-transform: transla