//常量定义
public class Constant {

	public static Integer PM_YEAR_NO = 5;

}

//action

public class ZhiBiaoPmAction extends BaseAction {

	private static final long serialVersionUID = 1L;

	@Autowired

	ZhiBiaoPmService zbser;

	public String cn_pm25() {

		Integer year = Integer.valueOf(Tool.getCurDateByType("yyyy"));

		List<Map<String, Object>> pmlt = zbser.getPM25lt(year);

		request.setAttribute("year", year);

		JSONObject result = JSONObject.fromObject(zbser.dataset(pmlt, year));

		request.setAttribute("result", result);

		JSONObject timeline = JSONObject.fromObject(zbser.yearset(year));

		request.setAttribute("timeline", timeline);

		return "cn_pm25";

	}

}

//Service

@Service

public class ZhiBiaoPmService {

	@Autowired

	ZhiBiaoPmDao pmdao;

	public List<Map<String, Object>> getPM25lt(Integer year) {

		return pmdao.getPM25lt(year);

	}

	public String dataset(List<Map<String, Object>> lt, Integer year) {

		StringBuffer jsonstr = new StringBuffer("");

		Map<String, Object> map = null;

		jsonstr.append("{");

		for (int j = year - Constant.PM_YEAR_NO; j < year; j++) {

			jsonstr.append("data:{title:{'text':'" + j + "年pm含量'},");

			jsonstr.append("series:[{");

			jsonstr.append("'data':[");

			for (int i = 0; i < lt.size(); i++) {

				map = lt.get(i);

				jsonstr.append("{name:'").append(map.get("regionname"));

				jsonstr.append("'").append(",value:").append(map.get("y" + j))

						.append("}");

				jsonstr.append((i == lt.size() - 1) ? "" : ",");

			}

			jsonstr.append("]");

			jsonstr.append("}]");

			jsonstr.append("}").append(j == year - 1 ? "" : ",");

		}

		jsonstr.append("}");

		System.out.println(jsonstr);

		return jsonstr.toString();

	}

	public String yearset(Integer year) {

		StringBuffer jsonstr = new StringBuffer("");

		jsonstr.append("{data:[");

		for (int j = year - Constant.PM_YEAR_NO; j < year; j++) {

			jsonstr.append("'").append(j).append("-01-01'");

			jsonstr.append(j == year - 1 ? "" : ",");

		}

		jsonstr.append("]}");

		return jsonstr.toString();

	}

}

　//Dao

@Repository

public class ZhiBiaoPmDao extends BaseDao<T, Serializable> {

	public List<Map<String, Object>> getPM25lt(Integer year) {

		StringBuffer sql = new StringBuffer();

		sql.append(" select t2.regionname");

		for (int i = year - Constant.PM_YEAR_NO; i < year; i++) {

			sql.append(" ,isnull([").append(i).append("],0) as 'y").append(i)

					.append("'");

		}

		sql.append(" from (");

		sql.append(" select qyregion_code");

		for (int i = year - Constant.PM_YEAR_NO; i < year; i++) {

			sql.append(" ,[").append(i).append("] as '").append(i).append("'");

		}

		sql.append(" from (");

		sql.append(" select qynianfen,qyregion_code,cast (qyzbvalue as numeric(18, 2)) qyzbvalue");

		sql.append(" from t_zhiqy where qyzbtype = 'pm'");

		sql.append(" ) t");

		sql.append(" pivot (");

		sql.append(" sum ([qyzbvalue]) for [qynianfen] in (");

		for (int i = year - Constant.PM_YEAR_NO; i < year; i++) {

			sql.append("[").append(i).append("]");

			sql.append(i != year - 1 ? "," : "");

		}

		sql.append(")");

		sql.append(" ) vpt)");

		sql.append(" t1 right join (select regioncode,regionname from t_cod_region where parentcode = '0') t2");

		sql.append(" on t1.qyregion_code = t2.regioncode");

		return this.search(sql.toString(), new Object[] {});

	}

}

//数据库

//数据处理后

//Jsp

<!DOCTYPE html>

<html>

<head>

<script src="${ctx}/report/common/echarts/build/dist/echarts.js"></script>

</head>

