echarts甘特图的代码

ECharts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型和交互功能。其中，甘特图（Gantt Chart）是 ECharts 中的一种图表类型，用于展示项目的进度和时间安排。

以下是一个简单的 ECharts 甘特图的代码示例：

// 引入 ECharts
import echarts from 'echarts';

// 初始化图表实例
const chart = echarts.init(document.getElementById('chart'));

// 配置项
const option = {
  tooltip: {
    formatter: function (params) {
      return params.marker + params.data.name + ': ' + params.data.start + ' ~ ' + params.data.end;
    }
  },
  grid: {
    top: '10%',
    left: '10%',
    right: '10%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: ['Task 1', 'Task 2', 'Task 3']
  },
  series: [{
    type: 'custom',
    renderItem: function (params, api) {
      var categoryIndex = api.value(1);
      var start = api.coord([api.value(2), categoryIndex]);
      var end = api.coord([api.value(3), categoryIndex]);
      var height = api.size([0, 1])[1] * 0.6;

      return {
        type: 'rect',
        shape: echarts.graphic.clipRectByRect({
          x: start[0],
          y: start[1] - height / 2,
          width: end[0] - start[0],
          height: height
        }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        }),
        style: api.style()
      };
    },
    encode: {
      x: [2, 3],
      y: 1
    },
    data: [
      ['Task 1', 0, new Date('2022-01-01'), new Date('2022-01-10')],
      ['Task 2', 1, new Date('2022-01-05'), new Date('2022-01-15')],
      ['Task 3', 2, new Date('2022-01-10'), new Date('2022-01-20')]
    ]
  }]
};

// 使用配置项显示图表
chart.setOption(option);

以上代码实现了一个简单的 ECharts 甘特图，其中包括了图表的初始化、配置项的设置和数据的绑定。你可以根据自己的需求进行修改和扩展。