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事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...
随机推荐
- （十二）MySQL逻辑备份mysqldump
(1)简介 语法 mysqldump -h服务器 -u用户名 -p密码 [-P端口号] [参数] 数据库名 >备份文件.sql 关于数据库: -A,--all-databases 所有库,会生成 ...
- P1059 明明的随机数【去重排序】
题目描述 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数对应 ...
- NOIP2011选择客栈
n家客栈,1~n编号,每家按照某一种色调装饰,共k种,每家客栈都设有咖啡店,每家咖啡店均有各自的最低消费两位游客,要求住在颜色相同,且不是同一个客栈,在两人的客栈间选择咖啡店(包括他们住的客栈),要求 ...
- 洛谷——P1586 四方定理
P1586 四方定理 题目描述 四方定理是众所周知的:任意一个正整数nn,可以分解为不超过四个整数的平方和.例如:25=1^{2}+2^{2}+2^{2}+4^{2}25=12+22+22+42,当然 ...
- POJ 2311 Cutting Game （Multi-Nim）
[题目链接] http://poj.org/problem?id=2311 [题目大意] 给出一张n*m的纸,每次可以在一张纸上面切一刀将其分为两半 谁先切出1*1的小纸片谁就赢了, [题解] 如果切 ...
- 【枚举】【前缀和】【map】ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) C. Molly's Chemicals
处理出前缀和,枚举k的幂,然后从前往后枚举,把前面的前缀和都塞进map,可以方便的查询对于某个右端点,有多少个左端点满足该段区间的和为待查询的值. #include<cstdio> #in ...
- 【单调队列】bzoj2096 [Poi2010]Pilots
用两个单调队列维护序列中的最大值和最小值即可. poi~ #include<cstdio> #include<algorithm> using namespace std; i ...
- Spark1.4远程调试
1)首先,我们是在使用spark-submit提交作业时,使用 --driver-java-options ”-Xdebug -Xrunjdwp:transport=dt_socket,server= ...
- iOS开发——MJExtension复杂数组用法
最近在看MJExtension的Demo,发现了一个plist文件直接转数组模型的方法.以前研究过但是浅尝辄止没有解决,这几天有时间,好好看了看,找到了解决办法,与大家分享. 如果大家的项目中有这种嵌 ...
- Mac sublime 编译Python UnicodeEncodeError: 'ascii' codec can't encode characters in position 6-8: ordinal not in range(128)
刚学Python,想打印个“hello 张林峰”,代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- print('hello 张林峰') 用su ...