echarts使用结合时间轴timeline动态刷新案例
1、echarts简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2、使用案例
第一步：echarts初始化
第二步：定义option,
第三步：echarts加载option
echarts初始化:
var right_bottom_chart = echarts.init(document.getElementById("right_bottom"));
定义option
var getLBOptionConfig = function(data_res, monthArr , index){
var data_arr = getDataArr(data_res);
right_bottom_option = {
baseOption:{
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
},
options:[
{
title: {
text: '租赁人口',
textStyle:{
color:'#fff'
}
},
textStyle:{
color:'#B3E4A1'
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel:{
show:true,
interval : 0
}
},
radiusAxis: {
},
polar: {
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data_arr[id][0] + '<br>最高：' + data_arr[id][1] + '<br>平均：' + data_arr[id][2];
}
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data_arr.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data_arr.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return d[2];
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
barGap: '-100%',
z: 10
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'green',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return 8;
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}]
}]
}
right_bottom_option.options=[];
monthArr.forEach(function(n){
right_bottom_option.options.push(getTemplate(data_arr));
});
return right_bottom_option;
};
echarts加载option:
right_bottom_chart.setOption(LBoption,true);
时间轴代码片：
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
时间轴时间监听：
right_bottom_chart.on('timelinechanged', function (timeLineIndex) {
var month_str = monthArr[timeLineIndex.currentIndex];
if(month_str){
loadRightBottomCON(right_bottom_chart, month_str, timeLineIndex.currentIndex);
}
});
抽取模板
var getTemplate = function(data_arr){
return {
title: {
text: '租赁人口',
textStyle:{
color:'#fff'
}
},
textStyle:{
color:'#B3E4A1'
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel:{
show:true,
interval : 0
}
},
radiusAxis: {
},
polar: {
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data_arr[id][0] + '<br>最高：' + data_arr[id][1] + '<br>平均：' + data_arr[id][2];
}
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data_arr.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data_arr.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return d[2];
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
barGap: '-100%',
z: 10
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'green',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return 8;
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}]
};
}
挥一挥衣袖，不带走一片云彩
echarts使用结合时间轴timeline动态刷新案例的更多相关文章
- 时间轴 timeline
时间轴 timeline https://www.helloweba.net/javascript/285.html https://www.helloweba.net/demo/v_timeline ...
- Alamofire源码解读系列(十二)之时间轴(Timeline)
本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
- 横向、纵向时间轴timeline系列
近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...
- SharePoint 中时间轴 Timeline的实现
客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态.就像Facebook的Timeline效果(点击查看). 尝试着搜索 ...
- 超酷的JavaScript叙事性时间轴(Timeline)类库
在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
- echarts 地图与时间轴混搭
//常量定义public class Constant { public static Integer PM_YEAR_NO = 5; } //action public class ZhiBiaoP ...
- JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner
一.Lateral On-Scroll Sliding with jQuery的使用 View demo Download source 1. HTML结构 <div id=" ...
- Android 时间轴TimeLine
代码:这里
- ECharts实例开发学习笔记二——时间轴
记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...
随机推荐
- sqllite connectionstring setting
https://www.connectionstrings.com/sqlite/ SQLite.NET Basic Data Source=c:\mydb.db;Version=3; Version ...
- 全面系统Python3入门+进阶-1-7 课程内容与特点
结束
- php cURL error 60: SSL certificate problem: unable to get local issuer certificate 解决办法
错误例子如下: php5.6以上的版本会出现这种问题 关于“SSL证书问题:无法获取本地颁发者证书”错误.很明显,这适用于发送CURL请求的系统(并且没有服务器接收请求) 1)从https://cur ...
- Hadoop记录-部署hadoop环境shell实现
#!/bin/bash menu() { echo "---欢迎使用hadoop部署管理程序---" echo "# 1.初始化Linux环境" echo &q ...
- 忏悔言情小说带来的意淫以及对治方法 (转自学佛网：http://www.xuefo.net/nr/article55/554935.html)
小时候,因为父母经常吵架,我觉得很孤独,一个人经常孤零零的,就喜欢一个人看书,大人的书难免里面有情情爱爱的内容,结果就很喜欢里面的深情的爱情故事,总是幻想自己有一段爱情.其实就是意淫的开始,所以后来学 ...
- CHIMA网络安全攻防大赛经验分享
比赛模式 第一轮:20分钟基础知识赛(50道题) 安全运维,法律法规,linux操作系统等 第二轮:50分钟CTF夺旗(5道题) 题目涵盖 密码学 运用多种工具,如ASCII对照,古典密码,凯撒密码, ...
- Linux下Mongodb安装和启动配置 转载
原文地址:https://www.cnblogs.com/Jimmy104/p/6181899.html 以下文章为转载,感谢网友,原文链接 http://blog.csdn.net/yuwenrul ...
- Ubuntu bashrc profile environment 区别
在 Ubuntu 中有如下几个文件可以设置环境变量: /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...
- [C++] 非递归实现前中后序遍历二叉树
目录 前置技能 需求描述 binarytree.h 具体实现 binarytree.cpp main.cpp 网上代码一搜一大片,大同小异咯. 书上的函数实现代码甚至更胜一筹,而且抄一遍就能用,唯一问 ...
- hugepage设置
1.设置memlock 编辑/etc/security/limits.conf 增加: * Soft memlock 稍小于RAM值 * hard memlock 稍小于RAM值 Memlock,锁定 ...