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事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...
随机推荐
- VisualStudio 2013开发Office插件
在VS中选择创建新项目,选择App for Office 选择mail出现的位置 Task pane The app appears in the task pane of a Microsift O ...
- 从sizeof(string)到引用计数的漫游
前言: 说是漫游,其实就是扯,一点一点的扯. 话说之前参加华为的德州扑克比赛,我用C++解析消息的时候碰到一个小问题,就是定长收消息的时候出错,在Linux下调了很久很久,终于发现,sizeof(st ...
- HDU1754I Hate It（线段树）
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 正则 lazy
- Jenkins上配置Robot Framework测试邮件通知模板
邮件效果 测试成功如下所示: jenkins_robot_success 测试失败如下所示: jenkins_robot_failure 通过这个模板,我们能够很直观地看出测试的执行情况,以及相关的统 ...
- [HDU5739]Fantasia(圆方树DP)
题意:给一张无向点带有权无向图.定义连通图的权值为图中各点权的乘积,图的权值为其包含的各连通图的权和.设z_i为删除i点后图的权值,求$S = (\sum\limits_{i=1}^{n}i\cdot ...
- 【博弈论】【SG函数】Codeforces Round #188 (Div. 1) D. Game with Powers
将整个游戏可以划分成若干个互不相交的子游戏. 每个子游戏的sg值只与其中的数的个数有关.而这个数不会超过30. 于是可以预处理出这个sg值表. 然后从1到n枚举,对<=sqrt(n)的部分,用个 ...
- 【Splay】【块状链表】bzoj3223 Tyvj 1729 文艺平衡树
让蒟蒻见识到了常数大+滥用STL的危害. <法一>很久之前的Splay #include<cstdio> #include<algorithm> using nam ...
- Java高级架构师（一）第19节：X-gen生成相应的Visitor
package cn.javass.themes.smvcsm.visitors; import cn.javass.xgen.genconf.vo.ExtendConfModel; import c ...
- 分析器错误 未能加载类型“XX.WebApiApplication”
解决方案,删除bin目录下内容(有单独使用dll的删除前请先备份) 清理解决方案并重新生成