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>
//最终效果
echarts 地图与时间轴混搭的更多相关文章
- Arcgis栅格时序地图制作---时间轴动态展示多期影像
转自原文 Arcgis栅格时序地图制作---时间轴动态展示多期影像 效果如何???满意您go on,不满意咱 say goodbye··· 题外话: 为了在这里动态展示下制作结果,也是费了老劲了,转换 ...
- echarts使用结合时间轴timeline动态刷新案例
1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts之简单的入门——【一】做个带时间轴的柱状统计图
百度Echarts 官网首页 http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...
- ECharts实例开发学习笔记二——时间轴
记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...
- 【前端图表】echarts实现散点图x轴时间轴
话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...
- echarts的时间轴的提示内容写在轴下方
echarts的时间轴的提示内容写在轴下方 在echarts中横坐标的拖动轴dataZone的提示内容在两端,并且没有相关配置让其显示在轴下方或者其他位置. 解决方式: 在图标下方添加dom并且监听拖 ...
- Echarts 地图（map）插件之 省份的颜色自定义
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
- Timeline Portfolio - 时间轴作品集效果
这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...
- 使用ExpandableListView时间轴效果达到
不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import ...
随机推荐
- oracle 日期to_char转换24小时制12小时制
1>以12小时制显示 SQL>select to_char(sysdate,'YYYY-MM-DD HH12:MI:SS AM')from dual; TO_CHAR(SYSDATE,'Y ...
- c# 另存为excel
去网上找了一下 看了一个比较简单的新建excel然后另存为. 要引用Microsoft.Office.Interop.Excel命名空间,如果没有的话 ,百度比我懂. 直接付代码: Microsof ...
- C++中内存分配详解
转载自51CTO.com http://developer.51cto.com/art/201107/276154.htm 我们都知道,内存基本上分为静态存储区.堆区和栈区三大部分 ...
- JSON对象和字符串的互相转换
1.JSON.parse; 作用:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象) 语法:JSON.parse(text [, reviver]) text 必选. 一 ...
- Android 相对布局常用属性
Android 布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 ...
- 1.offsetParent,offsetLeft,offsetTop
offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...
- IPTV小窗口播放视频 页面焦点无法移动的解决方法
在IPTV高清页面中,小窗口播放视频时,在某些机顶盒上(如高清中兴.高清大亚4904)会出现焦点无法移动现象,即按键无响应.被这个bug困扰了很久,虽然我知道解决方法,但只知其然,不知其所以然.今天做 ...
- Ajax制作无刷新评论系统
index.html <script src="jquery.min.js"></script> <script> $(function(){ ...
- 根据群ID和用户Id查询 + string QueryQunByUserIdAndQunId(int userId, int qunId) V1.0
#region 根据群ID和用户Id查询 + string QueryQunByUserIdAndQunId(int userId, int qunId) V1.0 /// <summary ...
- Google机器学习教程心得（二）决策树与可视化
Visualizing a Decision Tree Google Machine Learning Recipes 2 官方中文博客 http://chinagdg.org/2016/03/mac ...