@fish-render/gantt

Vue 3 gantt 组件，提供现代化的用户界面体验。

安装

npm install @fish-render/gantt
# 或
yarn add @fish-render/gantt
# 或
pnpm add @fish-render/gantt

使用方法

方式一：自动引入样式（推荐）

当你引入组件时，样式会自动加载：

<template>
  <Gantt>
    <!-- 组件内容 -->
  </Gantt>
</template>

<script setup>
import { Gantt } from '@fish-render/gantt'
// 样式会自动加载，无需额外引入
</script>

方式二：手动引入样式

如果你想要手动控制样式的引入时机：

<template>
  <Gantt>
    <!-- 组件内容 -->
  </Gantt>
</template>

<script setup>
import { Gantt } from '@fish-render/gantt'
</script>

<style lang="scss">
/* 手动引入样式（SCSS） */
@import '@fish-render/gantt/styles';
</style>

方式三：在 main.js 中全局引入

import { createApp } from 'vue'
import App from './App.vue'
import { Gantt } from '@fish-render/gantt'
import '@fish-render/gantt/styles'

const app = createApp(App)

app.component('Gantt', Gantt)

app.mount('#app')

方式四：使用插件方式

import { createApp } from 'vue'
import App from './App.vue'
import GanttPlugin from '@fish-render/gantt'

const app = createApp(App)
app.use(GanttPlugin)
app.mount('#app')

示例

基础用法

<template>
  <Gantt>
    <!-- 组件内容 -->
  </Gantt>
</template>

Gantt

甘特图组件。

基本用法

<Gantt :tasks="tasks" view="hour" :unitWidth="80" :rowHeight="32" :barHeightRatio="0.7" :height="360" />

Props

• tasks: Task[] 任务数据
• groups?: Group[] 分组数据（可选）
• groupField?: string | ((task: Task) => string | number) 分组字段或函数
• start?: Date | number 开始时间（不传则从任务中推断）
• end?: Date | number 结束时间（不传则从任务中推断）
• view?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year' 视图类型，默认 hour
• scale?: number 缩放比例，默认 1
• viewConfig?: { unitWidth?: { hour?: number }, minTickInterval?: { hour?: string | number } } 视图配置
• unitWidth?: number 单位宽度（优先级高于 viewConfig.unitWidth.hour）
• minTickInterval?: string | number 最小刻度间隔（优先级高于 viewConfig.minTickInterval.hour）
• tickFormat?: (date: Date, view: string) => string 刻度文本格式化
• rowHeight?: number 行高，默认 32
• barHeightRatio?: number 任务条高度比例，默认 0.7
• height?: string | number 组件高度（例如 360 或 '360px'）。若不设置，则使用默认高度并可通过 style 覆盖。
• class?: string 额外类名
• style?: Record<string, string | number> 行内样式

说明

• 当设置了 height 时，组件会将其应用到根容器上，并保持内部 header 置顶、viewport 可滚动。
• 网格与表头均为 Canvas 绘制，纵向滚动由容器控制。

类型定义

// Gantt 组件 Props
interface GanttProps {
  // 组件属性类型定义
}

样式自定义

组件使用 CSS 类名，你可以通过覆盖这些类名来自定义样式：

/* gantt 组件样式 */
.fish-gantt {
  /* 自定义组件样式 */
}

注意事项

1. 浏览器兼容性：组件使用了现代 CSS 特性，确保在现代浏览器中使用
2. 样式加载：样式是全局的，会在应用启动时自动加载
3. Tree Shaking：如果你使用 Tree Shaking，建议使用手动引入样式的方式
4. TypeScript 支持：组件完全支持 TypeScript，提供完整的类型定义

许可证

MIT License