echarts的甘特图代码

ECharts 是一个基于 JavaScript 的开源可视化库，用于构建交互式的数据可视化图表。甘特图是 ECharts 中的一种图表类型，用于展示项目的进度和时间安排。

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

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

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

// 配置图表参数
var option = {
  tooltip: {
    formatter: function (params) {
      var task = params.data;
      return task.name + '<br>'
        + '开始时间：' + task.startTime + '<br>'
        + '结束时间：' + task.endTime;
    }
  },
  grid: {
    left: '3%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: ['任务1', '任务2', '任务3']
  },
  series: [{
    type: 'bar',
    data: [
      {
        name: '任务1',
        startTime: '2022-01-01',
        endTime: '2022-01-05'
      },
      {
        name: '任务2',
        startTime: '2022-01-06',
        endTime: '2022-01-10'
      },
      {
        name: '任务3',
        startTime: '2022-01-11',
        endTime: '2022-01-15'
      }
    ],
    itemStyle: {
      color: '#61a0a8'
    }
  }]
};

// 渲染图表
myChart.setOption(option);

以上代码中，我们首先引入了 ECharts 库，然后通过 `echarts.init` 方法初始化了一个图表实例，并指定了要渲染的 DOM 元素。接着，我们配置了图表的参数，包括提示框、坐标轴、数据等。最后，通过 `myChart.setOption` 方法将配置应用到图表中，完成了甘特图的绘制。