vue3使用vis.js插件中的vis-timeline时间轴

最新推荐文章于 2024-04-16 18:22:16 发布
最新推荐文章于 2024-04-16 18:22:16 发布
阅读量691 收藏 4
点赞数 1
文章标签： 前端 typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48986312/article/details/134314571
版权

这里写自定义目录标题

vue3使用vis.js插件中的vis-timeline时间轴

1. npm下载相关插件

npm install -S vis-linetime
npm install -S vis-data
npm install -S moment

2. 新建组件timeline.vue，在组件中导入模块

const moment = require('moment')
import { DataSet } from 'vis-data/peer'
import { Timeline } from 'vis-timeline/peer'
import 'vis-timeline/styles/vis-timeline-graph2d.css'
import { ref,onBeforeUnmount } from 'vue'

3. 创建模板

<template>
  <div ref="visualization" class="visGantt"></div>
  我是时间轴
</template>

4. 创建时间轴配置及获取元素

const timeline = ref(null)
const visualization = ref(null)

5. 数据

const ganntData = ref(
  [
    {
      norad: '11',
      name: 'test',
      trackTimeWindows: [
        {
          deviceId: '1',
          norad: '11',
          content: 'item 1',
          timeWindows: [
            {
              content: 'item 1',
              startTime: '2021-12-27 00:08:52.078',
              topTime: '2021-12-27 01:16:33.890',
              stopTime: '2021-12-27 02:25:39.348'
            },
          ]
        },
        {
          deviceId: '2',
          norad: '11',
          content: 'item 2',
          timeWindows: [
            {
              content: 'item 2',
              startTime: '2021-12-27 01:08:52.078',
              topTime: '2021-12-27 01:16:33.890',
              stopTime: '2021-12-27 04:25:39.348'
            },
          ]
        },
        {
          deviceId: '3',
          norad: '11',
          content: 'item 3',
          timeWindows: [
            {
              content: 'item 3',
              startTime: '2021-12-27 03:08:37.247',
              topTime: '2021-12-27 03:16:30.791',
              stopTime: '2021-12-27 05:25:29.077'
            },
          ]
        },
        {
          deviceId: '4',
          norad: '11',
          content: 'item 4',
          timeWindows: [
            {
              content: 'item 4',
              startTime: '2021-12-27 08:10:24.156',
              topTime: '2021-12-27 01:18:41.379',
              stopTime: '2021-12-27 12:28:32.674'
            },
          ]
        },
        {
          deviceId: '5',
          norad: '11',
          content: 'item 5',
          timeWindows: [
            {
              content: 'item 5',
              startTime: '2021-12-27 05:09:12.876',
              topTime: '2021-12-27 01:17:37.260',
              stopTime: '2021-12-27 07:27:14.041'
            },
          ]
        },
        {
          deviceId: '6',
          norad: '11',
          content: 'item 6',
          timeWindows: [
            {
              content: 'item 6',
              startTime: '2021-12-27 12:06:14.969',
              topTime: '2021-12-27 01:13:31.700',
              stopTime: '2021-12-27 14:21:58.220'
            },
          ]
        },
        {
          deviceId: '7',
          norad: '11',
          content: 'item 7',
          timeWindows: [
            {
              content: 'item 7',
              startTime: '2021-12-27 12:11:47.926',
              topTime: '2021-12-27 01:19:33.909',
              stopTime: '2021-12-27 15:29:01.687'
            },
          ]
        },
        {
          deviceId: '8',
          norad: '11',
          content: 'item 8',
          timeWindows: [
            {
              content: 'item 8',
              startTime: '2021-12-27 18:23:58.104',
              topTime: '2021-12-27 01:27:59.422',
              stopTime: '2021-12-27 23:32:00.740'
            },
          ]
        },
        {
          deviceId: '9',
          norad: '11',
          content: 'item 9',
          timeWindows: [
            {
              content: 'item 9',
              startTime: '2021-12-27 13:23:58.104',
              topTime: '2021-12-27 01:27:59.422',
              stopTime: '2021-12-27 16:32:00.740'
            },
          ]
        }
      ]
    }
  ]
)

6. 对数据进行处理

