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 日期格式，前端转时间戳就不会报错。
在这里插入图片描述

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

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

相关文章

【计算机网络笔记】多路访问控制(MAC)协议——轮转访问MAC协议

【计算机网络笔记】多路访问控制(MAC)协议——轮转访问MAC协议

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…
阅读更多...
树状数组 / pbds解法 E2. Array Optimization by Deque

树状数组 / pbds解法 E2. Array Optimization by Deque

Problem - 1579E2 - Codeforces Array Optimization by Deque - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 树状数组解法 将 a i a_i ai​插入到队头&#xff0c;贡献为&#xff1a;原队列中所有比 a i a_i ai​小的数的数量将 a i a_i ai​插入到队尾&#xff0c;贡献为&a…
阅读更多...
极客时间：使用本地小型语言模型运行网页浏览器应用程序。

极客时间：使用本地小型语言模型运行网页浏览器应用程序。

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
二进制编辑器hexedit的安装及使用

二进制编辑器hexedit的安装及使用

Hexedit 同时以 ASCII 和十六进制显示文件 安装 终端输入hexedit回车&#xff0c;如果没安装&#xff0c;会提示让输入 sudo apt-get install hexedit 照着输入命令&#xff0c;安装。安装完成后&#xff0c;cd到一个有二进制文件的目录下&#xff0c;输入hexedit命令回车 再…
阅读更多...
集线器-交换机-路由器

集线器-交换机-路由器

1.集线器(Hub) 集线器就是将网线集中到一起的机器&#xff0c;也就是多台主机和设备的连接器。集线器的主要功能是对接收到的信号进行同步整形放大&#xff0c;以扩大网络的传输距离&#xff0c;是中继器的一种形式&#xff0c;区别在于集线器能够提供多端口服务&#xff0c;也…
阅读更多...
从0开始学习JavaScript--构建强大的JavaScript图片库

从0开始学习JavaScript--构建强大的JavaScript图片库

在现代Web开发中&#xff0c;图像是不可或缺的一部分&#xff0c;而构建一个强大的JavaScript图片库能够有效地管理、展示和操作图像&#xff0c;为用户提供更丰富的视觉体验。本文将深入探讨构建JavaScript图片库的实用技巧&#xff0c;并通过丰富的示例代码演示如何实现各种功…
阅读更多...
透过对话聊天聊网络tcp三次握手四次挥手

透过对话聊天聊网络tcp三次握手四次挥手

序 说起来网络&#xff0c;就让我想起的就是一张图。我在网上可以为所欲为&#xff0c;反正你又不能顺着网线来打我。接下来我们来详细说一下网络到底是怎么连接的。 TCP三次打招呼 首先我会用男女生之间的聊天方式&#xff0c;来举一个例子。 从tcp三次握手来说&#xff0c;…
阅读更多...
基于Loki + Promtail + Grafana 搭建 Nginx 日志监控

基于Loki + Promtail + Grafana 搭建 Nginx 日志监控

文章目录 引言第一部分&#xff1a;Loki 简介与安装1.1 Loki 简介1.2 Loki 安装1.2.1 下载 Loki1.2.2 安装 Loki 1.3 启动 Loki 第二部分&#xff1a;Promtail 简介与安装2.1 Promtail 简介2.2 Promtail 安装2.2.1 下载 Promtail2.2.2 安装 Promtail 2.3 启动 Promtail 第三部分…
阅读更多...
231126 刷题日报

231126 刷题日报

1. 高楼扔鸡蛋 O(N*logN) 2. 698. 划分为k个相等的子集 没做出来&#xff0c;和划分两个子集不同 3. 300. 最长递增子序列 LIS petencie sorting 没看懂&#xff0c;明天看吧 4. 518. 零钱兑换 II 完全背包问题&#xff1a;每个物品数量是无限的 注意&#xff1a;dp的定义…
阅读更多...
使用不平衡数据集练习机器学习

使用不平衡数据集练习机器学习

一、介绍 在当今世界&#xff0c;机器学习和人工智能几乎被广泛应用于每个领域&#xff0c;以提高绩效和结果。但如果没有数据&#xff0c;它们还有用吗&#xff1f;答案是否定的。机器学习算法严重依赖我们提供给它们的数据。我们提供给算法的数据质量在很大程度上决定了机器学…
阅读更多...
2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项竞赛正式试题

