Echarts 设备状态 甘特图

在做工厂智能化生产看板时，绝对会有设备状态看板，展示设备当天或者当前状态，设备状态数据一般是有mes 系统设备管理模块对设备信息进行采集，一般包括过站数据，设备当前状态，是否在线是否故障、检修、待生产、正常运行等
那么前端看板用什么展示设备当天所有状态，以及状态持续的时长，设备当天的运行记录

实现效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
    <script type="text/javascript" src="jquery.min.js" asp-append-version="true"></script>
    <script type="text/javascript" src="echarts.js" asp-append-version="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<style>
	*{
		font-size:100px;
	}
	</style>
</head>
<body>
    <!-- 创建容器 -->
    <div id="chart" style="width:800px;height:500px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('chart'));
        var data = 
		[{
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:00:00",
			"END_TIME": "2023-11-25T07:05:00",
			"RUNTIME_TIMESTAMP": 1700895600000,
			"END_TIME_TIMESTAMP": 1700895900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:05:00",
			"END_TIME": "2023-11-25T07:10:00",
			"RUNTIME_TIMESTAMP": 1700895900000,
			"END_TIME_TIMESTAMP": 1700896200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:10:00",
			"END_TIME": "2023-11-25T07:15:00",
			"RUNTIME_TIMESTAMP": 1700896200000,
			"END_TIME_TIMESTAMP": 1700896500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:15:00",
			"END_TIME": "2023-11-25T07:20:00",
			"RUNTIME_TIMESTAMP": 1700896500000,
			"END_TIME_TIMESTAMP": 1700896800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:20:00",
			"END_TIME": "2023-11-25T07:25:00",
			"RUNTIME_TIMESTAMP": 1700896800000,
			"END_TIME_TIMESTAMP": 1700897100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:25:00",
			"END_TIME": "2023-11-25T07:30:00",
			"RUNTIME_TIMESTAMP": 1700897100000,
			"END_TIME_TIMESTAMP": 1700897400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:30:00",
			"END_TIME": "2023-11-25T07:35:00",
			"RUNTIME_TIMESTAMP": 1700897400000,
			"END_TIME_TIMESTAMP": 1700897700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:35:00",
			"END_TIME": "2023-11-25T07:40:00",
			"RUNTIME_TIMESTAMP": 1700897700000,
			"END_TIME_TIMESTAMP": 1700898000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:40:00",
			"END_TIME": "2023-11-25T07:45:00",
			"RUNTIME_TIMESTAMP": 1700898000000,
			"END_TIME_TIMESTAMP": 1700898300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:45:00",
			"END_TIME": "2023-11-25T07:50:00",
			"RUNTIME_TIMESTAMP": 1700898300000,
			"END_TIME_TIMESTAMP": 1700898600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:50:00",
			"END_TIME": "2023-11-25T07:55:00",
			"RUNTIME_TIMESTAMP": 1700898600000,
			"END_TIME_TIMESTAMP": 1700898900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T07:55:00",
			"END_TIME": "2023-11-25T08:00:00",
			"RUNTIME_TIMESTAMP": 1700898900000,
			"END_TIME_TIMESTAMP": 1700899200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:00:00",
			"END_TIME": "2023-11-25T08:05:00",
			"RUNTIME_TIMESTAMP": 1700899200000,
			"END_TIME_TIMESTAMP": 1700899500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:05:00",
			"END_TIME": "2023-11-25T08:10:00",
			"RUNTIME_TIMESTAMP": 1700899500000,
			"END_TIME_TIMESTAMP": 1700899800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:10:00",
			"END_TIME": "2023-11-25T08:15:00",
			"RUNTIME_TIMESTAMP": 1700899800000,
			"END_TIME_TIMESTAMP": 1700900100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:15:00",
			"END_TIME": "2023-11-25T08:20:00",
			"RUNTIME_TIMESTAMP": 1700900100000,
			"END_TIME_TIMESTAMP": 1700900400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T08:20:00",
			"END_TIME": "2023-11-25T08:25:00",
			"RUNTIME_TIMESTAMP": 1700900400000,
			"END_TIME_TIMESTAMP": 1700900700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T08:25:00",
			"END_TIME": "2023-11-25T08:30:00",
			"RUNTIME_TIMESTAMP": 1700900700000,
			"END_TIME_TIMESTAMP": 1700901000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T08:30:00",
			"END_TIME": "2023-11-25T08:35:00",
			"RUNTIME_TIMESTAMP": 1700901000000,
			"END_TIME_TIMESTAMP": 1700901300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "待生产",
			"RUNTIME": "2023-11-25T08:35:00",
			"END_TIME": "2023-11-25T08:40:00",
			"RUNTIME_TIMESTAMP": 1700901300000,
			"END_TIME_TIMESTAMP": 1700901600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "待生产",
			"RUNTIME": "2023-11-25T08:40:00",
			"END_TIME": "2023-11-25T08:45:00",
			"RUNTIME_TIMESTAMP": 1700901600000,
			"END_TIME_TIMESTAMP": 1700901900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T08:45:00",
			"END_TIME": "2023-11-25T08:50:00",
			"RUNTIME_TIMESTAMP": 1700901900000,
			"END_TIME_TIMESTAMP": 1700902200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T08:50:00",
			"END_TIME": "2023-11-25T08:55:00",
			"RUNTIME_TIMESTAMP": 1700902200000,
			"END_TIME_TIMESTAMP": 1700902500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T08:55:00",
			"END_TIME": "2023-11-25T09:00:00",
			"RUNTIME_TIMESTAMP": 1700902500000,
			"END_TIME_TIMESTAMP": 1700902800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:00:00",
			"END_TIME": "2023-11-25T09:05:00",
			"RUNTIME_TIMESTAMP": 1700902800000,
			"END_TIME_TIMESTAMP": 1700903100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T09:05:00",
			"END_TIME": "2023-11-25T09:10:00",
			"RUNTIME_TIMESTAMP": 1700903100000,
			"END_TIME_TIMESTAMP": 1700903400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T09:10:00",
			"END_TIME": "2023-11-25T09:15:00",
			"RUNTIME_TIMESTAMP": 1700903400000,
			"END_TIME_TIMESTAMP": 1700903700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:15:00",
			"END_TIME": "2023-11-25T09:20:00",
			"RUNTIME_TIMESTAMP": 1700903700000,
			"END_TIME_TIMESTAMP": 1700904000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:20:00",
			"END_TIME": "2023-11-25T09:25:00",
			"RUNTIME_TIMESTAMP": 1700904000000,
			"END_TIME_TIMESTAMP": 1700904300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:25:00",
			"END_TIME": "2023-11-25T09:30:00",
			"RUNTIME_TIMESTAMP": 1700904300000,
			"END_TIME_TIMESTAMP": 1700904600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T09:30:00",
			"END_TIME": "2023-11-25T09:35:00",
			"RUNTIME_TIMESTAMP": 1700904600000,
			"END_TIME_TIMESTAMP": 1700904900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T09:35:00",
			"END_TIME": "2023-11-25T09:40:00",
			"RUNTIME_TIMESTAMP": 1700904900000,
			"END_TIME_TIMESTAMP": 1700905200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "维修",
			"RUNTIME": "2023-11-25T09:40:00",
			"END_TIME": "2023-11-25T09:45:00",
			"RUNTIME_TIMESTAMP": 1700905200000,
			"END_TIME_TIMESTAMP": 1700905500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "维修",
			"RUNTIME": "2023-11-25T09:45:00",
			"END_TIME": "2023-11-25T09:50:00",
			"RUNTIME_TIMESTAMP": 1700905500000,
			"END_TIME_TIMESTAMP": 1700905800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:50:00",
			"END_TIME": "2023-11-25T09:55:00",
			"RUNTIME_TIMESTAMP": 1700905800000,
			"END_TIME_TIMESTAMP": 1700906100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:55:00",
			"END_TIME": "2023-11-25T10:00:00",
			"RUNTIME_TIMESTAMP": 1700906100000,
			"END_TIME_TIMESTAMP": 1700906400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:00:00",
			"END_TIME": "2023-11-25T10:05:00",
			"RUNTIME_TIMESTAMP": 1700906400000,
			"END_TIME_TIMESTAMP": 1700906700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:05:00",
			"END_TIME": "2023-11-25T10:10:00",
			"RUNTIME_TIMESTAMP": 1700906700000,
			"END_TIME_TIMESTAMP": 1700907000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:10:00",
			"END_TIME": "2023-11-25T10:15:00",
			"RUNTIME_TIMESTAMP": 1700907000000,
			"END_TIME_TIMESTAMP": 1700907300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:15:00",
			"END_TIME": "2023-11-25T10:20:00",
			"RUNTIME_TIMESTAMP": 1700907300000,
			"END_TIME_TIMESTAMP": 1700907600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:20:00",
			"END_TIME": "2023-11-25T10:25:00",
			"RUNTIME_TIMESTAMP": 1700907600000,
			"END_TIME_TIMESTAMP": 1700907900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:25:00",
			"END_TIME": "2023-11-25T10:30:00",
			"RUNTIME_TIMESTAMP": 1700907900000,
			"END_TIME_TIMESTAMP": 1700908200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:30:00",
			"END_TIME": "2023-11-25T10:35:00",
			"RUNTIME_TIMESTAMP": 1700908200000,
			"END_TIME_TIMESTAMP": 1700908500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:35:00",
			"END_TIME": "2023-11-25T10:40:00",
			"RUNTIME_TIMESTAMP": 1700908500000,
			"END_TIME_TIMESTAMP": 1700908800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:40:00",
			"END_TIME": "2023-11-25T10:45:00",
			"RUNTIME_TIMESTAMP": 1700908800000,
			"END_TIME_TIMESTAMP": 1700909100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:45:00",
			"END_TIME": "2023-11-25T10:50:00",
			"RUNTIME_TIMESTAMP": 1700909100000,
			"END_TIME_TIMESTAMP": 1700909400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:50:00",
			"END_TIME": "2023-11-25T10:55:00",
			"RUNTIME_TIMESTAMP": 1700909400000,
			"END_TIME_TIMESTAMP": 1700909700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:55:00",
			"END_TIME": "2023-11-25T11:00:00",
			"RUNTIME_TIMESTAMP": 1700909700000,
			"END_TIME_TIMESTAMP": 1700910000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:00:00",
			"END_TIME": "2023-11-25T11:05:00",
			"RUNTIME_TIMESTAMP": 1700910000000,
			"END_TIME_TIMESTAMP": 1700910300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:05:00",
			"END_TIME": "2023-11-25T11:10:00",
			"RUNTIME_TIMESTAMP": 1700910300000,
			"END_TIME_TIMESTAMP": 1700910600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:10:00",
			"END_TIME": "2023-11-25T11:15:00",
			"RUNTIME_TIMESTAMP": 1700910600000,
			"END_TIME_TIMESTAMP": 1700910900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:15:00",
			"END_TIME": "2023-11-25T11:20:00",
			"RUNTIME_TIMESTAMP": 1700910900000,
			"END_TIME_TIMESTAMP": 1700911200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:20:00",
			"END_TIME": "2023-11-25T11:25:00",
			"RUNTIME_TIMESTAMP": 1700911200000,
			"END_TIME_TIMESTAMP": 1700911500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:25:00",
			"END_TIME": "2023-11-25T11:30:00",
			"RUNTIME_TIMESTAMP": 1700911500000,
			"END_TIME_TIMESTAMP": 1700911800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:30:00",
			"END_TIME": "2023-11-25T11:35:00",
			"RUNTIME_TIMESTAMP": 1700911800000,
			"END_TIME_TIMESTAMP": 1700912100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:35:00",
			"END_TIME": "2023-11-25T11:40:00",
			"RUNTIME_TIMESTAMP": 1700912100000,
			"END_TIME_TIMESTAMP": 1700912400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:40:00",
			"END_TIME": "2023-11-25T11:45:00",
			"RUNTIME_TIMESTAMP": 1700912400000,
			"END_TIME_TIMESTAMP": 1700912700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}];
				
		var types = [
			{ name: '正常运行', color: '#07c160' },
			{ name: '待生产', color: '#269abc' },
			{ name: '调试', color: '#edb217' },
			{ name: '维修', color: '#f68ba7' },
			{ name: '故障停机', color: '#ff3374' }
        ];
        var startTime;
        var datatemp = [];
        for (let i = 0; i < data.length; i++) {
            startTime = new Date(data[i].RUNTIME).getTime();
            var typeItem = types.filter(a => a.name == data[i].STATUSDESC)[0];
            datatemp.push({
                name: typeItem.name,
                value: [
                    parseInt(data[i].ROWNUM),
                    new Date(data[i].RUNTIME).getTime(),
                    new Date(data[i].END_TIME).getTime(),
                    //data[i].RUNTIME_TIMESTAMP,
                    //data[i].END_TIME_TIMESTAMP,
					data[i].DIFF_MILLISEC,
                    data[i].NAME
                ],
                itemStyle: {
                    normal: {
                        color: typeItem.color
                    }
                }
            });
        }
        console.log(JSON.stringify(datatemp));
        var categories = data.map(item => item.NAME).filter((name, index, arr) => arr.indexOf(name) === index);
        function renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            var rectShape = echarts.graphic.clipRectByRect(
                {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                },
                {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }
            );
            return (
                rectShape && {
                    type: 'rect',
                    transition: ['shape'],
                    shape: rectShape,
                    style: api.style()
                }
            );
        }
        option = {
			textStyle: {
				color: '#333',
				fontSize: '0.13rem'
			},
			grid: {
				top: '5%',
				left: '8%',
				bottom: '16%',
				width: '90%'
			},
			legend: {
				show: true,
				itemWidth: 10,
				itemHeight: 10,
				textStyle: {
					color: '#fff',
					fontSize: '0.12rem'
				},
				data: types.map(function (type) {
					return type.name;
				}),
			},
			tooltip: {
				show: true,
				textStyle: {
					fontSize: 10
				},
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#333'
					}
				},
				formatter: function (params) {
                    return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();
                }
			},	
			dataZoom: [
				{
					type: 'inside',
					filterMode: 'weakFilter'
				},
				{
					type: "slider",
					show: true,
					height: "6",
					bottom: "4%",
					labelFormatter: '',
					backgroundColor: "white",
					brushSelect: false,
					minValueSpan: 3600 * 24 * 1000 * 7,
					handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
					handleSize: 15,
					handleColor: '#6bc5da',
					start: 0,
					end: 100,
					handleStyle: {
						borderCap: 'round',
						color: "#fff",
						shadowColor: 'rgba(0, 0, 0, 0.5)',
						shadowBlur: 1
					},
					textStyle: {
						color: "transparent"
					},
					borderColor: 'transparent',
					backgroundColor: '#D7F4FF',
					dataBackground: {
						lineStyle: {
							width: 0
						},
						areaStyle: {
							color: 'transparent'
						}
					},
					fillerColor: '#00EBFF'
				}
			],	
			xAxis: {
                    type: 'time',
                    //min: new Date(startTime).setHours(7, 0, 0, 0),
                    //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                    interval: 3600000,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#333',
                            width: 2 
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#333',
                            fontSize: '0.14rem'
                        },
                        show: true
                    }
                },
                yAxis: {
                    data: categories,
                    scale: true,
                    splitLine: { show: false },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder',
                        }
                    }
                },
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            console.log(params);
        });
        window.addEventListener('resize', function () {
            chart.resize();
        });
    </script>
