1. //常量定义
    public class Constant {
  2. 	public static Integer PM_YEAR_NO = 5;
  3. }

//action

  1. public class ZhiBiaoPmAction extends BaseAction {
  2.  
  3. 	private static final long serialVersionUID = 1L;
  4.  
  5. 	@Autowired
  6. 	ZhiBiaoPmService zbser;
  7.  
  8. 	public String cn_pm25() {
  9. 		Integer year = Integer.valueOf(Tool.getCurDateByType("yyyy"));
  10. 		List<Map<String, Object>> pmlt = zbser.getPM25lt(year);
  11. 		request.setAttribute("year", year);
  12. 		JSONObject result = JSONObject.fromObject(zbser.dataset(pmlt, year));
  13. 		request.setAttribute("result", result);
  14. 		JSONObject timeline = JSONObject.fromObject(zbser.yearset(year));
  15. 		request.setAttribute("timeline", timeline);
  16. 		return "cn_pm25";
  17. 	}
  18.  
  19. }

//Service

  1. @Service
  2. public class ZhiBiaoPmService {
  3. 	@Autowired
  4. 	ZhiBiaoPmDao pmdao;
  5.  
  6. 	public List<Map<String, Object>> getPM25lt(Integer year) {
  7. 		return pmdao.getPM25lt(year);
  8. 	}
  9.  
  10. 	public String dataset(List<Map<String, Object>> lt, Integer year) {
  11. 		StringBuffer jsonstr = new StringBuffer("");
  12. 		Map<String, Object> map = null;
  13. 		jsonstr.append("{");
  14. 		for (int j = year - Constant.PM_YEAR_NO; j < year; j++) {
  15. 			jsonstr.append("data:{title:{'text':'" + j + "年pm含量'},");
  16. 			jsonstr.append("series:[{");
  17. 			jsonstr.append("'data':[");
  18. 			for (int i = 0; i < lt.size(); i++) {
  19. 				map = lt.get(i);
  20. 				jsonstr.append("{name:'").append(map.get("regionname"));
  21. 				jsonstr.append("'").append(",value:").append(map.get("y" + j))
  22. 						.append("}");
  23. 				jsonstr.append((i == lt.size() - 1) ? "" : ",");
  24. 			}
  25. 			jsonstr.append("]");
  26. 			jsonstr.append("}]");
  27. 			jsonstr.append("}").append(j == year - 1 ? "" : ",");
  28. 		}
  29. 		jsonstr.append("}");
  30. 		System.out.println(jsonstr);
  31. 		return jsonstr.toString();
  32. 	}
  33.  
  34. 	public String yearset(Integer year) {
  35. 		StringBuffer jsonstr = new StringBuffer("");
  36. 		jsonstr.append("{data:[");
  37. 		for (int j = year - Constant.PM_YEAR_NO; j < year; j++) {
  38. 			jsonstr.append("'").append(j).append("-01-01'");
  39. 			jsonstr.append(j == year - 1 ? "" : ",");
  40. 		}
  41. 		jsonstr.append("]}");
  42. 		return jsonstr.toString();
  43. 	}
  44. }

　//Dao

  1. @Repository
  2. public class ZhiBiaoPmDao extends BaseDao<T, Serializable> {
  3. 	public List<Map<String, Object>> getPM25lt(Integer year) {
  4. 		StringBuffer sql = new StringBuffer();
  5. 		sql.append(" select t2.regionname");
  6. 		for (int i = year - Constant.PM_YEAR_NO; i < year; i++) {
  7. 			sql.append(" ,isnull([").append(i).append("],0) as 'y").append(i)
  8. 					.append("'");
  9. 		}
  10. 		sql.append(" from (");
  11. 		sql.append(" select qyregion_code");
  12. 		for (int i = year - Constant.PM_YEAR_NO; i < year; i++) {
  13. 			sql.append(" ,[").append(i).append("] as '").append(i).append("'");
  14. 		}
  15. 		sql.append(" from (");
  16. 		sql.append(" select qynianfen,qyregion_code,cast (qyzbvalue as numeric(18, 2)) qyzbvalue");
  17. 		sql.append(" from t_zhiqy where qyzbtype = 'pm'");
  18. 		sql.append(" ) t");
  19. 		sql.append(" pivot (");
  20. 		sql.append(" sum ([qyzbvalue]) for [qynianfen] in (");
  21. 		for (int i = year - Constant.PM_YEAR_NO; i < year; i++) {
  22. 			sql.append("[").append(i).append("]");
  23. 			sql.append(i != year - 1 ? "," : "");
  24. 		}
  25. 		sql.append(")");
  26. 		sql.append(" ) vpt)");
  27. 		sql.append(" t1 right join (select regioncode,regionname from t_cod_region where parentcode = '0') t2");
  28. 		sql.append(" on t1.qyregion_code = t2.regioncode");
  29. 		return this.search(sql.toString(), new Object[] {});
  30. 	}
  31. }

//数据库

//数据处理后

