echarts有甘特图吗
时间: 2024-01-26 21:12:39 浏览: 77
echarts 甘特图,tooltip 轮播
是的,Echarts提供了甘特图的功能。甘特图是一种项目进度管理图表,可以清晰地展示项目的进度和时间安排。以下是一个简单的甘特图实现示例:
```javascript
option = {
title: {
text: '项目进度甘特图'
},
tooltip: {
formatter: function (params) {
var res = params.name + '<br/>' + params.seriesName;
res += ':' + params.value[0] + ' - ' + params.value[1] + '<br/>';
res += '耗时:' + (params.value[1] - params.value[0]) + '天';
return res;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['任务1', '任务2', '任务3', '任务4', '任务5']
},
series: [
{
name: '任务进度',
type: 'custom',
renderItem: function (params, api) {
var yValue = api.value(1);
var start = api.coord([api.value(0), yValue]);
var end = api.coord([api.value(1), yValue]);
var height = api.size([0, 1])[1] * 0.6;
return {
type: 'rect',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style({
stroke: '#555',
width: 1
})
};
},
data: [
[new Date(2021, 8, 1), new Date(2021, 8, 5)],
[new Date(2021, 8, 6), new Date(2021, 8, 10)],
[new Date(2021, 8, 11), new Date(2021, 8, 15)],
[new Date(2021, 8, 16), new Date(2021, 8, 20)],
[new Date(2021, 8, 21), new Date(2021, 8, 25)]
]
}
]
};
```
以上代码实现了一个简单的项目进度甘特图,其中x轴表示时间,y轴表示任务,每个任务用一个矩形表示,矩形的长度表示任务的耗时。当鼠标悬停在矩形上时,会显示任务的详细信息。
阅读全文