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，一经查实，立即删除！

相关文章

Python与设计模式--装饰器模式

Python与设计模式--装饰器模式

6-Python与设计模式–装饰器模式 一、快餐点餐系统 又提到了那个快餐点餐系统&#xff0c;不过今天我们只以其中的一个类作为主角&#xff1a;饮料类。 首先&#xff0c;回忆下饮料类&#xff1a; class Beverage():name ""price 0.0type "BEVERAGE"…
阅读更多...
【计算机网络笔记】多路访问控制(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…
阅读更多...
TS常见类型概述

TS常见类型概述

基元类型 string、number、boolean null和undefined // 当用到null和undefined跟其他类型的联合类型时&#xff0c;多要进行一个非空的类型缩小方式 // 当开发者知道变量不会是null和undefined时&#xff0c;可以用!断言它非空 function fn(x) {return x!.toFixed }biginit、…
阅读更多...
极客时间：使用本地小型语言模型运行网页浏览器应用程序。

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

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

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

Hexedit 同时以 ASCII 和十六进制显示文件 安装 终端输入hexedit回车&#xff0c;如果没安装&#xff0c;会提示让输入 sudo apt-get install hexedit 照着输入命令&#xff0c;安装。安装完成后&#xff0c;cd到一个有二进制文件的目录下&#xff0c;输入hexedit命令回车 再…
阅读更多...
C语言第三十三弹---交换变量(不使用临时变量)

C语言第三十三弹---交换变量(不使用临时变量)

C语言在不使用临时变量的情况下实现变量交换 思路&#xff1a;看见交换变量&#xff0c;那么最容易考虑到的就是使用临时变量交换。如果不允许使用临时变量那么该如何考虑呢&#xff1f;使用^异或位运算(二进制位相同为0 不同为1)&#xff0c;通过利用异或运算的特性可以完成交…
阅读更多...
集线器-交换机-路由器

集线器-交换机-路由器

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;…
阅读更多...
RISCV汇编与Linux内核传参

RISCV汇编与Linux内核传参

在全志RISCV/D1设备上安装汇编器和链接器 去年笔者将openwrt-22.03系统移植到了基于全志D1/riscv64的嵌入式设备上。当时发现系统启动后&#xff0c;网络不可用&#xff1b;简单地修改/etc/config/network设备即可以正常连接有线网络。为了学习riscv ISA&#xff0c;笔者手动为…
阅读更多...
MongoDB使用$literal获取表达式字面值

MongoDB使用$literal获取表达式字面值

系统开发过程中&#xff0c;会有保存表达式的需求。比如保存数字或字符的字段拼接规则等。开发人员期望读取或保存这些规则时&#xff0c;不要被插入数据库或从数据库中读取规则时执行。或者保存模版时&#xff0c;也不希望讲模版中的表达式计算出结果。 mongodb的$literal方法…
阅读更多...
点云 surface 方法总结

点云 surface 方法总结

点云的表面方法是指通过点云数据来估计和重建物体或场景的表面几何形状。下面总结了几种常见的点云表面方法&#xff1a; 三角化&#xff1a;三角化是最常用的点云表面重建方法之一。它将点云中的点连接成三角形网格&#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的定义…
阅读更多...
【刷新：重新发现商业与未来】书笔记

【刷新：重新发现商业与未来】书笔记

收获 同理心&#xff1a;站在他人角度考虑他人感受&#xff0c;他人需要什么&#xff0c;我能提供什么&#xff1b;他人可以是员工&#xff0c;家人等&#xff1b;对于员工来讲核心四件事&#xff1a;1、薪水&#xff1b;2、有结果&#xff1b;3、有成长&#xff1b;4、工作开…
阅读更多...
openssl + ECDH + linux+开发详解（C++）

openssl + ECDH + linux+开发详解（C++）

一、什么是ECDH ECDH&#xff08;Elliptic Curve Diffie-Hellman&#xff09;是一种基于椭圆曲线密码学的密钥交换协议&#xff0c;用于在通信双方之间安全地协商共享密钥。ECDH是Diffie-Hellman密钥交换协议的一种变体&#xff0c;它利用椭圆曲线上的离散对数问题&#xff0c…
阅读更多...
微服务系列（三）--通过spring cloud zuul过滤器实现线上流量复制

微服务系列（三）--通过spring cloud zuul过滤器实现线上流量复制

思路 补充一下&#xff0c;为什么这里我会想到使用"pre"类型的过滤器实现流量复制/流量镜像。 刚开始的时候&#xff0c;参考了阿里的流量镜像实现方案&#xff1a; 配置流量复制策略&#xff0c;阿里的方案本身是对基于云原生envoy做的&#xff0c;这确实是istio原…
阅读更多...
关于嵌入式系统一些名词的小结(ARM/CORTEX/STM32等)

关于嵌入式系统一些名词的小结(ARM/CORTEX/STM32等)

Microcontroller和Microprocessor啥区别&#xff1f; Microcontroller通常包括CPU和外设在一起&#xff0c;CPU通常计算能力没那么强&#xff0c;而且比较便宜。 Microprocessor通常只包括一个计算能力很强的CPU&#xff0c;比较贵。它会连到其它外设。 CPU ARM 是ARM公司开发…
阅读更多...
使用不平衡数据集练习机器学习

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

一、介绍 在当今世界&#xff0c;机器学习和人工智能几乎被广泛应用于每个领域&#xff0c;以提高绩效和结果。但如果没有数据&#xff0c;它们还有用吗&#xff1f;答案是否定的。机器学习算法严重依赖我们提供给它们的数据。我们提供给算法的数据质量在很大程度上决定了机器学…
阅读更多...
最新文章

Copyright @ 2022~2023