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事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...
随机推荐
- 识别浏览器的JavaScript引擎的方法
答案来自StackOverflow,打开这个网页http://jsbin.com/opuvas即可,这个网页也是答题者自己写的. 二维码是这个网址.网页内有统计访问量,作者想知道对多少人有用,建议尊重 ...
- CF 996B World Cup 【找规律/模拟】
CF [题意]:圆形球场有n个门,Allen想要进去看比赛.Allen采取以下方案进入球场:开始Allen站在第一个门,如果当前门前面有人Allen会花费单位时间走到下一个门,如果没人Allen从这个 ...
- codeforces Round #441 C Classroom Watch【枚举/注意起点】
C. time limit per test 1 second memory limit per test 512 megabytes input standard input output stan ...
- Ubuntu 安装 tensorflow-gpu + keras
转载请注明: 仰望大牛的小清新:http://www.cnblogs.com/luruiyuan/ 本文原网址:http://www.cnblogs.com/luruiyuan/p/6660142.h ...
- Python RE模块中search()和match()的区别
match()函数只检测RE是不是在string的开始位置匹配, search()会扫描整个string查找匹配: 也就是说match()只有在0位置匹配成功的话才有返回, 如果不是开始位置匹配成功的 ...
- POJ 2315：Football Game（博弈论）
[题目链接] http://poj.org/problem?id=2315 [题目大意] 两名球员轮流从N个球中挑出不多于M个射门,每个球半径都是R,离球门S. 每次只能踢出L以内的距离.进最后一个球 ...
- 【单调队列优化DP】BZOJ1855-[Scoi2010]股票交易
[题目大意] 已知第i天的股票买入价为每股APi,第i天的股票卖出价为每股BPi(数据保证对于每个i,都有APi>=BPi),第i天的一次买入至多只能购买ASi股,一次卖出至多只能卖出BSi股. ...
- Problem B: 零起点学算法17——2个数比较大小
#include<stdio.h> int main() { int n,m; while(scanf("%d %d",&n,&m)!=EOF) if( ...
- 每天一个linux命令13之curl发送http请求
一.get请求 curl "http://www.baidu.com" 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "http:// ...
- pythonGUI编程用Canvas模拟画板
代码如下: from tkinter import * import webbrowser root = Tk() w = Canvas(root,width=400,height=200) w.pa ...