vis-timeline时间线

项目里需要时间线展示
发现vis的timeline满足需求便下载了vis

但是在项目里使用的时候数据没有渲染出来，也没有报错
刚开始写的代码

<template>
	<div>
		<div id="visualization"></div>
	</div>
</template>
<script>
	import vis from"vis";
	export default {
		methods:{
			init(){
				 const container = document.getElementById("visualization");
				 const items = new vis.DataSet([
    				{ id: 1, content: "item 1", start: "2014-04-20" },
    				{ id: 2, content: "item 2", start: "2014-04-14" },
   				 	{ id: 3, content: "item 3", start: "2014-04-18" },
    				{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
    				{ id: 5, content: "item 5", start: "2014-04-25" },
    				{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
				  ]);
				   const options = {};
				   const timeline = new vis.Timeline(container, items, options);
			}
		},
		mounted(){
			this.init();
		}
	}
</script>

发现这么写没有效果
看了官方文档例子
换了一种引入方式后数据渲染成功
需要在引入两个包
yarn add vis-linetime
yarn add vis-data
代码修改为

import { DataSet } from "vis-data/peer";
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";

const container = document.getElementById("visualization");
const items = new DataSet([
  { id: 1, content: "item 1", start: "2014-04-20" },
  { id: 2, content: "item 2", start: "2014-04-14" },
  { id: 3, content: "item 3", start: "2014-04-18" },
  { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
  { id: 5, content: "item 5", start: "2014-04-25" },
  { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
const options = {};
const timeline = new Timeline(container, items, options);