echarts 地图与时间轴混搭 

//常量定义
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>

　　

　//最终效果

posted @ 2015-11-05 11:11  雪卜  阅读(6702)  评论(0)    收藏  举报