[示例] 类甘特图的时间线图表
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/54bfcd25ae174e05993ea8ebb4bc8a48.png)
const data = [
{ name: '预备阶段', start: 0, end: 2 },
{ name: '战略展开', start: 2, end: 4 },
{ name: '指挥所启动', start: 4, end: 6 },
{ name: '电子对抗准备', start: 5.5, end: 7 },
{ name: '首轮导弹发射', start: 7, end: 8.5 },
{ name: '电子对抗演练', start: 8.5, end: 12 },
{ name: '后勤补给', start: 12, end: 14 },
{ name: '机动转移', start: 14, end: 16 },
{ name: '联合作战协同', start: 16, end: 18 },
{ name: '精确打击演练', start: 18, end: 20 },
{ name: '夜间作战', start: 20, end: 22 },
{ name: '战场侦察', start: 22, end: 23 },
{ name: '演习总结', start: 23, end: 24 }
];
const hours = 24;
const getHourText = (t) => {
const t1 = Math.floor(t);
if (t1 === t) {
return t + ':00';
} else {
const t2 = t - t1;
const t3 = t2 * 60;
if (t3 >= 10) {
return t1 + ':' + t3;
} else {
return t1 + ':0' + t3;
}
}
};
option = {
tooltip: {
formatter: (params) => {
return (
params.marker +
params.name +
': ' +
getHourText(params.value[1]) +
' - ' +
getHourText(params.value[2])
);
}
},
grid: {
top: 5,
bottom: 20,
left: 20,
right: 20
},
xAxis: {
type: 'value',
interval: 2,
minInterval: 2,
max: hours,
axisLabel: {
formatter: (val) => val + ':00'
}
},
yAxis: {
type: 'category',
data: data.map((item) => item.name),
inverse: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
series: [
{
type: 'custom',
renderItem: (params, api) => {
const categoryIndex = api.value(0);
const start = api.coord([api.value(1), categoryIndex]);
const end = api.coord([api.value(2), categoryIndex]);
const height = api.size([0, 1])[1] * 0.6;
const rect = {
type: 'rect',
shape: {
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
style: api.style({
fill: '#448aff'
}),
emphasis: {
style: {
fill: '#409EFF'
}
}
};
const text = {
type: 'text',
style: {
text: api.value(3),
textAlign: 'center',
textVerticalAlign: 'middle',
fontSize: 12,
fill: '#0c2c63',
fontWeight: 'bold'
},
position: [(start[0] + end[0]) / 2, start[1] + height - 2]
};
return {
type: 'group',
children: [rect, text]
};
},
encode: {
x: [1, 2],
y: 0
},
data: data.map((item, index) => [index, item.start, item.end, item.name])
}
]
};