</body>
</html>

参考：
Echarts 甘特图事例
博客1
博客2
博客3

注意事项：
不要把设备的开始时间，和结束时间在数据库查询的时候就转时间戳，数据转的时间戳，在前端转时间会有差异
就用数据查询yyyy-MM-dd HH:mm:ss.fff 日期格式，前端转时间戳就不会报错。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/192170.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

利用 LD_PRELOAD 环境变量

利用 LD_PRELOAD 环境变量

文章目录 原理LD_PRELOAD介绍如何上传.so文件 例题 [虎符CTF 2022]ezphp 原理 LD_PRELOAD介绍 LD_PRELOAD是Linux系统的一个环境变量&#xff0c;它可以影响程序的运行时的链接&#xff08;Runtime linker&#xff09;&#xff0c;它允许你定义在程序运行前优先加载的动态链接…
阅读更多...
你好python！——python中的函数与数据容器

你好python！——python中的函数与数据容器

一、函数的定义 1.1函数定义语法 1.2函数的参数 1.2.1参数的传入 python中函数的参数和C语言函数的参数其实一样&#xff0c;他们都是形参&#xff0c;是实参的一份临时拷贝。我们来定义一个加法函数来看看函数的参数传入&#xff1a; 参数之间使用逗号进行分隔。 1.2.2函…
阅读更多...
【挑战业余一周拿证】一、亚马逊云科技简介 - 第 3 节 - 云计算