const computedData = () => {
  const trackTimeWindows = []
  const timeWindows = []
  ganntData.value[0].trackTimeWindows.forEach(
    (trackTimeWindow, trackTimeWindowIndex) => {
      trackTimeWindows.push({
        content: trackTimeWindow.content,
        id: `${trackTimeWindow.deviceId}-${trackTimeWindowIndex}-trackTimeWindows`,
        value: trackTimeWindowIndex + 1,
        className: `visGantt-item${trackTimeWindowIndex % 10}`
      })
      trackTimeWindow.timeWindows.forEach((timeWindow, timeWindowIndex) => {
        timeWindows.push({
          content: trackTimeWindow.content,
          start: new Date(timeWindow.startTime),
          startTime: timeWindow.startTime,
          end: new Date(timeWindow.stopTime),
          stopTime: timeWindow.stopTime,
          topTime: timeWindow.topTime,
          group: `${trackTimeWindow.deviceId}-${trackTimeWindowIndex}-trackTimeWindows`,
          className: `visGantt-item${trackTimeWindowIndex % 10}`,
          id: `${trackTimeWindow.deviceId}-${timeWindowIndex}-timeWindows`,
          deviceId: trackTimeWindow.deviceId
        })
      })
    }
  )
  return {
    trackTimeWindows,
    timeWindows
  }
}

7. 初始化配置时间轴

const initChart = () => {
  const { timeWindows, trackTimeWindows } = computedData()
  const groups = new DataSet(trackTimeWindows)
  const items = new DataSet(timeWindows)
  const container = visualization.value
  const options = {
    groupOrder: function(a, b) {
      return a.value - b.value
    },
    groupOrderSwap: function(a, b, groups) {
      const v = a.value
      a.value = b.value
      b.value = v
    },
    // height: '300px', // 高度
    verticalScroll: true, // 竖向滚动
    orientation: 'top', // 时间轴位置
    editable: false,
    groupEditable: false,
    min: new Date('2021-12-27 00:00'), // 最小可见范围
    max: new Date('2021-12-27 23:59'), // 最大可见范围
    tooltip: {
      followMouse: true,
      overflowMethod: 'cap',
      template: (originalItemData, parsedItemData) => {
        return `<div>
              <p
                <span>设备名称：</span>
                <span>${originalItemData.content}</span>
              </p><br/>
              <p>
                <span>开始时间：</span>
                <span>${originalItemData.startTime}</span>
              </p><br/>
              <p>
                <span>结束时间：</span>
                <span>${originalItemData.stopTime}</span>
              </p>
            </div>`
      }
    },
    // zoomMin: 1728000000,
    // zoomMax: 315360000000,
    locale: moment.locale('zh-cn')  // 时间轴国际化
  }
  timeline.value = new Timeline(container)
  timeline.value.setOptions(options)
  timeline.value.setGroups(groups)
  timeline.value.setItems(items)
}

8. 在生命周期中使用

onMounted(() => {
  initChart()
})

9. 销毁

onBeforeUnmount(() => {
  timeline.value.destroy()
  timeline.value = null
})

时间轴完整代码

template

<template>
  <div ref="visualization" class="visGantt"></div>
  我是时间轴
</template>

ts代码

<script setup lang="ts">
const moment = require('moment')
import { DataSet } from 'vis-data/peer'
import { Timeline } from 'vis-timeline/peer'
import 'vis-timeline/styles/vis-timeline-graph2d.css'
import { ref,onBeforeUnmount } from 'vue'

