display gantt-like vaule,like use this to order bus schedule. 

wuchouchou

v-gantt-chart

  "description": "display gantt-like vaule,like use this to order bus schedule.",

  "main": "dist/v-gantt-chart.umd.min.js",

    "url": "git+https://github.com/w1301625107/Vue-Gantt-chart.git"

    "url": "https://github.com/w1301625107/Vue-Gantt-chart/issues"

  "homepage": "https://github.com/w1301625107/Vue-Gantt-chart#readme",

    "build": "npm run lint --fix && NODE_ENV=DEMO vue-cli-service build ",

    "test:unit": "vue-cli-service test:unit",

    "libbuild": "npm run lint  --fix && vue-cli-service build --target lib --name v-gantt-chart src/index.js"

    "resize-observer-polyfill": "^1.5.1",

    "@vue/cli-plugin-unit-mocha": "^4.1.0",

    "@vue/eslint-config-prettier": "^5.0.0",

<p align="center">基于 Vue  实现的 gantt-like 图表 ,用于排班展示</p>

[![npm](https://img.shields.io/npm/v/v-gantt-chart.svg)](https://www.npmjs.com/package/v-gantt-chart)

[![total](https://img.shields.io/npm/dt/v-gantt-chart.svg)](https://img.shields.io/npm/dt/v-gantt-chart.svg)

![](https://img.shields.io/badge/license-MIT-000000.svg)

[![HitCount](http://hits.dwyl.io/w1301625107/Vue-Gantt-chart.svg)](http://hits.dwyl.io/w1301625107/Vue-Gantt-chart)

[![v-gantt-chart](https://nodei.co/npm/v-gantt-chart.png)](https://npmjs.org/package/v-gantt-chart)

## [React版本](https://github.com/w1301625107/React-Gantt-chart)

## [Demo预览地址](https://w1301625107.github.io/Vue-Gantt-chart/demo/index.html)

    - [template code](#template-code)    

    - [block 容器块slot 有 __`两种`__ 需要注意](#block-容器块slot-有-__两种__-需要注意)      

      - [⭐️ `customGenerateBlocks` 为 `false`（默认值） 的情况](#⭐️-customgenerateblocks-为-false默认值-的情况)      

      - [⭐️ `customGenerateBlocks` 为 `true` 的情况](#⭐️-customgenerateblocks-为-true-的情况)    

    - [left 行名slot](#left-行名slot) 

    - [markline 时间标记线slot](#markline 时间标记线slot) 

    - [markline 时间标记线slot](#markline-时间标记线slot) 

    - [timeline 行名slot](#timeline-时间轴slot)       

    - [title 标题slot](#title-标题slot)  

- 虚拟列表，快速渲染可视区域，支持大量数据渲染

- 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天

import Test from "./test.vue"; //你自己的gantt条容器

import TestLeft from "./test-left.vue"; //你自己的行名称组件

import { mockDatas } from "@src/mock/index.js"; //伪造的数据

| scrollToPostionHandle|positon:{x:number,y:number} | 滚动到指定位置|

| scrollToPositionHandle|positon:{x:number,y:number} | 滚动到指定位置|

| scrollToTimehandle | time:string | 滚动到指定时间|

  <v-gantt-chart ref="gantt"></v-gantt-chart>

      this.$refs.gantt.scrollToPostionHandle({x:100,y:100})

      this.$refs.gantt.scrollToTimehandle("Fri, 31 Jul 2020 12:41:39 GMT")

#打开浏览器地址栏输入localhost:8080即可

- IE 需要自己处理一些ployfill,应该是promise

- IE 浏览器内无法使用yyyy-MM-dd hh:mm:ss的字符串形式初始化,需要注意时间的格式

- MacOS 系统需要在偏好设置中的通用开启始终显示滚动条，否则可能会看不到滚动条

- 注意查看vue 版本，不是2.6以上vue版本，不能直接使用demo中的v-slot的语法，需要使用旧的slot 语法[2.6之前的slot 语法](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)

	      <template slot="block" slot-scope="{data,item}">  //<--------区别在这里

- 修改导出的内容，支持页面单独引入

- 使用css来绘制网格获取更好的显示效果

		{
		"name": "v-gantt-chart",
		"version": "1.6.1",
		"version": "1.6.2",
		"description": "display gantt-like vaule,like use this to order bus schedule.",
		@@ -5,0 +5,0 @@ "main": "dist/v-gantt-chart.umd.min.js",

		@@ -31,3 +31,3 @@ <p align="center"><img src="https://raw.githubusercontent.com/w1301625107/vue-gantt-chart/master/screenshot/icon.png" alt="logo" width="180"></p>
		- [left 行名slot](#left-行名slot)
		- [markline 时间标记线slot](#markline 时间标记线slot)
		- [markline 时间标记线slot](#markline-时间标记线slot)
		- [timeline 行名slot](#timeline-时间轴slot)
		@@ -419,3 +419,3 @@ - [title 标题slot](#title-标题slot)
		\| :--- \|:-----:\|:---------\|
		\| scrollToPostionHandle\|positon:{x:number,y:number} \| 滚动到指定位置\|
		\| scrollToPositionHandle\|positon:{x:number,y:number} \| 滚动到指定位置\|
		\| scrollToTimehandle \| time:string \| 滚动到指定时间\|
		@@ -422,0 +422,0 @@

Improved metrics