【挑战业余一周拿证】一、亚马逊云科技简介 - 第 3 节 - 云计算

第 3 节 - 云计算 在深入了解亚马逊云科技的各个部分之前&#xff0c;让我们先缩小视野&#xff0c;对云进行一个合理的定义。云计算就是通过互联网按需提供 IT 资源并采用按需付费定价模式&#xff0c;下面&#xff0c;我们将进行详细说明。 按需提供表示的是亚马逊云科技会在…
阅读更多...
Qt C++中调用python,并将软件打包发布，python含第三方依赖

Qt C++中调用python,并将软件打包发布，python含第三方依赖

工作中遇到qt c调用我的python 代码&#xff0c;并且想要一键打包&#xff0c;这里我根据参考的以及个人实践的结果来简单实现一下。 环境&#xff1a;windows系统&#xff0c;QT Creater 4.5&#xff0c; python 3.8&#xff08;anaconda虚拟环境&#xff09; 1. 简单QT调用…
阅读更多...
机器学习第13天：模型性能评估指标

机器学习第13天：模型性能评估指标

☁️主页 Nowl &#x1f525;专栏《机器学习实战》 《机器学习》 &#x1f4d1;君子坐而论道&#xff0c;少年起而行之 文章目录 交叉验证 保留交叉验证 k-折交叉验证 留一交叉验证 混淆矩阵 精度与召回率 介绍 精度 召回率 区别 使用代码 偏差与方差 介绍 区…
阅读更多...
FreeRTOS学习之路，以STM32F103C8T6为实验MCU（2-9：任务通知）

