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 ...
随机推荐
- android: ListView历次优化
第一版: ListView一屏显示多少对象其内部就创建多少View对象.滑动时退出的缓存对象留给滑进去时调用getView传的convertView.因为如果每次都findViewById查找创建视图 ...
- SQL查询练习题目
SQL查询练习题目 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示 ...
- iOS开发之性能优化
1.避免过于庞大的XIB 当加载XIB的时候把所有的东西都放在了内存里,包括任何的图片:如果有一个不会即刻用到的view,就会浪费宝贵的内存资源了. 当加载一个引用了图片或者声音资源的nib时,nib ...
- linux ftp 安装及相关命令
1.VSFTP简介 VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,它的全称是Very Secure FTP 从此名称可以看出来,编制者的初衷是代码的安全. 安全性是编写VSF ...
- ZOJ 1530 - Find The Multiple
Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal repr ...
- base库中的BarrierClosure
说明说得很明白,就是等侍num_closures 为零的时候回调done_closure,代码也很简单,不加详述 #ifndef BASE_BARRIER_CLOSURE_H_ #define BAS ...
- git管理修改
为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改 ...
- 用apiCloud开发应用
使用apiCloud开发应用就是用html5写页面,css实现样式,js写功能.一套代码在android和ios上都能运行.节省开发周期和人员开销. 代码可以放到云服务器,可以云端打包,云端更新. a ...
- javascript 数据结构和算法读书笔记 > 第四章 栈
1. 对栈的操作 栈是一种特殊的列表,栈中的元素只能通过列表的一端进行访问,即栈顶.类似于累起一摞的盘子,只能最后被放在上面的,最先能被访问到. 就是我们所说的后入先出(LIFO). 对栈主要有入栈p ...
- php cli模式没有加载php.ini
这两天在虚拟机的linux里编译安装了php,同时也把swoole的扩展也编译上了.在/etc/php.ini里加上了extension=swoole.so,但是用php -m 查看加载的模块并没有s ...