1.安装
vis-timeline ^7.7.2
vis-data ^7.1.6
2.引入
import { Timeline } from "vis-timeline";
import { DataSet } from 'vis-data';
import "vis-timeline/styles/vis-timeline-graph2d.min.css";
import moment from 'moment';
import "moment/dist/locale/zh-cn.js";
import { ref, onMounted, watch, reactive } from "vue";
3.html部分
<div class="time-visjs-style">
<div ref="timeVisjs"></div>
</div>
4.配置项
options: {
autoResize: true,
height: '80px',//高度
width: '97%',//宽度
min: '2000-01-01',//设置最小时间范围
max: new Date(),//设置最大时间范围
start: '2000-01-01',//设置开始时间
end: new Date(),//设置结束时间
stack: true, // ture则不重叠
limitSize:true,。
cluster: true,//数据量过大时使用。
xss: {
disabled: true,
},
format: {//设置展示形式
minorLabels: {
millisecond: 'SSS',
second: 's',
minute: 'HH:mm',
hour: 'HH:mm',
weekday: 'D',
day: 'D',
week: 'w',
month: 'MMM',
year: 'YYYY'
},
majorLabels: {
millisecond: 'HH:mm:ss',
second: 'D MMMM HH:mm',
minute: 'D MMMM',
hour: 'D MMMM',
weekday: 'MMMM YYYY',
day: 'MMMM YYYY',
week: 'MMMM YYYY',
month: 'YYYY',
year: ''
}
},
}
5.初始化
new DataSet([数据])----渲染数据
let timeVisjs = ref()//dom
const state: any = reactive({
timeline: null,
});
//初始化
const init=()=>{
let items: any = new DataSet([])
state.timeline = new Timeline(timeVisjs.value, items, options);
}
//更新数据
let items: any = new DataSet([
{
id: Math.random(),
content: 内容,
start: 时间,
end:时间
}
])
state.timeline.setItems(items);
//更新配置项
state.timeline.setOptions(options);
6.点击事件
state.timeline.on('click', function (item) {}