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甘特图的配置项主要有以下几个：
grid：图表的边距和大小设置xAxis：时间轴相关的配置项yAxis：y轴相关的配置项series：系列相关的配置项tooltip：提示框相关的配置项
以下是一个典型的配置项示例：
var option = {
tooltip: {
...
},
grid: {
...
},
xAxis: {
...
},
yAxis: {
...
},
series: [{
type: 'gantt',
...
}]
};
其中，tooltip代表提示框配置项，可以设置提示框的格式、触发方式等；grid代表图表的边距和大小设置；xAxis代表时间轴相关的配置项，可以设置时间轴的类型、刻度间隔等；yAxis代表y轴相关的配置项，可以设置y轴的内容、轴线样式等；series代表系列相关的配置项，其中可以设置甘特图的数据、样式等。
四、样式美化
Echarts甘特图的样式可以通过对图表中各个元素的设置进行自定义。主要有以下几个方面：
- 标题：通过设置
title属性实现 - 时间轴：通过设置
xAxis属性实现 - 任务进度：通过设置
barStyle属性实现 - 任务标签：通过设置
label属性实现 - 工具栏：通过设置
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属性实现了任务标签的显示和位置。
五、实例示例
最后，我们来看一个完整的实例示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts甘特图实例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height: 600px;"></div>
<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>
</body>
</html>
