效果预览

简介

react 甘特图组件，支持子任务，背景色可配置，状态可配置

使用

# 下载依赖
npm install -S react-gant

# 引用使用
import gant from 'react-gant';

# 使用
<gant data={[]}></gant>

文档

属性

Name	Type	Description
data	Array	数据源，详细结构见下
year	Number	年
month	Number	月
emptyText	String	没有数据时的现显示文案
showTodaylable	Boolean	是否显示【今天】的标识
legend	Object	图例的配置，详细见下
nowTimeLine	Object	是否显示当前时间线，详细见下
stateMap	Object	数据状态显示的背景色和label配置，详细见下
mode	String	视图展示样式，2种， 常规(normal)｜紧凑(compact)，效果可见下子属性描述
order	Object	传入的data数据是否按照startTime排序，详细见下

子属性 legend

甘特图上方，图例显示设置

Name	Type	Description
show	Boolean	是否显示
position	String	位置：left｜right，默认left

子属性 nowTimeLine

显示竖红线，显示当前时间时分，默认一分钟更新一次

Name	Type	Description
show	Boolean	是否显示
duration	Number	更新时间，毫秒，不可小于60000ms，默认60000

子属性 stateMap

对象类型，配置数据在视图显示背景色，目前支持6种状态，1个子任务，具体见下DOME

state	backgroundColor default	label default
waiting	#C6D57E	等待
primary	#A2D2FF	正常
success	#61B15A	成功
warning	#FFC93C	警告
error	#FA1E0E	异常
closed	#DDDDDD	关闭
subTask	#7868e6	子任务

子属性 order

传入的data数据是否按照 startTime 排序设置，安排 startTime从小到大排序后的数据，在【紧凑】模式下，效果更好。内部排序需要时间和性能，酌情配置。

Name	Type	Description
well	Boolean	true｜false，源数据是否已经为有序。已有序，内部不在做排序处理，节省性能
need	Boolean	true｜false，是否需要内部排序处理。well配置为 false 时才有效，即：源数据本无序，是否需要做排序处理

子属性 mode

常规模式示意图

紧凑模式示意图（能一行显示的，就合并为一行显示）

事件

Name	Type	Description	Params
onTaskClick	Function	任务被点击	当前任务的详细数据
onTaskItemClick	Function	子任务被点击	当前子任务的详细数据

核心属性 data

满足下面数据结构即可正确展示，注意每条任务数据 id 为必须的，作为 react 的 key 使用

[{
    title: "张三", // 每条数据展示于左侧的内容
    id: "x-1",    // 每条数据唯一的标识
    tasks: [      // 任务列表
      {
        title: "单向数据流和数据双向绑定的区别还有各自的优缺点", // 任务的概述
        startTime: 1635696000000, // 任务开始时间
        endTime: 1636559999000,   // 任务结束时间 
        id: "x-sub-2",            // 每条任务的唯一标识
        state: 'success',         // 任务的状态，5个，具体见文档
      },
      {
        title: "单向数据流和数据双向绑定的区别还有各自的优缺点",
        startTime: 1635696000000,
        endTime: 1636559999000,
        id: "x-sub-3",
        state: 'primary',
        subTasks: [              // 主任务下的子任务内容
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了，其次就是，后台管理这个东西，来来去去就是那么几个东西，查询，Form表单，Table表格，弹窗之类的一些东西，加上一个增删改查的一些逻辑，反正我呆过两家公司的后管都是这些，我猜大伙家的后管也不离其中吧。做久了这类东西，就感觉写代码没什么意思，复制黏贴，复制黏贴，一开始太开心的，做着做着，就开始迷茫了",
            startTime: 1635696000000,
            endTime: 1635955199000,
            id: "0subc-1",
          },
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了，其次就是，后台管理这个东西，来来去去就是那么几个东西，查询，Form表单，Table表格，弹窗之类的一些东西，加上一个增删改查的一些逻辑，反正我呆过两家公司的后管都是这些，我猜大伙家的后管也不离其中吧。做久了这类东西，就感觉写代码没什么意思，复制黏贴，复制黏贴，一开始太开心的，做着做着，就开始迷茫了",
            startTime: 1635955199000,
            endTime: 1636127999000,
            id: "0subc-2",
          },
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了，其次就是，后台管理这个东西，来来去去就是那么几个东西，查询，Form表单，Table表格，弹窗之类的一些东西，加上一个增删改查的一些逻辑，反正我呆过两家公司的后管都是这些，我猜大伙家的后管也不离其中吧。做久了这类东西，就感觉写代码没什么意思，复制黏贴，复制黏贴，一开始太开心的，做着做着，就开始迷茫了",
            startTime: 1636127999000,
            endTime: 1636559999000,
            id: "0subc-3",
          },
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了，其次就是，后台管理这个东西，来来去去就是那么几个东西，查询，Form表单，Table表格，弹窗之类的一些东西，加上一个增删改查的一些逻辑，反正我呆过两家公司的后管都是这些，我猜大伙家的后管也不离其中吧。做久了这类东西，就感觉写代码没什么意思，复制黏贴，复制黏贴，一开始太开心的，做着做着，就开始迷茫了",
            startTime: 1636127999000,
            endTime: 1636559999000,
            id: "0subc-4",
          },
        ],
      },  
    ]
  }]

DOME

import Gant from "gant";

const __STATEMAP = {
  waiting: {
    bgColor: '#C6D57E',
    label: '等待'
  },
  primary: {
    bgColor: '#A2D2FF',
    label: '正常'
  },
  success: {
    bgColor: '#61B15A',
    label: '成功'
  },
  warning: {
    bgColor: '#FFC93C',
    label: '警告'
  },
  error: {
    bgColor: '#FA1E0E',
    label: '异常'
  },
  closed: {
    bgColor: '#DDDDDD',
    label: '关闭'
  },
  subTask: {
    bgColor: '#7868e6',
    label: '子任务'
  },
};


const App = () => {

  return (
    <div style={{ height: "600px" }}>

      <Gant
        data={data} // 自行按照上述文档定义并传入
        year={2021}
        month={11}
        emptyText="没有数据啦..."
        onTaskClick={(data) => {
          console.log('任务被点击：', data);
        }}
        onTaskItemClick={(data) => {
          console.log('子任务被点击：', data);
        }}
        legend={{
          show: true,
          position: 'left'
        }}
        showTodaylable={true}
        nowTimeLine={{
          show: true,
          duration: 60000
        }}
        stateMap={__STATEMAP}
      ></Gant>
      
    </div>
  );
};

export default App;