封装横向时间轴包含4种状态

lxt410725 2017-02-06 11:20:42

横向柱状图间隔为5分钟后台传过来时间点 0-24点没有到的时间是白色的运行中为绿色紧停为红色空闲为红色离线为灰色怎么写啊求助？？？？

...全文

297 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

lxt410725 2017-02-07

打赏
举报

引用 1 楼 bbboy8205 的回复:

css + js 一起来完成要看你返回的数据格式再结合样式写这个横向柱状图

qq:1158147215 我还想再问问您

lxt410725 2017-02-07

打赏
举报

1158147215我的qq 我想跟您聊聊还会不太会写啊

风中的少年 2017-02-07

打赏
举报

给你模拟一个吧。


<html>
	<head>
		<style>
			.bk {
				width: 20px;
				height: 20px;
				display: inline-block;
				border:1px solid #888
			}
			.line {
				margin-bottom: 5px;
			}
			.bg-red {
				background: red
			}
			.bg-gray {
				background: gray
			}
			.bg-green {
				background: green
			}
		</style>
	</head>
	<body>
	
		<div id="main" style="width: 900px;height:400px;"></div>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
		<script type="text/javascript">
			var state = [{code:1, text:'没有到的时间', color: 'bg-red'},{code:2, text:'运行中', color: 'bg-green'},,{code:4, text:'离线', color: 'bg-gray'}]
			var data = [
			{
				day: 0,
				time: [
				{t : 0,s : 1},
				{t : 1,s : 1},
				{t : 2,s : 2},
				{t : 3,s : 2},
				{t : 4,s : 2},
				{t : 5,s : 2},
				{t : 6,s : 2},
				{t : 7,s : 2},
				{t : 8,s : 2},
				{t : 9,s : 4},
				{t : 10,s : 2},
				{t : 11,s : 2},
				{t : 12,s : 2},
				{t : 13,s : 4},
				{t : 14,s : 2},
				{t : 15,s : 2},
				{t : 16,s : 2},
				{t : 17,s : 1},
				{t : 18,s : 2},
				{t : 19,s : 2},
				{t : 20,s : 2},
				{t : 21,s : 2},
				{t : 22,s : 2},
				{t : 23,s : 2},
				
				]
			},
			{
				day: 1,
				time: [
				{
					t : 0,
					s : 2,
				},
				{
					t : 1,
					s : 1,
				},
				{
					t : 2,
					s : 1,
				}
				]
			}
				
			]
			
			for (var j in data) {
				// 日期
				var times = data[j].time
				var $oDiv = $('<div class="line"><label>'+ data[j].day +' : </label></div>');
				for (var t in times) {
					var st = times[t].s;
					for (var s in state){
						if (state[s].code == st) {
							var $child = $('<span class="bk '+state[s].color+'" title="'+state[s].text+'"></span>');
							$child.appendTo($oDiv)
						}
					}
				}
				$oDiv.appendTo($('#main'))
			}
		</script>
	</body>
</html>

风中的少年 2017-02-06