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 ...
随机推荐
- 02安卓用户界面优化之（二）SlidingMenu使用方法
一.SlidingMenu配置方法 1.下载SlidingMenu:https://github.com/jfeinstein10/SlidingMenu 2.拷贝SlidingMenu-master ...
- SQL Server 死锁检查
示例代码 select spid, blocked, status, hostname, program_name, hostprocess, cmd from sysprocesses -- kil ...
- JavaScript Set Cursor Style
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <titl ...
- SQL Server2012 创建定时作业——图文并茂，教你轻松快速创建
SQL Server2012 如何创建定时作业?有兴趣的可以来看下,图文并茂哦! 1.首先我们打开SQL Server代理,里面选择作业 2.右键作业,选择新建作业 3.填写一些相应的内容,名称和说明 ...
- cURL模拟POST方法提交XML数据并解析
php编程中会用到xml格式传送数据,这里演示下php以post形式发送xml,服务器接收,并解析xml的过程! post_xml.php源码: <?php header("Conte ...
- solaris11.2下编译QT-配置命令
1.make 版本为:GNU Make 3.82 2.gcc版本是:3.4.3(pkg install ...) 2.直接./configue是不行的 解决:./configue -platform ...
- Oracle EBS-SQL (MRP-2):检查期间主计划录入记录数.sql
SELECT FU.description 创建者, MSD.CREATION_DATE 创建日期, ...
- Delphi RichEdit的内容保存为图片
uses RichEdit; {将RichEdit1的内容保存为图片,此函数也适合于RxRichEdit,即RichEdit: TRxRichEdit}procedure RichEditToCanv ...
- 2014第11周四Eclipse开发问题记
今天开发中eclipse工具使用上又学到几点: 1.去除代码空行:在Find输入框中输入:^\s*\n然后替换为空即可: 2.eclipse插件的加载:对于单一个jar文件的插件,直接放在plugin ...
- xrdp的rdp前端无法连接Windows 2008的问题
xrdp使用rdp前端,无法连接2008,但连接2003是可以的.连接2008的时候,会在客户端发送Client Info PDU后主动RST掉连接.如下图 开始以为是客户端发送Client Info ...