结合vis_timeline时间轴开发

　　首先导入vis

　　npm install vis --save

　　功能有：添加时间点，时间轴动画运动，加减速。

　　然后主要代码：

<template>
	<div class="time_line_box">
		<div>
			<el-button  type="success" id="addPoint" @click="addPoint">添加点</el-button>
			<el-button  type="success" id="run" @click="openRunning">开启</el-button>
			<el-button  type="success" id="stop" @click="stopRunning">关闭</el-button>
			<div v-show="isRunning" class="time_line_control_btn">
				<el-button  type="success" id="speedUpBtn" @click="speedUpRunning">快进</el-button>
				<el-button  type="success" id="speedDownBtn" @click="speedDownRunning">减速</el-button>
			</div>
		</div>

		<div id="visualization">
			<span class="center_vertical_bar">|</span>
		</div>
	</div>
</template>
<script>
    import { DataSet,Timeline } from 'vis';
    export default {
        name: "ShufflingFigure",
        data() {
            return {
                timePointIndex:0,
				options: {
                    start: '2014-01-10',
                    end: '2014-02-10',
                    editable: true,
                    showCurrentTime: true
                },
                items:null,
                timeline:null,
                interval:null,
				isRunning:false,
                resultPointDate:[{id: 5, content: 'item 5', start: '2014-01-28', type:'point'}],
                speedNum:1,//速度数值
				speedMultiple:10//加速倍数
            };
        },
        methods: {
            /**
			 * 在时间轴上添加标注点
			 * param:[{content:"内容"，start:"开始时间"，end:"结束时间"，}]
			 */
            addPoint(param){
                param=[{content: 'item 0', start: '2014-01-18'},{content: 'item 1<br>start', start: '2014-01-23 0:0:0', end: '2014-01-25 0:0:0'}]
				if(param&&param.length>0){
				    let newPointDate=[];
                    param.forEach((item,index)=>{
                        let eleData=item;
                        eleData.id=this.timePointIndex;
                        this.resultPointDate.push(eleData);
                        newPointDate.push(eleData);
						this.timePointIndex++;
                    })
                    this.items.add(newPointDate);
				}

                // this.items.add([
                //     {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
                //     {id: 2, content: 'item 2', start: '2014-01-18'},
                //     {id: 3, content: 'item 3', start: '2014-01-21'},
                //     {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
                //     {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
                // ]);
			},
            /**
			 * 开始跑起来
             */
            openRunning(){
                let self=this;
                //先停止后奔跑
                self.stopRunning();
                //获取当前中心点的时间
                let startTime=self.timeline.getWindow().start.getTime();
                let endTime=self.timeline.getWindow().end.getTime();
                //根据时间戳算中心时间
                let dateRun=new Date((startTime+endTime)/2);
                self.centerTimeStr=self.getdate(dateRun);
                self.isRunning=true;
                self.cycleFun(self);
                self.interval=setInterval(function(){
                    self.cycleFun(self);
                },1000)
			},
			/**
			 * 循环的方法体
			 */
            cycleFun(self){
                //时间加一秒
                let timeStr =self.getTimeStr(self.centerTimeStr);
                //每秒30天
                // timeStr=new Date(timeStr.setSeconds(timeStr.getSeconds()+2592000));
                //每秒一天
                // timeStr=new Date(timeStr.setSeconds(timeStr.getSeconds()+86400));
                //每秒一小时
                // timeStr=new Date(timeStr.setSeconds(timeStr.getSeconds()+3600));
                //每秒一分
                // timeStr=new Date(timeStr.setSeconds(timeStr.getSeconds()+60));
                //每秒一秒
                timeStr=new Date(timeStr.setSeconds(timeStr.getSeconds()+this.speedNum));
                self.centerTimeStr=self.getdate(timeStr);
                self.timeline.moveTo(self.centerTimeStr, {animation: {duration: 1000, easingFunction: 'linear'}})
            },
            /**
             * 停止跑步
             */
            stopRunning(){
                this.isRunning=false;
                clearInterval(this.interval);
			},
            /**
			 * Date转化为varcher
             * @param d
             * @returns {string}
             */
            getdate(d){
                let date = (d.getFullYear()) + "-" +
                    (d.getMonth() + 1) + "-" +
                    (d.getDate()) + " " +
                    (d.getHours()) + ":" +
                    (d.getMinutes()) + ":" +
                    (d.getSeconds());
                return date;
			},
            /**
			 * varcher转化为Date
             * @param timeStr
             * @returns {Date}
             */
            getTimeStr(timeStr){
                timeStr = timeStr.substring(0,19);
                timeStr = timeStr.replace(/-/g,'/');
                let date = new Date(timeStr)
                return date;
            },
            /**
			 * 加速按钮
             */
            speedUpRunning(){
                this.speedNum=(this.speedNum)*this.speedMultiple;
			},
            /**
			 * 降速
             */
            speedDownRunning(){
                this.speedNum=(this.speedNum)/(this.speedMultiple);
			}
		},
        mounted() {
            let self=this;
            //初始化时间轴
            this.items = new DataSet(this.resultPointDate);
            let container = document.getElementById('visualization');
            this.timeline = new Timeline(container, this.items, this.options);
            //时间轴范围变化
            this.timeline.on('rangechange', function (properties) {
                if(properties.event&&properties.event.type){
                    if(self.isRunning){
                        self.openRunning();
                    }
				}
            });
        }
    };
