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/[email protected]/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 日期格式，前端转时间戳就不会报错。
