Echarts 设备状态 甘特图

news2024/11/30 9:29:31

在做工厂智能化生产看板时，绝对会有设备状态看板，展示设备当天或者当前状态，设备状态数据一般是有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
                ],
                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.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 日期格式，前端转时间戳就不会报错。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

解决Vue编程式导航路由跳转不显示目标路径问题

解决Vue编程式导航路由跳转不显示目标路径问题

我们配置一个编程式导航的路由跳转&#xff0c;跳转到 /search 页面&#xff0c;并且携带categoryName和categoryId两个query参数。 this.$router.push({path: "/search",query: {categoryName: dataset.categoryname,categoryId: dataset.categoryid} }) 如果我们…
阅读更多...
清华提出 SoRA，参数量只有 LoRA 的 70%，表现更好！

清华提出 SoRA，参数量只有 LoRA 的 70%，表现更好！

现在有很多关于大型语言模型&#xff08;LLM&#xff09;的研究&#xff0c;都围绕着如何高效微调展开。微调是利用模型在大规模通用数据上学到的知识&#xff0c;通过有针对性的小规模下游任务数据&#xff0c;使模型更好地适应具体任务的训练方法。 在先前的工作中&#xff…
阅读更多...
【挑战业余一周拿证】二、在云中计算 - 第 1 节 - 模块2 简介

【挑战业余一周拿证】二、在云中计算 - 第 1 节 - 模块2 简介

第 1 节 - 模块2 简介 无论你的企业是属于像医疗、保健、制造、保险等等行业 , 再或者 , 您的服务是向全世界的数百万用户提供视频、、图片或者文字服务,你也需要服务器来为您的业务和应用程序提供支持,服务器的作用是帮助您托管应用程序并提供满足您业务需求的计算能力. 当你使…
阅读更多...
显示Excel功能区或工具栏的方法不少，其中快捷方式最快

显示Excel功能区或工具栏的方法不少，其中快捷方式最快

Microsoft Excel是Office套件中最复杂的工具之一&#xff0c;它提供了大量功能&#xff0c;其中大部分都是使用工具栏操作的。缺少工具栏使Excel很难完成工作。 如果Excel中没有这些关键元素&#xff0c;你将无法快速完成工作&#xff0c;因此&#xff0c;可以理解的是&#x…
阅读更多...
Rust高性能网络框架：实战案例与代码解析

Rust高性能网络框架：实战案例与代码解析

欢迎关注我的公众号lincyang新自媒体&#xff0c;回复关键字【程序员经典书单】&#xff0c;领取程序员的100本经典书单 大家好&#xff01;我是lincyang。 今天我们将深入探讨Rust编程语言在实际项目中的应用&#xff0c;并结合具体的代码示例来加深理解。 Rust因其内存安全…
阅读更多...
JBase到JRT

JBase到JRT

JBase之前是站在之前基础上新做的java框架。所以带入一些老的历史习惯&#xff0c;比如库和空间都以LIS开头&#xff0c;实体只能是LIS.Model等。为了做到更通用的框架&#xff0c;需要剔除LIS特性&#xff0c;实体肯定不能只能叫LIS.Model了。同时之前只关注业务脚本化的事忘了…
阅读更多...
文件重命名不求人：批量重命名的技巧，告别手动修改文件名

文件重命名不求人：批量重命名的技巧，告别手动修改文件名

在日常工作中&#xff0c;经常需要处理大量的文件&#xff0c;其中文件重命名是常见的需求。一个个手动修改文件名&#xff0c;不仅费时费力&#xff0c;还容易出错。那么&#xff0c;是否存在一种更高效、更便捷的方式&#xff0c;告别逐个手动修改文件名的繁琐过程呢&#xf…
阅读更多...
三数之和问题

三数之和问题

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例 1&…
阅读更多...
Hexo 还是 Hugo？Typecho 还是 Wordpress？读完这篇或许你就有答案了！

Hexo 还是 Hugo？Typecho 还是 Wordpress？读完这篇或许你就有答案了！

Hexo 首先介绍的是 Hexo，这也是咕咕没买服务器之前折腾的第一个博客。 演示站点：https://yirenliu.cn 用的主题是 butterfly，想当年刚用的时候，作者还没建群，现在 qq 群都有上千人了，GitHub 上的星星数量也有 2.7k 了。 优点 如果你不想买服务器，但也想折腾一个博客，…
阅读更多...
【MATLAB源码-第90期】基于matlab的OQPSKsimulink仿真，对比初始信号和解调信号输出星座图。

