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开发MD5加密工具类(一)
MD5加密工具类整理: package com.gzcivil.utils; import java.io.UnsupportedEncodingException; import java.secu ...
- 08JS高级 ——“继承”
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 启动程序的c++方法
#include <Windows.h> void main() { WinExec( "notepad.exe fitdata.txt", SW_SHOW ); // ...
- 【Chromium中文文档】沙箱FAQ
沙箱FAQ 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Sandbox ...
- Android04－UI01常用控件
1.常见控件的使用: TextView Button EditText ImageView 1.TextView <TextView android:id="@+id/text_v ...
- VC 窗口出现白屏闪烁的解决办法
处理一下窗口的WM_ERASEBKGND消息即可. 在messagemap里添加ON_WM_ERASEBKGND() 在窗口头文件里添加 afx_msg BOOL OnEraseBkgnd(CDC* ...
- 微信的分享功能（针对web手机站页面进行的分享功能）
把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){ var lujing=$("#logimg").attr("src& ...
- 行变列 拼接字符串 MSSQL 一个超级搞的问题
由数据 ThreeLevelSortID KeyWordID KeyWordName key1 key2 key3 key4 得到数据大 ThreeLevelSortID KeyWordName ke ...
- php解决与处理网站高并发 大流量访问的方法
方法/步骤 首先,确认服务器硬件是否足够支持当前的流量 普通的P4服务器一般最多能支持每天10万独立IP,如果访问量比这个还要大, 那么必须首先配置一台更高性能的专用服务器才能解决问题 ,否则怎么 ...
- startActivityForResult不返回结果
startActivityForResult不返回结果,请检查AndroidManifest中的描写叙述,是否对该Activity设置了:launchMode="singleTask&quo ...