echarts 机场航班甘特图
时间: 2023-11-12 08:59:37 浏览: 85
好的,您可以使用 echarts 的 Gantt Chart 组件来实现机场航班甘特图。您需要准备好数据,包括航班号、起降时间、航班状态等信息,并将其转化为 Gantt Chart 组件所需的格式。以下是一个简单的示例代码:
```javascript
option = {
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.start + ' - ' + params.end;
}
},
grid: {
top: 50,
bottom: 10,
left: 10,
right: 10
},
xAxis: {
min: new Date(2021, 8, 1),
max: new Date(2021, 8, 2),
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
data: ['航班1', '航班2', '航班3', '航班4', '航班5'],
inverse: true,
splitLine: {
show: false
}
},
series: [{
type: 'gantt',
data: [{
name: '航班1',
start: new Date(2021, 8, 1, 8, 0),
end: new Date(2021, 8, 1, 10, 0),
value: '起飞'
}, {
name: '航班2',
start: new Date(2021, 8, 1, 9, 0),
end: new Date(2021, 8, 1, 11, 0),
value: '起飞'
}, {
name: '航班3',
start: new Date(2021, 8, 1, 10, 0),
end: new Date(2021, 8, 1, 12, 0),
value: '降落'
}, {
name: '航班4',
start: new Date(2021, 8, 1, 11, 0),
end: new Date(2021, 8, 1, 13, 0),
value: '起飞'
}, {
name: '航班5',
start: new Date(2021, 8, 1, 12, 0),
end: new Date(2021, 8, 1, 14, 0),
value: '降落'
}],
itemStyle: {
color: '#00BFFF'
},
label: {
show: true,
position: 'insideLeft', formatter: function (params) {
return params.value;
}
}
}]
};
```
您可以根据实际需求修改代码中的数据和样式,以达到您想要的效果。