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事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...
随机推荐
- ASP.NET Core 2.2 基础知识(十) Web服务器 - Kestrel
ASP.NET Core 应用与进程内的 HTTP 服务器实现一起运行.该服务器实现侦听 HTTP 请求,并在一系列请求功能被写到 HttpContext 时,将这些请求展现到应用中. ASP.NET ...
- [BZOJ 2768] 冠军调查
Link:https://www.lydsy.com/JudgeOnline/problem.php?id=2768 Solution: 一道比较基础的最大流的题目 一般看到将点分为两类的题目就要往网 ...
- 【动态规划】【二分】【最长不下降子序列】洛谷 P1020 导弹拦截
最长不下降子序列的nlogn算法 见 http://www.cnblogs.com/mengxm-lincf/archive/2011/07/12/2104745.html 这题是最长不上升子序列,倒 ...
- Problem O: 零起点学算法10——求圆柱体的表面积
#include<stdio.h> int main() { float r,h,pi; pi=3.1415926; scanf("%f %f",&r,& ...
- React Native 让组件做到局部刷新
利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? ...
- iOS中的场景转换机制的浅显分析
目前Apple推荐的场景转换的方法有以下几个: 一般的跳转方法: presentViewController Discussion In a horizontally compact environm ...
- catalina_home与catalina_base
CATALINA_HOME是Tomcat的安装目 录,CATALINA_BASE是Tomcat的工作目录. 如果我们想要运行Tomcat的多个实例,但是不想安装多个Tomcat软件副本.那么我们可以配 ...
- spark DiskBlockManager
RDD本身presist可以是本地存储,本地存储级别的持久化实现方式如下: DiskBlockManager负责管理和维护block和磁盘存储的映射关系,通过blockId作为文件名称,然后如果是多个 ...
- 在Delphi中使用键盘勾子获取键盘输入（译--5月7日）
http://blog.sina.com.cn/s/blog_502b2e970100949s.html 获取键盘输入以控制无法接受输入焦点的控件考虑一些游戏,显示图片在TPainBox,但是TPai ...
- redis秒杀系统数据同步（保证不多卖）
东西不多卖 秒杀系统需要保证东西不多卖,关键是在多个客户端对库存进行减操作时,必须加锁.Redis中的Watch刚好可以实现一点.首先我们需要获取当前库存,只有库存中的食物小于购物车的数目才能对库存进 ...