您的位置:

Echarts甘特图详解

一、Echarts甘特图

Echarts是一个基于Javascript的开源可视化库,支持多种图表类型,其中甘特图是一个常用的图表类型。甘特图可以直观展示项目进度、时间安排等信息。

下面是一个简单的甘特图示例:

    
        var data = [{
            name: '任务一',
            value: [new Date('2021/08/01'), new Date('2021/08/05')]
        }, {
            name: '任务二',
            value: [new Date('2021/08/06'), new Date('2021/08/10')]
        }]
        
        option = {
            title: {
                text: '甘特图示例'
            },
            tooltip: {},
            legend: {
                data: ['任务']
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: ['任务一', '任务二']
            },
            series: [{
                type: 'bar',
                name: '任务',
                stack: '甘特图',
                label: {
                    show: true,
                    position: 'insideLeft'
                },
                itemStyle: {
                    borderColor: 'white'
                },
                barWidth: 20,
                data: data.map(function (item) {
                    return {
                        name: item.name,
                        value: [item.value[0], item.value[1] - item.value[0]]
                    }
                }),
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
                    }
                }
            }]
        };
        
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    

以上代码中,x轴表示时间轴,y轴表示任务名称,柱形图表示任务所占用的时间段。图例为任务,对应的任务分别为任务一和任务二。

二、Echarts甘特图X轴动态

Echarts甘特图默认情况下X轴刻度是固定的,不能动态改变。但是,在实际开发中,我们经常需要动态根据时间范围调整X轴刻度。

下面给出一个动态改变X轴刻度的示例:

    
        var startTime = new Date('2021/08/01');
        var endTime = new Date('2021/08/10');

        var option = {
            title: {
                text: '动态刻度示例'
            },
            tooltip: {},
            legend: {
                data: ['任务']
            },
            xAxis: {
                type: 'time',
                min: startTime,
                max: endTime,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: ['任务一', '任务二']
            },
            series: [{
                type: 'bar',
                name: '任务',
                stack: '甘特图',
                label: {
                    show: true,
                    position: 'insideLeft'
                },
                itemStyle: {
                    borderColor: 'white'
                },
                barWidth: 20,
                data: [{
                    name: '任务一',
                    value: [new Date('2021/08/01'), new Date('2021/08/05')]
                }, {
                    name: '任务二',
                    value: [new Date('2021/08/06'), new Date('2021/08/10')]
                }],
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
                    }
                }
            }]
        };

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

        setInterval(function () {
            startTime.setDate(startTime.getDate() + 1);
            endTime.setDate(endTime.getDate() + 1);

            myChart.setOption({
                xAxis: {
                    min: startTime,
                    max: endTime
                }
            });
        }, 1000);
        
        myChart.setOption(option);        
    

以上代码中,我们通过setInterval函数模拟了每秒更新一次时间范围,并通过setOption方法动态改变X轴刻度,实现了动态变化的效果。

三、Echarts设置甘特图

Echarts甘特图支持多种设置,例如背景颜色、轴线样式、字体样式等。

下面给出一个设置甘特图的示例:

    
        option = {
            backgroundColor: '#F9FAFB',
            title: {
                text: 'Echarts甘特图设置',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data: ['任务']
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    lineStyle: {
                        type: 'dotted'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            },
            yAxis: {
                type: 'category',
                data: ['任务一', '任务二'],
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            },
            series: [{
                type: 'bar',
                name: '任务',
                stack: '甘特图',
                label: {
                    show: true,
                    position: 'insideLeft'
                },
                itemStyle: {
                    borderColor: 'white'
                },
                barWidth: 20,
                data: [{
                    name: '任务一',
                    value: [new Date('2021/08/01'), new Date('2021/08/05')]
                }, {
                    name: '任务二',
                    value: [new Date('2021/08/06'), new Date('2021/08/10')]
                }],
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
                    }
                }
            }]
        };
        
        var myChart = echarts.init(document.getElementById('main'));
        
        myChart.setOption(option);
    

以上代码中,我们给出了设置背景颜色、轴线样式、字体样式等内容的示例,可以根据需求自行调整。

