echarts简易版甘特图

要制作 echarts 简易版甘特图，你需要使用 echarts 的柱状图（bar）和线图（line）组合来实现。甘特图的横轴表示时间轴，纵轴表示任务或者进度。以下是一个简单的示例代码：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {
        formatter: '{b}'
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        data: ['任务1', '任务2', '任务3', '任务4']
    },
    series: [
        {
            name: '任务进度',
            type: 'line',
            data: [
                {
                    name: '任务1',
                    value: [new Date('2021/01/01'), new Date('2021/01/15')]
                },
                {
                    name: '任务2',
                    value: [new Date('2021/02/01'), new Date('2021/02/15')]
                },
                {
                    name: '任务3',
                    value: [new Date('2021/03/01'), new Date('2021/03/15')]
                },
                {
                    name: '任务4',
                    value: [new Date('2021/04/01'), new Date('2021/04/15')]
                }
            ]
        },
        {
            name: '任务时间',
            type: 'bar',
            data: [
                {
                    name: '任务1',
                    value: [new Date('2021/01/01'), new Date('2021/01/15')]
                },
                {
                    name: '任务2',
                    value: [new Date('2021/02/01'), new Date('2021/02/15')]
                },
                {
                    name: '任务3',
                    value: [new Date('2021/03/01'), new Date('2021/03/15')]
                },
                {
                    name: '任务4',
                    value: [new Date('2021/04/01'), new Date('2021/04/15')]
                }
            ],
            itemStyle: {
                normal: {
                    color: '#2f4554'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在上面的代码中，我们首先创建了一个 echarts 实例，然后定义了一个 option 对象，该对象包含了图表的配置项和数据。该示例使用了 echarts 的时间轴（type: 'time'）作为横轴，yAxis 中的 data 属性用于定义任务名称。其中，series 中的第一个是线图（type: 'line'），用于表示任务的进度，第二个是柱状图（type: 'bar'），用于表示任务的时间轴。以上代码就可以实现一个简易版的甘特图。