FreeRTOS学习之路，以STM32F103C8T6为实验MCU（2-9：任务通知）

学习之路主要为FreeRTOS操作系统在STM32F103&#xff08;STM32F103C8T6&#xff09;上的运用&#xff0c;采用的是标准库编程的方式&#xff0c;使用的IDE为KEIL5。 注意&#xff01;&#xff01;&#xff01;本学习之路可以通过购买STM32最小系统板以及部分配件的方式进行学习…
阅读更多...
非参数估计与参数估计的区别，以及详细列举了常用的非参数估计方法和参数估计方法，一网打尽非参数估计与参数估计!!!

非参数估计与参数估计的区别，以及详细列举了常用的非参数估计方法和参数估计方法，一网打尽非参数估计与参数估计!!!

文章目录 前言一、非参数估计与参数估计的区别二、常用的非参数估计方法三、常用的参数估计方法总结 前言 非参数估计和参数估计是统计学中的两种不同的估计方法。 一、非参数估计与参数估计的区别 参数估计是指&#xff0c;对于已知分布形式的数据&#xff0c;根据样本数据…
阅读更多...
HTML5原生视频播放器组件video的videocontrolslist属性详解

HTML5原生视频播放器组件video的videocontrolslist属性详解

HTML5提供了内置的视频播放控件，其中videocontrolslist是其中一个很有用的属性。videocontrolslist属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍videocontrolslist的详细使用。 一、启用videocontrolslist videocont…
阅读更多...
一个基于.NET Core开源、跨平台的仓储管理系统