【MATLAB源码-第90期】基于matlab的OQPSKsimulink仿真，对比初始信号和解调信号输出星座图。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 正交偏移二进制相移键控&#xff08;OQPSK, Orthogonal Quadrature Phase Shift Keying&#xff09;是一种数字调制技术&#xff0c;主要用于高效无线数据传输。它是传统二进制相移键控&#xff08;BPSK&#xff09;的一个变…
阅读更多...
正则表达式例题-PTA

正则表达式例题-PTA

PTA-7-55 判断指定字符串是否合法-CSDN博客 7-54 StringBuffer-拼接字符串 题目&#xff1a; 输入3个整数n、begin、end。 将从0到n-1的数字拼接为字符串str。如&#xff0c;n12&#xff0c;则拼接出来的字符串为&#xff1a;01234567891011 最后截取字符串str从begin到end(包…
阅读更多...
【管理运筹学】背诵手册（六）| 图与网络分析（基本概念、最小支撑树问题、最短路问题）

【管理运筹学】背诵手册（六）| 图与网络分析（基本概念、最小支撑树问题、最短路问题）

六、图与网络分析 基本概念、术语 某个边的两个端点相同&#xff0c;称为环&#xff1b;两点之间有多于一条的边&#xff0c;成为多重边。一个无环、无多重边的图称为简单图&#xff0c;无环但允许有多重边的图称为多重图。 次&#xff1a;以 v i v_i vi​ 为端点的边的数目…
阅读更多...
【中间件】消息队列中间件intro

【中间件】消息队列中间件intro

中间件middleware 内容管理 introwhy use MQMQ实现漫谈主流消息队列QMQ IntroQMQ架构QMQ 存储模型 本文还是从理论层面分析消息队列中间件 cfeng现在处于理论分析阶段&#xff0c;以中间件例子&#xff0c;之前的blog对于中间件是从使用角度分享了相关的用法&#xff0c;现在就…
阅读更多...
Qt 网络通信

Qt 网络通信

获取本机网络信息 &#xff08;1&#xff09;在 .pro 文件中加入 QT network&#xff08;2&#xff09; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QLabel> #include <QLineEdit> #include <QPu…
阅读更多...
Spark-06：Spark 共享变量

Spark-06：Spark 共享变量

目录 1.广播变量&#xff08;broadcast variables&#xff09; 2.累加器&#xff08;accumulators&#xff09; 在分布式计算中&#xff0c;当在集群的多个节点上并行运行函数时&#xff0c;默认情况下&#xff0c;每个任务都会获得函数中使用到的变量的一个副本。如果变量很…
阅读更多...
SpringBoot——自定义start

SpringBoot——自定义start

优质博文&#xff1a;IT-BLOG-CN 一、Mybatis 实现 start 的原理 首先在写一个自定义的start之前&#xff0c;我们先参考下Mybatis是如何整合SpringBoot&#xff1a;mybatis-spring-boot-autoconfigure依赖包&#xff1a; <dependency><groupId>org.mybatis.spr…
阅读更多...
单片机学习6——定时器/计数功能的概念

单片机学习6——定时器/计数功能的概念

在8051单片机中有两个定时器/计数器&#xff0c;分别是定时器/计数器0和定时器/计数器1。 T/C0: 定时器/计数器0 T/C1: 定时器/计数器1 T0: 定时器0 T1: 定时器1 C0: 计数器0 C1: 计数器1 如果是对内部振荡源12分频的脉冲信号进行计数&#xff0c;对每个机器周期计数&am…
阅读更多...
Linux中部署MongoDB

Linux中部署MongoDB

在 是一个必要的过程&#xff0c;因为MongoDB是一种流行的NoSQL数据库&#xff0c;它可以在大多数操作系统上使用。在本文中&#xff0c;我们将介绍如何在CentOS 8上部署MongoDB。 MongoDB的下载 您可以从MongoDB官网上下载最新的MongoDB版本。使用以下命令下载MongoDB&#…
阅读更多...
可以在Playgrounds或Xcode Command Line Tool开始学习Swift

可以在Playgrounds或Xcode Command Line Tool开始学习Swift

一、用Playgrounds 1. App Store搜索并安装Swift Playgrounds 2. 打开Playgrounds&#xff0c;点击 文件-新建图书。然后就可以编程了&#xff0c;如下&#xff1a; 二、用Xcode 1. 安装Xcode 2. 打开Xcode&#xff0c;选择Creat New Project 3. 选择macOS 4. 选择Comman…
阅读更多...
手摸手vue2+Element-ui整合Axios

手摸手vue2+Element-ui整合Axios

后端WebAPI准备 跨域问题 为了保证浏览器的安全,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,称为同源策略,同源策略是浏览器安全的基石 同源策略( Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能 所谓同源(即指在同一个域)就是两个页面具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023