2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项竞赛正式试题

第十六届山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题 目录 一、竞赛时间 二、竞赛阶段 三、竞赛任务书内容 &#xff08;一&#xff09;拓扑图 &#xff08;二&#xff09;A模块基础设施设置/安全加固&#xff08;200分&#xff09; &#xff08;三&#xf…
阅读更多...
Centos 7.9 Install Docker Insecure Registry

Centos 7.9 Install Docker Insecure Registry

文章目录 1. 镜像存储规划2. 安装定制 docker3. 部署 registry4. 验证镜像仓库 1. 镜像存储规划 linux LVM /dev/sdb mount dir /data【linux LVM 磁盘挂载目录】 创建两个目录 一个 docker 数据存储目录 &#xff1a;/data/docker&#xff0c;默认一般为linux为 /var/lib/d…
阅读更多...
boomYouth

boomYouth

周一&#xff1a; 1. action异步写法&#xff1a; <script setup> import sonCom1 from /components/sonCom1.vue import sonCom2 from /components/sonCom2.vue import {useCountStore} from /store/counter import {useChannelStore} from /store/channel const count…
阅读更多...
1、nmap常用命令

1、nmap常用命令

文章目录 1. 主机存活探测2. 常见端口扫描、服务版本探测、服务器版本识别3. 全端口&#xff08;TCP/UDP&#xff09;扫描4. 最详细的端口扫描5. 三种TCP扫描方式&#xff08;1&#xff09;TCP connect 扫描&#xff08;2&#xff09;TCP SYN扫描&#xff08;3&#xff09;TCP …
阅读更多...
PTA-7-55 判断指定字符串是否合法

PTA-7-55 判断指定字符串是否合法

题目&#xff1a; 输入一个字符串&#xff0c;判断指定字符串是否合法&#xff0c;要求字符串由7个字符组成&#xff0c;并且第一位必须是大写字母&#xff0c;2-4为必须是小写字母&#xff0c;后3为必须是数字字符&#xff0c;要求使用正则表达式来实现。 根据题目要求&#x…
阅读更多...
防火墙命令行基础配置实验（H3C模拟器）

防火墙命令行基础配置实验（H3C模拟器）

嘿&#xff0c;这里是目录&#xff01; ⭐ H3C模拟器资源链接1. 实验示意图2. 要求3. 当前配置3.1 PC配置3.2 FW配置&#xff08;防火墙&#xff09;[^7][^8]3.2.1 FW1配置3.2.2 FW2配置 3.3 R配置3.3.1 R1配置3.3.2 R2配置 3.4 SW配置3.4.1 SW1配置3.4.2 SW2配置3.4.3 SW3配置…
阅读更多...
1.9 字符数组

1.9 字符数组

1.9 字符数组 一、字符数组概述二、练习 一、字符数组概述 所谓字符数组&#xff0c;就是char类型的数组&#xff0c;比如 char a[]&#xff0c;是C语言中最常用的数组类型&#xff0c;先看一个程序 #include <stdio.h> #define MAXLINE 1000 //最大行长度限制 int get…
阅读更多...
gradle构建项目速度优化及排查方式

gradle构建项目速度优化及排查方式

文章目录 一、前言二、Android项目优化1、相关配置2、构建速度分析 三、Gradle项目通用优化1、分析构建耗时2、使用配置进行优化3、优化依赖解析a. 避免不必要和未使用的依赖项b. 优化存储库顺序 c. 最小化动态和快照版本d. 通过构建扫描查找动态和变化的版本e. 通过构建扫描可…
阅读更多...
⑤【Sorted Set】Redis常用数据类型： ZSet [使用手册]

⑤【Sorted Set】Redis常用数据类型： ZSet [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 目录 ⑤Redis Zset 操作命令汇总1. zadd 添加或…
阅读更多...
[C/C++]数据结构 堆的详解

[C/C++]数据结构 堆的详解

一:概念 堆通常是一个可以被看做一棵完全二叉树的数组对象,它是一颗完全二叉树,堆存储的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中,并且需要满足每个父亲结点总小于其子节点(或者每个父亲结点总大于其子节点) 堆可以分为两种: 小堆: 任意一个父亲节点都小于其子…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023