vue3 vis-timeline

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) {}