您的位置:

Echarts甘特图实例教程详解

Echarts是一个基于Javascript的图表库,具有简单易用、灵活、兼容性好等特点,在数据可视化方面广泛应用。其中,Echarts甘特图是一种基于时间轴展示任务进度情况的图表类型,它可以清晰地展示任务的时间安排、任务进度以及任务间的依赖关系。本文将从常用的图表类型、数据格式、配置项、样式美化等方面对Echarts甘特图进行一一详解。

一、图表类型

在Echarts中,甘特图是一个单独的图表类型,可以通过设置“type”属性来进行指定,具体代码如下:
var option = {
    ...
    series: [{
        type: 'gantt',
        ...
    }]
};
通过指定“type: 'gantt'”,就可以将图表类型设置为甘特图。

二、数据格式

Echarts甘特图的数据格式是一个对象数组,其中每个对象代表一个任务。每个任务对象包含以下属性: - name:任务名称 - value:任务开始时间和结束时间 - label:任务标签 - children:子任务列表 其中,value属性是一个数组,包含起始时间和结束时间两个值。而children属性是一个子任务列表,包含与父任务同样的属性。下面是一个示例数据:
var data = [
    {
        name: '任务1',
        value: [
            '2022-01-01',
            '2022-02-01'
        ],
        label: {
            normal: {
                show: true,
                position: 'inside'
            }
        },
        children: [
            {
                name: '子任务1',
                value: [
                    '2022-01-01',
                    '2022-01-15'
                ],
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                }
            },
            {
                name: '子任务2',
                value: [
                    '2022-01-15',
                    '2022-02-01'
                ],
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                }
            }
        ]
    },
    {
        name: '任务2',
        value: [
            '2022-02-01',
            '2022-03-01'
        ]
    }
];
上述代码中,包含了两个任务以及包含子任务的“任务1”。其中,name属性代表任务名称;value属性代表任务起始时间和结束时间;label属性代表任务标签,设置了标签的位置和显示状态;children属性代表包含了子任务列表。

三、配置项

Echarts甘特图的配置项主要有以下几个: 1. grid:图表的边距和大小设置 2. xAxis:时间轴相关的配置项 3. yAxis:y轴相关的配置项 4. series:系列相关的配置项 5. tooltip:提示框相关的配置项 以下是一个典型的配置项示例:
var option = {
    tooltip: {
        ...
    },
    grid: {
        ...
    },
    xAxis: {
        ...
    },
    yAxis: {
        ...
    },
    series: [{
        type: 'gantt',
        ...
    }]
};
其中,tooltip代表提示框配置项,可以设置提示框的格式、触发方式等;grid代表图表的边距和大小设置;xAxis代表时间轴相关的配置项,可以设置时间轴的类型、刻度间隔等;yAxis代表y轴相关的配置项,可以设置y轴的内容、轴线样式等;series代表系列相关的配置项,其中可以设置甘特图的数据、样式等。

四、样式美化

Echarts甘特图的样式可以通过对图表中各个元素的设置进行自定义。主要有以下几个方面: 1. 标题:通过设置title属性实现 2. 时间轴:通过设置xAxis属性实现 3. 任务进度:通过设置barStyle属性实现 4. 任务标签:通过设置label属性实现 5. 工具栏:通过设置toolbox属性实现 以下是一些常用的样式设置示例:
var option = {
    title: {
        text: '任务进度甘特图'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    tooltip: {
        ...
    },
    grid: {
        ...
    },
    xAxis: {
        ...
    },
    yAxis: {
        ...
    },
    series: [{
        type: 'gantt',
        itemStyle: {
            color: '#3CB371'
        },
        barStyle: {
            borderColor: '#3CB371',
            borderWidth: 1
        },
        label: {
            show: true,
            position: 'right'
        },
        ...
    }]
};
上述代码中,通过设置title属性实现了图表的标题;通过设置toolbox属性实现了工具栏,其中包含了保存为图片的功能;通过设置itemStyle和barStyle属性实现了甘特图的颜色和边框;通过设置label属性实现了任务标签的显示和位置。

五、实例示例

最后,我们来看一个完整的实例示例代码:


    
  
    Echarts甘特图实例
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>


    
  
<script> var myChart = echarts.init(document.getElementById('main')); var data = [ { name: '任务1', value: [ '2022-01-01', '2022-02-01' ], label: { normal: { show: true, position: 'inside' } }, children: [ { name: '子任务1', value: [ '2022-01-01', '2022-01-15' ], label: { normal: { show: true, position: 'inside' } } }, { name: '子任务2', value: [ '2022-01-15', '2022-02-01' ], label: { normal: { show: true, position: 'inside' } } } ] }, { name: '任务2', value: [ '2022-02-01', '2022-03-01' ] } ]; var option = { title: { text: '任务进度甘特图' }, toolbox: { feature: { saveAsImage: {} } }, tooltip: { trigger: 'item', formatter: function (params) { var res = params.name + '<br/>' + params.value[0] + ' ~ ' + params.value[1]; return res; } }, grid: { left: '10%', height: '80%' }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'category', data: ['任务1', '任务2'] }, series: [ { type: 'gantt', itemStyle: { color: '#3CB371' }, barWidth: 20, barGap: 20, label: { show: true, position: 'right' }, data: data } ] }; myChart.setOption(option); </script>