四、Echarts图例

Echarts甘特图支持设置图例,用于表示每个数据的意义。

下面给出一个设置图例的示例:

    
        option = {
            title: {
                text: 'Echarts甘特图图例',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data: [{
                    name: '任务一',
                    icon: 'circle'
                }, {
                    name: '任务二',
                    icon: 'circle'
                }],
                orient: 'vertical',
                left: 'right'
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    lineStyle: {
                        type: 'dotted'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            },
            yAxis: {
                type: 'category',
                data: ['任务一', '任务二'],
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            },
            series: [{
                type: 'bar',
                name: '任务一',
                stack: '甘特图',
                label: {
                    show: true,
                    position: 'insideLeft'
                },
                itemStyle: {
                    borderColor: 'white'
                },
                barWidth: 20,
                data: [{
                    name: '任务一',
                    value: [new Date('2021/08/01'), new Date('2021/08/05')]
                }],
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
                    }
                }
            }, {
                type: 'bar',
                name: '任务二',
                stack: '甘特图',
                label: {
                    show: true,
                    position: 'insideLeft'
                },
                itemStyle: {
                    borderColor: 'white'
                },
                barWidth: 20,
                data: [{
                    name: '任务二',
                    value: [new Date('2021/08/06'), new Date('2021/08/10')]
                }],
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
                    }
                }
            }]
        };
        
        var myChart = echarts.init(document.getElementById('main'));
        
        myChart.setOption(option);
    

以上代码中,我们对图例进行了自定义设置,可以根据需求进行调整。

五、Echarts折线图

Echarts甘特图除了可以用柱形图来展示任务所占用的时间段,还可以用折线图展示任务进度情况。

下面给出一个Echarts折线图的示例:

    
        option = {
            title: {
                text: 'Echarts折线图示例',
                left: 'center'
            },
            legend: {
                data: ['任务一', '完成进度']
            },
            tooltip: {},
            xAxis: {
                type: 'time',
                splitLine: {
                    lineStyle: {
                        type: 'dotted'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            },
            yAxis: [{
                type: 'category',
                data: ['任务一'],
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            }, {
                type: 'value',
                name: '完成进度',
                position: 'right',
                axisLine: {
                    lineStyle: {
                        color: '#065279'
                    }
                },
                axisLabel: {
                    color: '#097054'
                }
            }],
            series: [{
                type: 'line',
                name: '任务一',
                data: [{
                    name: '任务一',
                    value: [new Date('2021/08/01'), new Date('2021/08/10')]
                }],
                lineStyle: {
                    color: '#eac736'
                },
                itemStyle: {
                    color: '#eac736'
                },
                areaStyle: {
                    color: '#FFFBE6'
                },
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
                    }
                }
            }, {
                type: 'line',
                name: '完成进度',
                data: [{
                    name: '完成进度',
                    value: [new Date('2021/08/01'), 0.2],
                    yAxisIndex: 1
                }, {
                    name: '完成进度',
                    value: [new Date('2021/08/05'), 0.6],
                    yAxisIndex: 1
                }, {
                    name: '完成进度',
                    value: [new Date('2021/08/10'), 1],
                    yAxisIndex: 1
                }],
                lineStyle: {
                    color: '#2c82c9'
                },
                itemStyle: {
                    color: '#2c82c9'
                },
                tooltip: {
                    formatter: '{b}
{a}: {c}' } }] }; var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option);

以上代码中,我们通过添加完成进度的y轴来展示折线图,同时给折线和区域添加了颜色,可以更加清晰直观地表示任务完成情况。

六、Echarts数据可视化

Echarts甘特图不仅支持展示静态图表,还支持动态展示数据的变化。

下面给出一个Echarts数据可视化的示例:

    
        option = {
            title: {
                text: 'Echarts数据可视化示例',
                left: 'center'
            },
            legend: {
                data: ['任务']
            },
            tooltip: {},
            xAxis: {
                type: 'time',
                splitLine: {
                    lineStyle: {
                        type: 'dotted'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#065279'