const ganntData = ref(
  [
    {
      norad: '11',
      name: 'test',
      trackTimeWindows: [
        {
          deviceId: '1',
          norad: '11',
          content: 'item 1',
          timeWindows: [
            {
              content: 'item 1',
              startTime: '2021-12-27 00:08:52.078',
              topTime: '2021-12-27 01:16:33.890',
              stopTime: '2021-12-27 02:25:39.348'
            },
          ]
        },
        {
          deviceId: '2',
          norad: '11',
          content: 'item 2',
          timeWindows: [
            {
              content: 'item 2',
              startTime: '2021-12-27 01:08:52.078',
              topTime: '2021-12-27 01:16:33.890',
              stopTime: '2021-12-27 04:25:39.348'
            },
          ]
        },
        {
          deviceId: '3',
          norad: '11',
          content: 'item 3',
          timeWindows: [
            {
              content: 'item 3',
              startTime: '2021-12-27 03:08:37.247',
              topTime: '2021-12-27 03:16:30.791',
              stopTime: '2021-12-27 05:25:29.077'
            },
          ]
        },
        {
          deviceId: '4',
          norad: '11',
          content: 'item 4',
          timeWindows: [
            {
              content: 'item 4',
              startTime: '2021-12-27 08:10:24.156',
              topTime: '2021-12-27 01:18:41.379',
              stopTime: '2021-12-27 12:28:32.674'
            },
          ]
        },
        {
          deviceId: '5',
          norad: '11',
          content: 'item 5',
          timeWindows: [
            {
              content: 'item 5',
              startTime: '2021-12-27 05:09:12.876',
              topTime: '2021-12-27 01:17:37.260',
              stopTime: '2021-12-27 07:27:14.041'
            },
          ]
        },
        {
          deviceId: '6',
          norad: '11',
          content: 'item 6',
          timeWindows: [
            {
              content: 'item 6',
              startTime: '2021-12-27 12:06:14.969',
              topTime: '2021-12-27 01:13:31.700',
              stopTime: '2021-12-27 14:21:58.220'
            },
          ]
        },
        {
          deviceId: '7',
          norad: '11',
          content: 'item 7',
          timeWindows: [
            {
              content: 'item 7',
              startTime: '2021-12-27 12:11:47.926',
              topTime: '2021-12-27 01:19:33.909',
              stopTime: '2021-12-27 15:29:01.687'
            },
          ]
        },
        {
          deviceId: '8',
          norad: '11',
          content: 'item 8',
          timeWindows: [
            {
              content: 'item 8',
              startTime: '2021-12-27 18:23:58.104',
              topTime: '2021-12-27 01:27:59.422',
              stopTime: '2021-12-27 23:32:00.740'
            },
          ]
        },
        {
          deviceId: '9',
          norad: '11',
          content: 'item 9',
          timeWindows: [
            {
              content: 'item 9',
              startTime: '2021-12-27 13:23:58.104',
              topTime: '2021-12-27 01:27:59.422',
              stopTime: '2021-12-27 16:32:00.740'
            },
          ]
        }
      ]
    }
  ]
)
const timeline = ref(null)
const visualization = ref(null)
const computedData = () => {
  const trackTimeWindows = []
  const timeWindows = []
  ganntData.value[0].trackTimeWindows.forEach(
    (trackTimeWindow, trackTimeWindowIndex) => {
      trackTimeWindows.push({
        content: trackTimeWindow.content,
        id: `${trackTimeWindow.deviceId}-${trackTimeWindowIndex}-trackTimeWindows`,
        value: trackTimeWindowIndex + 1,
        className: `visGantt-item${trackTimeWindowIndex % 10}`
      })
      trackTimeWindow.timeWindows.forEach((timeWindow, timeWindowIndex) => {
        timeWindows.push({
          content: trackTimeWindow.content,
          start: new Date(timeWindow.startTime),
          startTime: timeWindow.startTime,
          end: new Date(timeWindow.stopTime),
          stopTime: timeWindow.stopTime,
          topTime: timeWindow.topTime,
          group: `${trackTimeWindow.deviceId}-${trackTimeWindowIndex}-trackTimeWindows`,
          className: `visGantt-item${trackTimeWindowIndex % 10}`,
          id: `${trackTimeWindow.deviceId}-${timeWindowIndex}-timeWindows`,
          deviceId: trackTimeWindow.deviceId
        })
      })
    }
  )
  return {
    trackTimeWindows,
    timeWindows
  }
}
const initChart = () => {
  const { timeWindows, trackTimeWindows } = computedData()
  const groups = new DataSet(trackTimeWindows)
  const items = new DataSet(timeWindows)
  const container = visualization.value
  const options = {
    groupOrder: function(a, b) {
      return a.value - b.value
    },
    groupOrderSwap: function(a, b, groups) {
      const v = a.value
      a.value = b.value
      b.value = v
    },
    // height: '300px', // 高度
    verticalScroll: true, // 竖向滚动
    orientation: 'top', // 时间轴位置
    editable: false,
    groupEditable: false,
    min: new Date('2021-12-27 00:00'), // 最小可见范围
    max: new Date('2021-12-27 23:59'), // 最大可见范围
    tooltip: {
      followMouse: true,
      overflowMethod: 'cap',
      template: (originalItemData, parsedItemData) => {
        return `<div>
              <p
                <span>设备名称：</span>
                <span>${originalItemData.content}</span>
              </p><br/>
              <p>
                <span>开始时间：</span>
                <span>${originalItemData.startTime}</span>
              </p><br/>
              <p>
                <span>结束时间：</span>
                <span>${originalItemData.stopTime}</span>
              </p>
            </div>`
      }
    },
    // zoomMin: 1728000000,
    // zoomMax: 315360000000,
    locale: moment.locale('zh-cn')  // 时间轴国际化
  }
  timeline.value = new Timeline(container)
  timeline.value.setOptions(options)
  timeline.value.setGroups(groups)
  timeline.value.setItems(items)
}
onBeforeUnmount(() => {
  timeline.value.destroy()
  timeline.value = null
})
onMounted(() => {
  initChart()
})
</script>

