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开发环境的搭建之（三）虚拟设备AVD的创建
选择AVD Manager选项,启动创建AVD向导.根据开发要求创建制定配置的虚拟设备. 设置屏幕大小为17寸,480X800 设置系统映像为API17,X86. 设置AVD Name为MyPhone ...
- cvReleaseImage()函数说明
IplImage *tmp = NULL; 这一句话定义了一个IplImage类型的指针变量tmp,这个指针变量在内存中的示意图为: tmp = cvLoadImage(file_path); 这句话 ...
- android anim 动画效果
动画效果编程基础--AnimationAndroid 动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效 ...
- EventBus通信
需求: 1.ActivityA打开ActivityB 2.在B中执行某操作后,同时执行A中的方法 lib下载:eventbus-2.4.0.jar jmmy 1.在EventBusTestActiv ...
- IIS7.0 部署wcf 404或者配置MIME（转）
WCF部署在IIS下,报错如下: 应用程序“DEFAULT WEB SITE/IMF”中的服务器错误 Internet 信息服务 7.0 错误摘要 HTTP 错误 404.3 - Not Found由 ...
- Ubuntu root登陆
分两步: 1.激活root 输入命令:sudo passwd,键入当前用户密码之后,为系统设置root密码:交互如下: jack@ubuntu:~$ sudo passwd[sudo] passwor ...
- SQL Server 数据库的自动选项
自动选项影响SQL Server 可能会自动进行的操作,所有的这些都是bool值,值为on 或off 1. auto_close: 当这个为on 时.数据库在最后一个用户退出后完全关闭,这样数据库就不 ...
- Delphi通过调用COM对象实现更改桌面壁纸
从前我也是用SystemParametersInfo这API来改桌面壁纸的,问题多多,也不知道哪错了,就没深究下去.看了CSDN的帖子后,大彻大悟~~ 在XP下,SystemParam ...
- Delphi检测网络连接状态
有时候,我们做一些小软件就需要检测网络连接状态,比如想给你的软件加上类似QQ那样的系统消息,可是像我这样的穷人肯定是买不起服务器了,那我们只好另想办法,可以读取网页然后用浏览器显示,这个时候就需要判断 ...
- Java中，当表单含有文件上传时，提交数据的如何读取
http://blog.csdn.net/lian_zhihui1984/article/details/6822201