echarts系列——时刻表网格图

网上翻了好久，发现基本没人写关于事件走向的网格图（x轴为时间，y轴为事件或地点），于是自己实现了一个，下面给出一个简版

不说废话直接上代码，getAllDayTime传入0≤x≤y≤23的数，x轴可有以分钟为刻度

function getAllDayTime(x, y) {
	var time = [];
	for(var i = x; i < y; i++) {
		var hour = i;
		if(hour < 10) hour = '0' + i;
		for(var j = 0; j < 60; j++) {
			var min = j;
			if(min < 10) min = '0' + j;
			time.push(hour + ':' + min)
		}
	}
	return time;
}
option = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross'
		},
		formatter: function(value) {
			return '驾驶员：' + value[0].data[2] + "<br/>乘务员：" + value[0].data[3]
		}
	},
	grid: {
		left: 130
	},
	xAxis: {
		data: getAllDayTime(6, 24)
	},
	yAxis: {
		data: ['0站', '1站']
 
	},
	series: [{
		type: 'line',
		data: [
			['08:00', '0站', '驾驶1', '乘务1'],
			['09:00', '1站', '驾驶1', '乘务1'],
 
		]
	}, {
		type: 'line',
		data: [
			['09:00', '0站', '驾驶2', '乘务2'],
			['10:00', '1站', '驾驶2', '乘务2']
 
		]
	}]
}复制代码

具体效果：

转载于:https://juejin.im/post/5b398eb66fb9a00e973c606f