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>

 

posted @ 2016-05-10 10:54  Man_华  阅读(1935)  评论(0)  编辑  收藏  举报