echarts的甘特图

ECharts是一个非常流行的JavaScript图表库，它提供了丰富的可视化组件，包括甘特图（Gantt chart）。甘特图是一种条形图，常用于项目管理中展示任务的时间线和进度。在ECharts中创建甘特图，你可以按照以下步骤操作：

1. 引入ECharts库和甘特图模块：首先需要在HTML文件中引入ECharts库及其甘特图插件。

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/plugin/gantt.min.js"></script>

2. 创建画布：在HTML中添加一个用于显示图表的`<div>`元素，并设置其宽度和高度。

<div id="ganttChart" style="width: 800px; height: 600px;"></div>

3. 初始化图表并配置甘特图数据：在JavaScript中，通过实例化ECharts对象并配置甘特图的数据结构、任务时间线等属性。

var option = {
  title: {
    text: '甘特图示例'
  },
  gantt: {
    data: [
      { name: '任务A', start: '2023-01-01', end: '2023-01-15', progress: 70 },
      { name: '任务B', start: '2023-01-16', end: '2023-01-31', progress: 50 }
    ],
    // 可以配置更多选项，如任务间的依赖、连线颜色等
  }
};

var chart = echarts.init(document.getElementById('ganttChart'));
chart.setOption(option);

4. 显示图表：最后，调用`setOption`方法将配置应用到图表上，甘特图就会显示出来了。