react 使用highcharts 甘特图的demo代码

下面是一个使用 React 和 Highcharts 的甘特图的示例代码：

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import HighchartsGantt from 'highcharts/modules/gantt';
import HighchartsMore from 'highcharts/highcharts-more';
import moment from 'moment';

// 初始化 Highcharts 模块
HighchartsGantt(Highcharts);
HighchartsMore(Highcharts);

class GanttChart extends Component {
  componentDidMount() {
    // 初始化 Highcharts Gantt 图表
    this.chart = Highcharts.ganttChart(this.container, {
      title: {
        text: '甘特图'
      },
      xAxis: {
        currentDateIndicator: true,
        min: moment().startOf('day').valueOf(),
        max: moment().add(2, 'weeks').startOf('day').valueOf()
      },
      yAxis: {
        uniqueNames: true
      },
      series: [{
        name: '项目',
        data: [{
          name: '任务1',
          start: Date.UTC(2021, 4, 1),
          end: Date.UTC(2021, 4, 7),
          completed: 0.25
        }, {
          name: '任务2',
          start: Date.UTC(2021, 4, 8),
          end: Date.UTC(2021, 4, 14),
          completed: 0
        }]
      }]
    });
  }

  componentWillUnmount() {
    // 销毁 Highcharts 图表实例
    this.chart.destroy();
  }

  render() {
    return (
      <div ref={el => this.container = el}></div>
    );
  }
}

export default GanttChart;

在这个示例中，我们首先导入了 React、Highcharts 和 moment 库，然后初始化了 Highcharts Gantt 图表实例，并且使用 `componentDidMount` 生命周期钩子函数将图表挂载到 DOM 上。在 `componentWillUnmount` 生命周期钩子函数中，我们将 Highcharts 图表实例销毁以释放资源。

最后，我们在 `render` 函数中返回一个 `div` 元素，用于渲染 Highcharts Gantt 图表的容器。您可以根据自己的需求更改配置和数据，以适配您的项目。