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) 

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

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

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

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

`markLineTime` 为 传人的`timelines`的每一个值

计算当前时间的偏移值，参数为day,返回偏移值

| :-------------- | :------: | :-----: | :----: | :---- |

| datas           |    ❌     |  array  |   []   | 在**默认情况**下（即`customGenerateBlocks`为`false`）的渲染的数据需要**特殊格式** ，目前要求数组中每一个值均为对象，且有gtAarry对象数组这个属性，gtArray中每一个对象需有两个属性，start和end(不提供的情况，偏移与宽度将为0)，需为合法的时间字符串.例如```[{id:'test',gtArray:[{start:'2019-01-11 18:18:18',end:'2019-01-11 18:18:18'}]}] ``` 其他不做限制。 |

| timelines       |    ❌     |  array  |   --   | 显示标记时间，有特殊格式 ``` [{time:'2019-01-11 18:18:18',color:'#00000'}]```                                                                      |

| scrollToPostion |    ❌     | object  |   --   | 滚动到指定的位置 格式为``` {x:number,y:number}```  |

通过使用`vue`的`ref`来调用组件内部的方法，`params`中的`scrollToTime`和`scrollToPostion`可能会择机废弃，最好使用下方的方法替代。

| scrollToPostionHandle|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")

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

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

- 时间轴添加天的倍数的刻度支持

- 添加手机触摸支持 ([bug:#16](https://github.com/w1301625107/Vue-Gantt-chart/issues/16))

- 添加可配置可视范围外渲染行数

- 修复时间轴时间变化后不自动刷新的问题([bug:#22](https://github.com/w1301625107/Vue-Gantt-chart/issues/22))

- 修复甘特条显示判定条件，slot添加新的api:isAcrossRenderingTimeRange

- 修复甘特条长度超过可视范围时显示不正常的问题([bug:#7](https://github.com/w1301625107/Vue-Gantt-chart/issues/7))

- 修复打包文件错误，导致无法链接引入的问题

- 修复时间轴的日期数字在某些情况下撑开div，导致时间轴不准确的问题

- 修正滚动的触发和滚动范围限制的问题

- 为startTime，endTime，datas添加默认值

- 相比之前的自定义渲染，添加一个新的slot，支持自定义的定位和渲染，更加的灵活

- 修复当时间线宽度比渲染宽度小的情况下的部分白屏

- 修复数据刷新时不重新渲染的问题

- 修复滚动条长度计算问题导致的时间线部分被隐藏

- 修复cellheight,cellwidth 变动且不滚动时，渲染数据范围不正常的问题

- 修复滚动时向上滚动时会空白一行没有渲染的问题

- 修复左侧行名区数据过少时，无法盖住其底下标记线的问题

- 通过Resize Observer api来监听div的变化，用以修复感知不到容器大小变化引起的渲染数量不正常的问题

- 支持通过监听scrollLeft和scrollTop获取滚动值

- 修复页面中存在2个甘特图滚动错误的问题

- 修复没有start，end值可能引起的问题，当不存在start，end时偏移与宽度均为0值

- 修复一次滚动触发2次滚动事件的问题

- 修复scrollToPosition 无法设置0值是问题

- 支持自定义需要渲染的数组key

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

		@@ -323,2 +323,16 @@ <p align="center"><img src="https://raw.githubusercontent.com/w1301625107/vue-gantt-chart/master/screenshot/icon.png" alt="logo" width="180"></p>

		### markline 时间标记线slot
		```html
		<template v-slot:markLine="{markLineTime, getPosition}">
		<!-- 你的时间标记线组件 -->
		<TestMarkline :markLineTime="markLineTime" :getPosition="getPosition"></TestMarkline>
		</template>
		```

		`markLineTime` 为传人的`timelines`的每一个值

		`getPosition(day:string):number`
		计算当前时间的偏移值，参数为day,返回偏移值


		### title 标题slot
		@@ -493,2 +507,5 @@
		## Update
		1.6.0
		- 添加markline slot 支持

		1.5.2
		@@ -495,0 +512,0 @@ - 修复文档中的错误的默认值

Fixed alerts

Improved metrics