<body style="font-size: 12px;">

	<div id="main" style="width:600px;height: 400px;"></div>

	<script type="text/javascript">

		/* var x = '${jsonobj}'; */

		var result = eval('(${result})');

		var timeline = eval('(${timeline})');

		console.log(result);

		console.log(timeline);

		// 路径配置

		 require.config({

			paths : {

				echarts : '${ctx}/report/common/echarts/build/dist'

			}

		});

		require([ 'echarts', 'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载

		], function(echarts) {

			var myChart = echarts.init(document.getElementById('main'));

			var option = {

				timeline : {

					data : timeline.data,

					label : {

						formatter : function(s) {

							return s.slice(0, 4);

						}

					},

					autoPlay : true,

					playInterval : 1000

				},

				options : [ {

					title : {

						text : '上海地图',

						subtext : '-。-'

					},

					tooltip : {trigger: 'item',formatter: '{b}:{c}'},

					legend : {

						show:false,

						orient : 'vertical',

						x : 'right',

						data : [ '数据名称' ]

					},

					 dataRange: {

			                min: 0,

			                max : 200,

			                text:['高','低'],           // 文本，默认为数值文本

			                calculable : true,

			                x: 'left',

			                color: ['orangered','yellow','lightskyblue']

			            },

					roamController : {

						show : true,

						x : 'right',

						mapTypeControl : {

							'china' : true

						}

					},

					title : {

						'text' : result.data[0].title.text

					},

					series : [ {

						type : 'map',

						mapType : 'china',

						//'selectedMode' : 'single',

						selectedMode : 'single',

						itemStyle : {

							normal : {

								label : {

									show : true

								}

							},

							emphasis : {

								label : {

									show : true

								}

							}

						},

						'data' : result.data[0].series[0].data

					} ]

				}

				]

			};

			option.options.push(result.data[1]);

			option.options.push(result.data[2]);

			option.options.push(result.data[3]);

			option.options.push(result.data[4]);

			myChart.setOption(option);

		});

	</script>

</body>

</html>

　　

　//最终效果

echarts 地图与时间轴混搭的更多相关文章

  1. Arcgis栅格时序地图制作---时间轴动态展示多期影像

    转自原文 Arcgis栅格时序地图制作---时间轴动态展示多期影像 效果如何???满意您go on,不满意咱 say goodbye··· 题外话: 为了在这里动态展示下制作结果,也是费了老劲了,转换 ...

  2. echarts使用结合时间轴timeline动态刷新案例

    1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  3. echarts之简单的入门——【一】做个带时间轴的柱状统计图

    百度Echarts 官网首页  http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...

  4. ECharts实例开发学习笔记二——时间轴

    记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...

  5. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  6. echarts的时间轴的提示内容写在轴下方

    echarts的时间轴的提示内容写在轴下方 在echarts中横坐标的拖动轴dataZone的提示内容在两端,并且没有相关配置让其显示在轴下方或者其他位置. 解决方式: 在图标下方添加dom并且监听拖 ...

  7. Echarts 地图（map）插件之 省份的颜色自定义

    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...

  8. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  9. 使用ExpandableListView时间轴效果达到

    不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import ...

随机推荐

  1. Jquery Mobile 记录

    使用的是C#语言,.Net+Jquery Mobile 框架开发 1.使用水平组切换操作 <fieldset id="Tfdset1" data-role="con ...

  2. C# 2 运算符 if

    运算符: 一.算术运算符: + - * / % ——取余运算 取余运算的应用场景: 1.奇偶数的区分. 2.把数变化到某个范围之内.——彩票生成. 3.判断能否整除.——闰年.平年. int a = ...

  3. int指令（软件中断指令）

    INT(软件中断指令)是CALL指令的一种特殊形式.call指令调用调用的子程序是用户程序的一部分,而INT指令调用的操作系统提供的子程序或者其他特殊的子程序. 中断服务子程序和标准过程的最大区别是 ...

  4. spring+hibernate

    添加注解时spring是添加在set方法上而hibernate是添加在get方法上 事务应该加在service层上,而不是加在dao层上,如果加在dao层上回滚的时候只能回滚一个dao的实现. 事务处 ...

  5. 5.7.2.2 min()和max()方法

    Math对象还包含许多方法,用于辅助完成简单和复杂的数学计算. 其中,min()和max()方法用于确定一组数值中的最小值和最大值.这两个方法都可以接受任意多个数值参数,如下例子: var max = ...

  6. C#获取Excel Sheet名称,对特殊字符、重名进行了处理

    /// <summary>        /// 获取指定Excel内Sheet集合        /// </summary>        /// <param na ...

  7. phpcms 任意位置获取用户头像

    主要拿到userid $_username = param::get_cookie('_username');//当前登录人用户名 $_userid = param::get_cookie('_use ...

  8. C++ 常用容器or数据结构

    queue 队列 参考 1.入队:如q.push(x):将x元素接到队列的末端: 2.出队:如q.pop() 弹出队列的第一个元素,并不会返回元素的值:T 3,访问队首元素:如q.front() 4, ...

  9. linux---finger命令

    问题:CentOS7默认是没有安装finger这个程序的,所以finger命令执行不了. 解决方案: 1.安装finger yum -y install finger

  10. ab压力测试报错: apr_socket_recv: Connection reset by peer (104)

    使用ab对网站进行压力测试,开始设置并发500,可以正常使用,当设置并发为1000,则报错: apr_socket_recv: Connection reset by peer (104) 改服务端a ...