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>