一个基于.NET Core开源、跨平台的仓储管理系统

前言 今天给大家推荐一个基于.NET Core开源、跨平台的仓储管理系统&#xff0c;数据库支持MSSQL/MySQL&#xff1a;ZEQP.WMS。 仓储管理系统介绍 仓储管理系统&#xff08;Warehouse Management System&#xff0c;WMS&#xff09;是一种用于管理和控制仓库操作的软件系统&…
阅读更多...
扩散模型实战（十二）：使用调度器DDIM反转来优化图像编辑

扩散模型实战（十二）：使用调度器DDIM反转来优化图像编辑

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散模型实战&#xff08;三&#xff09;&#xff1a;扩散模型的应用 扩散模型实战&#xff08;四&#xff…
阅读更多...
vue3+ts 依赖注入 provide inject

vue3+ts 依赖注入 provide inject

父级&#xff1a; <template><div><h1>App.vue (爷爷级别)</h1><label><input type"radio" v-model"colorVal" value"red" name"color" />红色</label><label><input type"r…
阅读更多...
Win11画图板的解决方法

Win11画图板的解决方法

Win11画图板的解决方法 现状: 伴随着windows由win10更新到win11,windows自带的画图板也随之更新,但是它就变得对我们用户就不太友善了,变得很难使用. 具体表现: 需求: 但是由于各种需求,就以我来举例,由于博主写博客的需要,去使用其它的软件,就找不到其它这么好用的画图软件进…
阅读更多...
Linux的基本指令（三）

