无代码三步完成秒级精度的甘特图！Echarts达人为你详解

2023-10-13 14:29:18

前言

甘特图是一种常用的项目管理工具，可以直观地展示项目任务的进度和时间安排。传统甘特图往往以天或周为时间单位，无法满足一些需要更精细时间管理的需求。今天，我们将结合Echarts实现秒级精度的甘特图，帮助你更加精准地管理任务和时间。

一、创建Echarts实例

首先，我们需要创建一个Echarts实例。你可以通过以下代码在页面中创建Echarts实例：

<div id="myChart"></div>

然后，在JavaScript中使用Echarts的API来创建图表。

var myChart = echarts.init(document.getElementById('myChart'));

二、配置图表选项

接下来，我们需要配置图表选项。Echarts提供了丰富的图表选项，我们可以根据需要进行配置。

var option = {
  title: {
    text: '甘特图'
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'category',
    data: ['任务1', '任务2', '任务3']
  },
  series: [{
    type: 'bar',
    data: [
      [new Date('2023-03-08 10:00:00'), new Date('2023-03-08 12:00:00')],
      [new Date('2023-03-09 14:00:00'), new Date('2023-03-09 16:00:00')],
      [new Date('2023-03-10 18:00:00'), new Date('2023-03-10 20:00:00')]
    ]
  }]
};

三、渲染图表

最后，我们需要将图表渲染到页面中。

myChart.setOption(option);

四、实现秒级精度

为了实现秒级精度，我们需要对Echarts的xAxis和series进行一些特殊的配置。

xAxis: {
  type: 'time',
  min: new Date('2023-03-08 10:00:00'),
  max: new Date('2023-03-10 20:00:00'),
  interval: 1000
},
series: [{
  type: 'bar',
  barWidth: 10,
  data: [
    [new Date('2023-03-08 10:00:00'), new Date('2023-03-08 12:00:00')],
    [new Date('2023-03-09 14:00:00'), new Date('2023-03-09 16:00:00')],
    [new Date('2023-03-10 18:00:00'), new Date('2023-03-10 20:00:00')]
  ]
}]