最后效果

图片: 在这里插入图片描述

借鉴：https://www.jb51.net/article/275541.htm

wst_622
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3实现横向交错时间轴组件
拓的博客
04-10 761
Vue3实现横向交错时间轴组件
simple-vue-timeline:一个简单但可自定义且React灵敏的时间轴Vue组件
05-17
简单的时间线 一个简单但可自定义的React性时间轴vue组件，它利用了公共库的使用： ， 和日期格式。 如果您觉得它有用，请给它加然后考虑考虑。 有关更多详细信息，请参阅。 对于您遇到的任何问题，请使用或向我提供有关您的用法的反馈。 入门 安装 npm install --save simple-vue-timeline import { Vue } from "vue" ; import { SimpleTimelinePlugin } from 'simple-vue-timeline' ; Vue . use ( SimpleTimelinePlugin ) ; 声明第三方库的使用 从2.x版本开始，simple-vue-timeline本身不再声明第三方使用情况。 因此，您有责任在使用simple-vue-timeline的vue项目中声明它们。 Vue-font
可拖动的时间轴(vue3+ts使用element-plus的Slider滑块封装)
weixin_60886885的博客
06-14 3182
图一： 图二：HTML代码如下： 封装组件，后端传递开始时间和结束时间，前端算出中间相差多少天 图一效果：后端只传了一个开始时间和结束时间 图二效果：后端传了一个时间数组，包含了一段时间（只需要将图一的getDaysArr 的获取时间段的行为改为时间数组；props默认开始时间和默认结束时间改为时间数组的第一位和最后一位即可，以下代码是一个简单的示例） 封装计算开始时间与结束时间之间的天数，以及数组转对象的方法 新建calculatetime方法文件，写入以下代码 在父组件调用封装的时间
Vue3时间轴（Timeline）
Mr Dear的博客
04-18 4764
垂直展示的时间流信息组件，可自定义设置内容描述和圆圈样式。
vue3中使用timeline组件
最新发布
caohuixue_2021的博客
04-16 329
【代码】vue3中使用timeline组件。
vue3 vis-timeline
qq_40734853的博客
09-09 641
new DataSet([数据])----渲染数据。
【JS】vis.js使用之vis-timeline使用攻略，vis-timeline在vue3中实现时间轴、甘特图
余浩的博客
04-18 6730
`vis-timeline`时间轴是一个交互式可视化图表，用于实时可视化时间数据。数据项可以只与某个时间点关联，也可以有开始和结束日期（即一个时间范围）。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的，支持从毫秒到年的尺度。 vis-time时间轴使用常规`HTML DOM`呈现时间轴和放在时间轴上的项目，这样的好处就是可以使用自定义css样式进行灵活定制。
Vue 实现简单的时间轴 时间进度条
热门推荐
m0_61570521的博客
07-13 1万+
项目需要按天播放地图等值线图功能，所以需要一个时间进度条，百度了一下发现没有自己需要的样子，于是只能简单的写一个。1、封装时间尺度组件 2、在页面使用 3、组件init方法内 通过起止时间算出中间的所有时间尺度。 附上效果图生成刻度是用的flex布局 宽度超出自动撑开 间距固定 通过取模数组下标 每5天突出刻度尺并标记刻度时间，有不懂的可以留言，看见了会接单，时间仓促，有bug请见谅。.........
vue3.0横向TimeLine组件封装
m0_62949703的博客
11-11 2801
满足个性化需求的横向TimeLine组件，基于vue3.0封装，方法简单，多用于项目管理开发中，已在props中规定传参形式，可作为子组件复用。
vue3 时间轴选择某个时间段
sbb0_0的博客
09-26 312
【vue3】时间轴选择某段时间
vue+el-timeline组件：打造动态表格时间线的新利器
Shids_的博客
09-01 1万+
vue+el-timeline组件：打造动态表格时间线的新利器
使用vis绘制堆叠折线图并添加自定义时间，可随时间变化进行移动以及自定义图例功能
weixin_39893889的博客
05-16 682
使用vis绘制堆叠折线图 最终实现效果 安装相关依赖包 cnpm install -S vis-linetime cnpm install -S vis-data cnpm install -S moment 组件中引入使用 const moment = require('moment') import { DataSet } from 'vis-data/peer' import { Graph2d } from 'vis-timeline/peer' import 'vis-timeline/st
vuetimeline-一个易于使用的组件，可以构建精美的响应时间线。-Vue.js开发
05-27
文档您可以在网站上浏览Vue时间轴的文档。 安装npm install @ growthbunker / vuetimeline＃或者，如果您更喜欢文档您可以在网站上浏览Vue时间轴的文档。 安装npm install @ growthbunker / vuetimeline＃或者，如果您更喜欢使用纱线，请添加@ growthbunker / vuetimeline Vue.js在您的main.js文件中：从“ vue”导入Vue从“ @ growthbunker / vuetimeline”导入vuetimeline Vue.use（vuetimeline ）Nuxt.js在plugins / vuetimeline.js中创建一个新插件：从“ vue”导入Vue从“ @ growthbunker / vuetimeline”导入vuetimeline Vue.use（vuetimeline）添加此新
Vue实现可移动水平时间轴
10-15
主要为大家详细介绍了Vue实现可移动水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery刻度尺风格横向时间轴插件timeline
06-10
timeline是一款效果类似时间刻度尺风格的jQuery横向时间轴插件网页时间轴特效代码。
timeline:使用Vue进行时间轴管理
04-01
时间线追踪器 Gunakan projek ini sesuai dengan kebutuhan kalian。 特征 Tidak memerlukan DB karena数据删除了kedalam文件。 用户名dan密码bisa ditambah didalam文件yang tidak bisa diakses publik。 Sangat简单Jadi Bisa kalian kembangkan sendiri。 记录系统untuk melacak jejak用户登录dan transaksi数据。 Menggunakan库Vue.js tanpa Webpack。 要求 Koneksi Internet untuk下载库vuejs dan vue-datepicker 阿帕奇（bisa pakai XAMPP / Laragon） PHP（在7.2中测试） 读写许可kh
vue-awesome-timeline:vue.js应用程序中用于时间轴的Vue模块
05-17
Vue真棒时间表 vue.js应用程序中用于时间轴的Vue模块。 该项目的一些目标值得注意： 轻巧，功能强大且易于使用处理任何图像类型加载图像时添加加载类同时支持Vue 1.0和Vue 2.0目录方法事件挂钩延迟加载处理程序表现...
vue-horizontal-timeline:只是使用Vue.js制作的一个简单的水平时间轴组件
04-28
只是一个由Vue.js制作的简单水平时间轴组件。 演示版 故事书 前往 如何安装 npm $ npm install vue-horizontal-timeline --save 纱线（推荐） $ yarn add vue-horizontal-timeline 快速开始 Vue.js 您可以导入...
vue-gantt-schedule-timeline-calendar-example:Vue Gantt时间表时间轴日历用法示例
05-11
Vue 用法示例 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue.config.js配置style-resources-loader在components使用颜色变量报错
05-26
使用`style-resources-loader`可以方便地在所有`vue`组件中共享样式资源，但是在使用颜色变量时可能会出现报错。 这是因为在`vue-loader`中默认开启了CSS modules，导致样式文件的作用域被限定在组件内部，而无法在全局中使用。解决方法如下： 1. 在`vue.config.js`中关闭CSS modules ```javascript module.exports = { css: { modules: false } } ``` 2. 在使用`style-resources-loader`时指定类型为全局 ```javascript // vue.config.js module.exports = { chainWebpack: config => { config.module .rule('scss') .oneOf('vue') .use('style-resource') .loader('style-resources-loader') .options({ patterns: [ path.resolve(__dirname, './src/styles/variables.scss') ], // 指定类型为全局 injector: 'global' }) .end() } } ``` 这样就可以在所有`vue`组件中使用共享的样式资源了，其中包括使用颜色变量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值