EChart-Timeline
timeline-day.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
html ,body {
width:100%;
height:100% ;
} *{
margin:0px;
padding:0px;
}
#main{
position:absolute;
right:0;
top:0;
z-index: 30;
width: 80px;
height:100%;
}
.select{
width: 80px;
height:3%;
background-color: #333 ;
color:white;
padding-left:20px ;
} #right-part{
z-index: 30;
width: 80px;
height:93%;
}
</style>
<script>
window.onload = function(){ // 初始化时间标签
var timeline_text=[]
var hour=0
var ke=0
for (var i = 0; i < 4*24; i++) {
if(ke==3){
ke=0
hour++
}else{
ke++
}
if(ke==0){
timeline_text[i]=hour+":00"
}else{
timeline_text[i]=hour+":"+15*ke
}
// console.log(hour+":"+15*ke)
} for(var j = 0 ; j< 96 ; j++)
{
var option = document.createElement("option");
option.innerText = timeline_text[j] ;
option.value=j;
document.getElementById("rightstart").appendChild(option);
} for(var j = 95 ; j>=0 ; j--)
{
var option = document.createElement("option");
option.innerText = timeline_text[j] ;
option.value=j;
document.getElementById("rightend").appendChild(option);
} function setOption(start,end){
var myChart = echarts.init(document.getElementById('right-part'));
var timeline=[]
var k = 0 ;
for (var i = parseInt(start); i < parseInt(end); i++) {
timeline[k++] = timeline_text[i];
}
// 指定图表的配置项和数据
var option = { baseOption: {
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 750,
left: null,
right: 0,
top: 20,
bottom: 20,
width: 55,
height: null,
label: {
normal: {
textStyle: {
color: '#999'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbol: 'none',
lineStyle: {
color: '#555'
},
checkpointStyle: {
color: '#bbb',
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: []
},
// filter:alpha(opacity=30),
backgroundColor: '#333',
title: {
'text': timeline[0],
textAlign: 'center',
left: '22%',
bottom: '10',
textStyle: {
fontSize: 40,
color: 'rgba(255, 255, 255, 0.7)'
}
},
grid: {
left: '12%',
right: '110'
}, animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut'
},
options: []
};
for (var n = 0; n < timeline.length; n++) {
option.baseOption.timeline.data.push(timeline[n]);
option.options.push({
title: {
show: false,
'text': timeline[n] + '' }
});
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
var start = 0//$("#rightstart").val();
var end = 95//$("#rightend").val() ;
setOption(start,end); $("#rightstart").change(function(){
if (parseInt($("#rightend").val())>parseInt($(this).val())){
start = $(this).val();
setOption(start,end);
}else{
alert("ERROR：起始时间大于结束时间")
document.getElementById("rightstart").options[start].selected = true;
}
})
$("#rightend").change(function(){
if (parseInt($("#rightstart").val())<parseInt($(this).val())){
end = $(this).val() ;
setOption(start,end);
}else{
alert("ERROR：结束时间小于起始时间")
document.getElementById("rightend").options[end].selected = true;
}
}) } </script>
</head>
<body>
<div id="main">
<select class="select" name="numberselect" id="rightstart">
<!-- <option value="0" selected="selected">00:00</option -->
</select>
<div id="right-part" ></div>
<select class="select" name="numberselect" id="rightend">
<!-- <option>93</option>
<option>94</option>
<option>95</option>
<option>96</option> -->
</select>
</div> </body>
</html>
timeline-date.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
html ,body {
width:100%;
height:100% ;
background-color: #333 ;
} *{
margin:0px;
padding:0px;
}
#main{
position:absolute;
left:0;
bottom:0;
z-index: 30;
width: 80%;
height:80px;
}
.startselect{
position:absolute;
left:0;
top:0;
width:4% ;
height:80px;
background-color: #333 ;
color:white;
border-bottom:0px;
border-top:0px ;
} .endselect{
position:absolute;
right:0;
top:0;
width:4% ;
height:80px;
background-color: #333 ;
color:white;
border-bottom:0px;
border-top:0px ;
} #right-part{
position:absolute;
left:4% ;
top:0;
z-index: 30;
width: 92%;
height:80px;
}
</style>
<script> // 初始化时间标签
var timeline_text=[]
var month=3
var day=1
for (var i = 0; i < 31; i++) {
timeline_text[i]=month+"."+day
day++
} function setOption(start,end){
var timeline=[]
var k = 0 ;
for (var i = parseInt(start); i < parseInt(end); i++) {
timeline[k++] = timeline_text[i];
}
// 指定图表的配置项和数据
var option = { baseOption: {
timeline: {
axisType: 'category',
orient: 'horizontal',
autoPlay: false,
inverse: false,
playInterval: 750,
left: 20,
right: 20,
top: 20,
bottom: 30,
width: null,
height: 45,
label: {
normal: {
textStyle: {
color: 'white'
}
},
emphasis: {
textStyle: {
color: '#ffffff'
}
}
},
itemStyle: {
normal: {
color: 'white'
},
emphasis: {
color: 'blue'
}
},
symbol: 'diamond',
lineStyle: {
color: '#cccccc'
},
checkpointStyle: {
color: '#fff',
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showPlayBtn: false,
showNextBtn: false,
showPrevBtn: false,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: []
},
// filter:alpha(opacity=80),
backgroundColor: '#333',
title: {
'text': timeline[0],
textAlign: 'center',
left: '22%',
bottom: '10',
textStyle: {
fontSize: 40,
color: 'rgba(255, 255, 255, 0.7)'
}
},
grid: {
left: '12%',
right: '110'
}, animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut'
},
options: []
};
for (var n = 0; n < timeline.length; n++) {
option.baseOption.timeline.data.push(timeline[n]);
option.options.push({
title: {
show: false,
'text': timeline[n] + '' }
});
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
} $("#rightstart").change(function(){
if (parseInt($("#rightend").val())>parseInt($(this).val())){
start = $(this).val();
setOption(start,end);
}else{
alert("ERROR：起始时间大于结束时间")
document.getElementById("rightstart").options[start].selected = true;
}
})
$("#rightend").change(function(){
if (parseInt($("#rightstart").val())<parseInt($(this).val())){
end = $(this).val() ;
setOption(start,end);
}else{
alert("ERROR：结束时间小于起始时间")
document.getElementById("rightend").options[end].selected = true;
}
}) </script>
</head>
<body>
<div id="main">
<select class="startselect" name="numberselect" id="rightstart">
<!-- <option value="0" selected="selected">00:00</option -->
</select>
<div id="right-part" ></div>
<select class="endselect" name="numberselect" id="rightend">
<!-- <option>93</option>
<option>94</option>
<option>95</option>
<option>96</option> -->
</select>
</div> <script type="text/javascript"> for(var j = 0 ; j< 31 ; j++)
{
var option = document.createElement("option");
option.innerText = timeline_text[j] ;
option.value=j;
document.getElementById("rightstart").appendChild(option);
} for(var j = 30 ; j>=0 ; j--)
{
var option = document.createElement("option");
option.innerText = timeline_text[j] ;
option.value=j;
document.getElementById("rightend").appendChild(option);
} var myChart = echarts.init(document.getElementById('right-part')); var start = 0//$("#rightstart").val();
var end = 30//$("#rightend").val() ;
setOption(start,end); </script>
</body>
</html> <!-- myChart.dispatchAction({
type: 'timelineChange',
// 时间点的 index
currentIndex: 3
}) -->
multi-timeline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
} * {
margin: 0px;
padding: 0px;
} #main_day {
position: absolute;
right: 0;
top: 0;
z-index: 30;
width: 80px;
height: 100%;
} .select {
width: 80px;
height: 3%;
background-color: #333;
color: white;
padding-left: 20px;
} #right_part_day {
z-index: 30;
width: 80px;
height: 94%;
} #main_date {
position: absolute;
left: 0;
bottom: 0;
z-index: 30;
width: 96%;
height: 80px;
} .startselect {
position: absolute;
left: 0;
top: 0;
width: 4%;
height: 80px;
background-color: #333;
color: white;
border-bottom: 0px;
border-top: 0px;
} .endselect {
position: absolute;
right: 0;
top: 0;
width: 4%;
height: 80px;
background-color: #333;
color: white;
border-bottom: 0px;
border-top: 0px;
} #right_part_date {
position: absolute;
left: 4%;
top: 0;
z-index: 30;
width: 92%;
height: 80px;
}
</style>
</head>
<body> <div id="main_day">
<select class="select" name="numberselect" id="rightstart_day"></select>
<div id="right_part_day"></div>
<select class="select" name="numberselect" id="rightend_day"></select>
</div> <div id="main_date">
<select class="startselect" name="numberselect" id="rightstart_date"></select>
<div id="right_part_date"></div>
<select class="endselect" name="numberselect" id="rightend_date"></select>
</div> <script>//常量 // 初始化时间标签date
var timeline_text_date = []
var month = 3
var day = 1
for (var i = 0; i < 31; i++) {
timeline_text_date[i] = month + "." + day
day++
} // 初始化时间标签day
var timeline_text_day = []
var hour = 0
var ke = 0
for (var i = 0; i < 4 * 24; i++) {
if (ke == 3) {
ke = 0
hour++
} else {
ke++
}
if (ke == 0) {
timeline_text_day[i] = hour + ":00"
} else {
timeline_text_day[i] = hour + ":" + 15 * ke
}
} // 指定图表的配置项和数据
var option_date = { baseOption: {
timeline: {
axisType: 'category',
orient: 'horizontal',
autoPlay: false,
inverse: false,
playInterval: 750,
left: 20,
right: 20,
top: 20,
bottom: 30,
width: null,
height: 45,
label: {
normal: {
textStyle: {
color: 'white'
}
},
emphasis: {
textStyle: {
color: '#ffffff'
}
}
},
itemStyle: {
normal: {
color: 'white'
},
emphasis: {
color: 'blue'
}
},
symbol: 'diamond',
lineStyle: {
color: '#cccccc'
},
checkpointStyle: {
color: '#fff',
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showPlayBtn: false,
showNextBtn: false,
showPrevBtn: false,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: []
},
// filter:alpha(opacity=80),
backgroundColor: '#333',
title: {
'text': '',
textAlign: 'center',
left: '22%',
bottom: '10',
textStyle: {
fontSize: 40,
color: 'rgba(255, 255, 255, 0.7)'
}
},
grid: {
left: '12%',
right: '110'
}, animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut'
},
options: []
}; // 指定图表的配置项和数据
var option_day = { baseOption: {
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 750,
left: null,
right: 0,
top: 20,
bottom: 20,
width: 55,
height: null,
label: {
normal: {
textStyle: {
color: '#999'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbol: 'none',
lineStyle: {
color: '#555'
},
checkpointStyle: {
color: '#bbb',
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: []
},
// filter:alpha(opacity=30),
backgroundColor: '#333',
title: {
'text': '',
textAlign: 'center',
left: '22%',
bottom: '10',
textStyle: {
fontSize: 40,
color: 'rgba(255, 255, 255, 0.7)'
}
},
grid: {
left: '12%',
right: '110'
}, animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut'
},
options: []
};
</script> <script>//初始化页面选项
for (var j = 0; j < 31; j++) {
var option = document.createElement("option");
option.innerText = timeline_text_date[j];
option.value = j;
document.getElementById("rightstart_date").appendChild(option);
} for (var j = 30; j >= 0; j--) {
var option = document.createElement("option");
option.innerText = timeline_text_date[j];
option.value = j;
document.getElementById("rightend_date").appendChild(option);
} //day
for (var j = 0; j < 96; j++) {
var option = document.createElement("option");
option.innerText = timeline_text_day[j];
option.value = j;
document.getElementById("rightstart_day").appendChild(option);
} for (var j = 95; j >= 0; j--) {
var option = document.createElement("option");
option.innerText = timeline_text_day[j];
option.value = j;
document.getElementById("rightend_day").appendChild(option);
} </script> <script> function setOption_date(start, end) {
var timeline = []
var k = 0;
for (var i = parseInt(start); i <= parseInt(end); i++) {
timeline[k++] = timeline_text_date[i];
}
option_date.baseOption.timeline.data = []
for (var n = 0; n < timeline.length; n++) {
option_date.baseOption.timeline.data.push(timeline[n]);
option_date.options.push({
title: {
show: false,
'text': timeline[n] + '' }
});
}
// 使用刚指定的配置项和数据显示图表。
myChart_date.setOption(option_date);
} function setOption_day(start, end) {
var timeline = []
var k = 0;
for (var i = parseInt(start); i <= parseInt(end); i++) {
timeline[k++] = timeline_text_day[i];
}
option_day.baseOption.timeline.data = []
for (var n = 0; n < timeline.length; n++) {
option_day.baseOption.timeline.data.push(timeline[n]);
option_day.options.push({
title: {
show: false,
'text': timeline[n] + '' }
});
}
// 使用刚指定的配置项和数据显示图表。
myChart_day.setOption(option_day);
} //day
start_day = 0
end_day = 95
$("#rightstart_day").change(function () {
if (parseInt($("#rightend_day").val()) > parseInt($(this).val())) {
start_day = parseInt($(this).val());
setOption_day(start_day, end_day);
} else {
alert("ERROR：起始时间大于结束时间")
document.getElementById("rightstart_day").options[start_day].selected = true;
}
})
$("#rightend_day").change(function () {
if (parseInt($("#rightstart_day").val()) < parseInt($(this).val())) {
end_day = parseInt($(this).val());
setOption_day(start_day, end_day);
} else {
alert("ERROR：结束时间小于起始时间")
document.getElementById("rightend_day").options[end_day].selected = true;
}
}) //date
start_date = 0
end_date = 30
$("#rightstart_date").change(function () {
if (parseInt($("#rightend_date").val()) > parseInt($(this).val())) {
start_date = parseInt($(this).val());
setOption_date(start_date, end_date);
} else {
alert("ERROR：起始时间大于结束时间")
document.getElementById("rightstart_date").options[start_date].selected = true;
}
})
$("#rightend_date").change(function () {
if (parseInt($("#rightstart_date").val()) < parseInt($(this).val())) {
end_date = parseInt($(this).val());
setOption_date(start_date, end_date);
} else {
alert("ERROR：结束时间小于起始时间")
document.getElementById("rightend_date").options[end_date].selected = true;
}
})
</script> <script type="text/javascript"> var myChart_date = echarts.init(document.getElementById('right_part_date'));
var myChart_day = echarts.init(document.getElementById('right_part_day')); setOption_date(start_date, end_date);
setOption_day(start_day, end_day); </script> </body>
</html>
EChart-Timeline的更多相关文章
- Echart timeline 高级用法！！！！
一.前言 在使用 echart timeline 来着图形可视化时,我使用的和官网也不一样,因为我有使用映射关系.比如我将 no 映射到X轴,将 d4 映射到Y轴. 二.参考 echart官网:htt ...
- EChart将timeline图标设置为加号
一 要实现的效果 二 官方文档 看一下官方文档上,替换symbol的描述: timeline.symbol string [ default: 'emptyCircle' ] timeline标记的图 ...
- echart.js的使用与API
---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...
- EChart.js 笔记二
交互组件 Echart.js 中交互组件比较多.例如: legend(图例).title(标题组件).visualMap(视觉映射组件).dataZoom(数据缩放组件).timeline(时间线组件 ...
- 百度echart如何动态生成图表
百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...
- echart搭配时间轴进行展示 （本例展示的是多时间 多地区 多指标条件 ）
1:照常先来几张图 看效果 2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果 上 案例图和代码 效果图 : 代码: <style type="text/c ...
- echart封装，前端简单路由，图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
- EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- EChart使用
EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...
- Chrome Developer Tools：Timeline Panel说明
一.Timeline panel 概况 Timeline工具栏可以详细检测出Web应用在加载过程中,时间花费情况的概览.这些应用包括下载资源,处理DOM事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...
随机推荐
- Visualbox安装Ubuntu网络设置
注意:Windows 10在安装Visualbox后,创建的Ubuntu系统只有32位的,没有64位供选择,原因是Windows 10系统自带的Hyper-V系统占用了CPU虚拟化技术,解决的方法是取 ...
- (22)python 自动化
例子 from selenium import webdriver driver = webdriver.PhantomJS() driver.get("http://www.huhumh. ...
- MySql笔记之数据表
数据表:行称为记录 列称为字段 用来存储数据 一.数据类型 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 在我们存储不同类型的数据时,为了 ...
- 浅谈Java中final,finalized,finally
final: final可以让你控制你的成员.方法或者是一个类是否可被覆写或继承等功能,这些特点使final在Java中拥有了一个不可或缺的地位,也是学习Java时必须要知道和掌握的关键字之一. fi ...
- [Luogu P4198]楼房重建(线段树)
题目描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些事件发生在一个 ...
- [USACO06DEC] Milk Patterns
题目描述 Farmer John has noticed that the quality of milk given by his cows varies from day to day. On f ...
- 【Trie+DP】BZOJ1212-[HNOI2004]L语言
[题目大意]给出字典和文章,求出文章能够被理解的最长前缀. [思路] 1A……!先用文章建立一棵Trie树,然后对于文章进行DP.f[i]表示文章中长度为i的前缀能否被理解,如果f[i]能理解,顺着下 ...
- 8.3（java学习笔记）动态编译（DynamicCompiler）与动态运行(DynamicRun)
一.动态编译 简单的说就是在运行一个java程序的过程中,可以通过一些API来编译其他的Java文件. 下面主要说动态编译的实现: 1.获取java编译编译器 2.运行编译器(须指定编译文件) 获取编 ...
- jQuery的deferred对象详解(转)
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- 51单片机软件I2C驱动中的CY
做一个MSP430的项目,虽然430内部有硬件I2C的模块,略难,准备直接移植51的..碰到一句代码 dat <<= 1; //移出数据的最高位 pSDA = CY; //送数据口 dig ...