Echarts如何实现甘特图效果

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于生成各种图表，包括甘特图。要在 ECharts 中实现甘特图效果，你需要遵循以下步骤：

1. 引入 ECharts 库

首先，确保你已经在项目中引入了 ECharts 库。你可以从 ECharts 官网下载库文件，或者使用 CDN 链接。在你的 HTML 文件中添加以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 准备数据

甘特图需要以下数据：

• 任务列表：包含任务的名称、开始时间和结束时间。
• 资源列表：包含资源的名称和分配给的任务。

例如：

const tasks = [
  { name: '任务1', start: '2022-01-01', end: '2022-01-10' },
  { name: '任务2', start: '2022-01-05', end: '2022-01-15' },
  { name: '任务3', start: '2022-01-10', end: '2022-01-20' },
];

const resources = [
  { name: '资源1', tasks: ['任务1', '任务2'] },
  { name: '资源2', tasks: ['任务3'] },
];

3. 初始化 ECharts 实例

在你的 HTML 文件中添加一个用于渲染图表的 div 元素：

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

然后，在 JavaScript 文件中初始化 ECharts 实例：

const chartDom = document.getElementById('ganttChart');
const myChart = echarts.init(chartDom);

4. 配置 ECharts 选项

创建一个配置对象，用于定义甘特图的样式、数据和其他选项。例如：

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
  },
  yAxis: {
    type: 'category',
    data: resources.map((resource) => resource.name),
    inverse: true,
  },
  series: [
    {
      name: '任务',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        position: 'insideEnd',
        color: '#fff',
      },
      emphasis: {
        focus: 'series',
      },
      data: tasks.map((task) => ({
        name: task.name,
        value: [new Date(task.start).getTime(), new Date(task.end).getTime()],
        itemStyle: {
          color: getRandomColor(),
        },
      })),
    },
  ],
};

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

5. 设置配置并渲染图表

将配置对象设置到 ECharts 实例中，并渲染图表：

myChart.setOption(option);

现在，你应该可以在浏览器中看到一个简单的甘特图。你可以根据需要调整配置选项，以实现更复杂的效果和自定义样式。更多关于 ECharts 和甘特图的详细信息和示例，请参考 ECharts 官方文档：https://echarts.apache.org/zh/option.html#series-bar