• 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="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>
    

      

     //最终效果

  • 相关阅读:
    ARP攻击原理与解决
    如何查看数据库各种表oracle
    MyEclipse 8.0注册码
    oracle数据库导入导出
    输出设备已满或不可用, 归档程序无法归档重做日志[oracle解决方法]
    句柄以及对象的比较java
    shutdown immediate 后无法启动实例问题解决
    马云经典语录
    海量数据处理分析_BI
    数据库迁移方案
  • 原文地址:https://www.cnblogs.com/fxfly/p/4938841.html
Copyright © 2020-2023  润新知