Linux的基本指令（三）

目录 前言 echo指令&#xff08;简述&#xff09; Linux的设计理念 输出重定向操作符 > 追加输出重定向操作符 >> 输入重定向操作符 < 补充知识 学前补充 more指令 less指令 head指令 tail指令 查看文件中间的内容 利用输出重定向实现 利用管道“ |…
阅读更多...
python树的孩子链存储结构

python树的孩子链存储结构

树的孩子链存储结构是一种树的存储方式&#xff0c;它使用孩子兄弟表示法来表示树的结构。在这种存储结构中&#xff0c;树的每个节点都有一个指向其第一个孩子的指针和一个指向其下一个兄弟的指针。这样&#xff0c;可以通过这些指针来表示树的层次结构和节点之间的关系。 具…
阅读更多...
大公司为什么喜欢centos系统写爬虫？

大公司为什么喜欢centos系统写爬虫？

CentOS是一个基于Red Hat Enterprise Linux&#xff08;RHEL&#xff09;源代码构建的开源操作系统&#xff0c;它受到大企业喜欢大多数因为他系统的稳定性&#xff0c;安全性以及兼容性等。可以为企业提供更多的商业支持。以我个人为例&#xff0c;公司在做爬虫数据抓取多是采…
阅读更多...
Vue 双向数据绑定

Vue 双向数据绑定

之前通过v-bind来完成的数据绑定&#xff0c;属性值和表达式进行绑定&#xff0c;表达式的值发生变化了属性值也跟着发生变化。 单向数据绑定&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>首页</titl…
阅读更多...
信息素养大赛知识点

信息素养大赛知识点

基础理论准备 开放存储期刊 开放存取期刊是一种免费的网络期刊&#xff0c;旨在使所有用户都可以通过因特网无限制地访问期刊论文全文。此种期刊一般采用作者付费出版、读者免费获得、无限制使用的运作模式&#xff0c;论文版权由作者保留。在论文质量控制方面&#xff0c;oa…
阅读更多...
Couchdb 命令执行漏洞复现 （CVE-2017-12636）

Couchdb 命令执行漏洞复现 （CVE-2017-12636）

Couchdb 命令执行漏洞复现 &#xff08;CVE-2017-12636&#xff09; 1、下载couchdb.py 2、修改目标和反弹地址 3、Python3调用执行即可 couchdb.py文件下载地址: https://github.com/vulhub/vulhub/blob/master/couchdb/CVE-2017-12636/exp.py ‍ 在VULFocus上开启环境 …
阅读更多...
虚拟内存的基本概念

虚拟内存的基本概念

文章目录 虚拟内存虚拟地址空间(其他 Unix 系统的设计也与此类似)。程序代码和数据堆共享库栈内核虚拟内存 参考 虚拟内存 虚拟内存是一个抽象概念&#xff0c;它为每个进程提供了一个假象&#xff0c;即每个进程都在独占地使用主存。每个进程看到的内存都是一致的&#xff0c…
阅读更多...
城市安全守护者：分析无人机在交通领域的应用

城市安全守护者：分析无人机在交通领域的应用

随着科技的进步&#xff0c;无人机在交通领域的应用不断增加&#xff0c;为智慧交通管理提供了新便利。无人机凭借其灵活性&#xff0c;在违章取证、交通事故侦查、交通疏导等方面展现出巨大的应用潜力。无人机在交通领域的应用有哪些&#xff1f;跟着我们一探究竟。 1、违章取…
阅读更多...
最新文章

Copyright @ 2022~2023