</script>

<style lang="scss">
	@import "/css/style.css";
	@import "/css/vis.min.css";
</style>

　　样式文件：style.css

.center_vertical_bar{
	position: absolute;
	left: 50%;
	font-size: 50px;
	top: 53px;
}
.time_line_control_btn{
	display: inline-block;
}

　　样式文件：vis.min.css

.vis-custom-time{background-color:#6e94ff;2px;cursor:move;z-index:1}.vis-custom-time.disabled{cursor:inherit}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-vertical-rtl{position:absolute;border-right:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-item{position:absolute;color:#1a1a1a;border-color:#97b0f8;border-1px;background-color:#d5ddf6;display:inline-block;z-index:1}.vis-item.vis-selected{border-color:#ffc200;background-color:#fff785;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-point.vis-selected{background-color:#fff785}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item-visible-frame{white-space:nowrap}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;0;border-left-1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-onUpdateTime-tooltip{position:absolute;background:#4f81bd;color:#fff;200px;text-align:center;white-space:nowrap;padding:5px;border-radius:1px;transition:.4s;-o-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s}.vis-item .vis-delete,.vis-item .vis-delete-rtl{position:absolute;top:0;24px;height:24px;box-sizing:border-box;padding:0 5px;cursor:pointer;-webkit-transition:background .2s linear;-moz-transition:background .2s linear;-ms-transition:background .2s linear;-o-transition:background .2s linear;transition:background .2s linear}.vis-item .vis-delete{right:-24px}.vis-item .vis-delete-rtl{left:-24px}.vis-item .vis-delete-rtl:after,.vis-item .vis-delete:after{content:"0D7";color:red;font-family:arial,sans-serif;font-size:22px;font-weight:700;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear}.vis-item .vis-delete-rtl:hover,.vis-item .vis-delete:hover{background:red}.vis-item .vis-delete-rtl:hover:after,.vis-item .vis-delete:hover:after{color:#fff}.vis-item .vis-drag-center{position:absolute;100%;height:100%;top:0;left:0;cursor:move}.vis-item.vis-range .vis-drag-left{position:absolute;24px;max-20%;min-2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;24px;max-20%;min-2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-range.vis-item.vis-readonly .vis-drag-left,.vis-range.vis-item.vis-readonly .vis-drag-right{cursor:auto}.vis [class*=span]{min-height:0;auto}.vis-current-time{background-color:#ff7f6e;2px;z-index:1;pointer-events:none}.vis-rolling-mode-btn{height:40px;40px;position:absolute;top:7px;right:20px;border-radius:50%;font-size:28px;cursor:pointer;opacity:.8;color:#fff;font-weight:700;text-align:center;background:#3876c2}.vis-rolling-mode-btn:before{content:"26F6"}.vis-rolling-mode-btn:hover{opacity:1}.vis-timeline{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis-loading-screen{100%;height:100%;position:absolute;top:0;left:0}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-1px}.vis-timeline .vis-point{stroke-2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}.vis-panel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-left.vis-panel.vis-vertical-scroll,.vis-right.vis-panel.vis-vertical-scroll{height:100%;overflow-x:hidden;overflow-y:scroll}.vis-left.vis-panel.vis-vertical-scroll{direction:rtl}.vis-left.vis-panel.vis-vertical-scroll .vis-content{direction:ltr}.vis-right.vis-panel.vis-vertical-scroll{direction:ltr}.vis-right.vis-panel.vis-vertical-scroll .vis-content{direction:rtl}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-background{overflow:hidden}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;100%;height:100%;overflow:visible}.vis-axis{position:absolute;100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-nesting-group{cursor:pointer}.vis-nested-group{background:#f5f5f5}.vis-label.vis-nesting-group.expanded:before{content:"25BC"}.vis-label.vis-nesting-group.collapsed-rtl:before{content:"25C0"}.vis-label.vis-nesting-group.collapsed:before{content:"25B6"}.vis-overlay{position:absolute;top:0;left:0;100%;height:100%;z-index:10}.vis-labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis-labelset .vis-label{position:relative;left:0;top:0;100%;color:#4d4d4d;box-sizing:border-box}.vis-labelset .vis-label{border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label.vertical{display:flex;align-items:center;justify-content:center}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-labelset .vis-label.vertical .vis-inner{padding-top:0;padding-bottom:0;white-space:nowrap;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}div.vis-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-configuration-wrapper{display:block;700px}div.vis-configuration-wrapper::after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{display:block;495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-configuration.vis-config-button{display:block;495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;495px;height:25px;vertical-align:middle;line-height:25px}div.vis-configuration.vis-config-item.vis-config-s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{120px;height:25px;line-height:25px}div.vis-configuration.vis-config-label.vis-config-s3{110px}div.vis-configuration.vis-config-label.vis-config-s4{100px}div.vis-configuration.vis-config-colorBlock{top:1px;30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-configuration.vis-config-checkbox{left:-5px}input.vis-configuration.vis-config-rangeinput{position:relative;top:-5px;60px;padding:1px;margin:0;pointer-events:none}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:rgba(0,0,0,0);300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%)}input.vis-configuration.vis-config-range::-moz-range-track{300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{300px;height:5px;background:0 0;border-color:transparent;border-6px 0;color:transparent}input.vis-configuration.vis-config-range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-configuration.vis-config-range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-configuration.vis-config-range::-ms-thumb{border:none;height:16px;16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:focus::-ms-fill-lower{background:#888}input.vis-configuration.vis-config-range:focus::-ms-fill-upper{background:#ccc}.vis-configuration-popup{position:absolute;background:rgba(57,76,89,.85);border:2px solid #f2faff;line-height:30px;height:30px;150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.vis-configuration-popup:after,.vis-configuration-popup:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;0;position:absolute;pointer-events:none}.vis-configuration-popup:after{border-color:rgba(136,183,213,0);border-left-color:rgba(57,76,89,.85);border-8px;margin-top:-8px}.vis-configuration-popup:before{border-color:rgba(194,225,245,0);border-left-color:#f2faff;border-12px;margin-top:-12px}.vis .overlay{position:absolute;top:0;left:0;100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}div.vis-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2);pointer-events:none;z-index:5}

　　o了个k.