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>
