echarts系列——时刻表网格图

最新推荐文章于 2023-12-21 16:33:52 发布

原创最新推荐文章于 2023-12-21 16:33:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #时刻图 #网格图

本文介绍了一种事件走向网格图的实现方法，该图表以时间为X轴，事件或地点为Y轴，通过代码示例展示了如何创建并配置这种图表，包括自定义时间刻度和数据系列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上翻了好久，发现基本没人写关于事件走向的网格图（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']

		]
	}]
}

具体效果：