//Jsp

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="${ctx}/report/common/echarts/build/dist/echarts.js"></script>
  5. </head>
  6.  
  7. <body style="font-size: 12px;">
  8. 	<div id="main" style="width:600px;height: 400px;"></div>
  9. 	<script type="text/javascript">
  10. 		/* var x = '${jsonobj}'; */
  11. 		var result = eval('(${result})');
  12. 		var timeline = eval('(${timeline})');
  13. 		console.log(result);
  14. 		console.log(timeline);
  15. 		// 路径配置
  16. 		 require.config({
  17. 			paths : {
  18. 				echarts : '${ctx}/report/common/echarts/build/dist'
  19. 			}
  20. 		});
  21. 		require([ 'echarts', 'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
  22. 		], function(echarts) {
  23. 			var myChart = echarts.init(document.getElementById('main'));
  24. 			var option = {
  25. 				timeline : {
  26. 					data : timeline.data,
  27. 					label : {
  28. 						formatter : function(s) {
  29. 							return s.slice(0, 4);
  30. 						}
  31. 					},
  32. 					autoPlay : true,
  33. 					playInterval : 1000
  34. 				},
  35. 				options : [ {
  36. 					title : {
  37. 						text : '上海地图',
  38. 						subtext : '-。-'
  39. 					},
  40. 					tooltip : {trigger: 'item',formatter: '{b}:{c}'},
  41. 					legend : {
  42. 						show:false,
  43. 						orient : 'vertical',
  44. 						x : 'right',
  45. 						data : [ '数据名称' ]
  46. 					},
  47. 					 dataRange: {
  48. 			                min: 0,
  49. 			                max : 200,
  50. 			                text:['高','低'],           // 文本，默认为数值文本
  51. 			                calculable : true,
  52. 			                x: 'left',
  53. 			                color: ['orangered','yellow','lightskyblue']
  54. 			            },
  55. 					roamController : {
  56. 						show : true,
  57. 						x : 'right',
  58. 						mapTypeControl : {
  59. 							'china' : true
  60. 						}
  61. 					},
  62. 					title : {
  63. 						'text' : result.data[0].title.text
  64. 					},
  65. 					series : [ {
  66. 						type : 'map',
  67. 						mapType : 'china',
  68. 						//'selectedMode' : 'single',
  69. 						selectedMode : 'single',
  70. 						itemStyle : {
  71. 							normal : {
  72. 								label : {
  73. 									show : true
  74. 								}
  75. 							},
  76. 							emphasis : {
  77. 								label : {
  78. 									show : true
  79. 								}
  80. 							}
  81. 						},
  82.  
  83. 						'data' : result.data[0].series[0].data
  84. 					} ]
  85. 				}
  86. 				]
  87. 			};
  88. 			option.options.push(result.data[1]);
  89. 			option.options.push(result.data[2]);
  90. 			option.options.push(result.data[3]);
  91. 			option.options.push(result.data[4]);
  92. 			myChart.setOption(option);
  93.  
  94. 		});
  95. 	</script>
  96. </body>
  97. </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. sublime text 2中Windows下编写的脚本在Linux平台上运行遇到字符问题

    今天在windows下的sublime text 2下写了个脚本,上传到ubuntu服务器中执行后提示: -bash: /usr/bin/python: /usr/bin/python^M: bad ...

  2. 一.ubuntu14.04安装、亮度设置、显卡设置等一体化讲解

    一.ubuntu14.04安装 安装步骤很简单的,相信你只要知道并且决定安装ubuntu,你就不会在安装上有问题,下载网址 http://www.ithome.com/html/soft/81539. ...

  3. C语言中内存分配 (转)

    在任何程序设计环境及语言中,内存管理都十分重要.在目前的计算机系统或嵌入式系统中,内存资源仍然是有限的.因此在程序设计中,有效地管理内存资源是程序员首先考虑的问题. 第1节主要介绍内存管理基本概念,重 ...

  4. NET Core 介绍

    NET Core 介绍 标签: ASP.NETCore 1. 前言 2. ASP.NET Core 简介 2.1 什么是ASP.NET Core 2.2 ASP.NET Core的特点 2.3 ASP ...

  5. Qt for Android遇到的几个错误解决[Win7 + Qt5.6 +jdk 8u91]

    [1]SDK Manager无法更新Android SDK安装后需要运行SDK Manager下载安装包,默认从google网站下载,但被GWF和谐了,感谢一位网友提供的镜像站点.具体步骤是:运行SD ...

  6. Java开发工具IntelliJ IDEA单元测试和代码覆盖率图解

    原文 http://www.cnblogs.com/xiongmaopanda/p/3314660.html Java开发工具IntelliJ IDEA使用教程:单元测试和代码覆盖率 本文将展示如何使 ...

  7. Ajax学习教程在线阅读

      1.什么是AJAX ?(1) 2.什么是AJAX ?(2) 3.什么是AJAX ?(3) 4.什么是AJAX ?(4) 5.Ajax基础教程(1)-Ajax简介 1.1 Web应用简史 6.Aja ...

  8. 【POJ】3264 Balanced Lineup ——线段树 区间最值

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 34140   Accepted: 16044 ...

  9. HDU 4729 An Easy Problem for Elfness （主席树，树上第K大）

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题意:给出一个带边权的图.对于每一个询问(S , ...

  10. hadoop记录topk

    lk@lk-virtual-machine:~$ cd hadoop-1.0.1 lk@lk-virtual-machine:~/hadoop-1.0.1$ ./bin dfs -mkdir inpu ...