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.rhkb.cn/news/208016.html

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

相关文章

Linux CentOS7 联网配置 | 安装中文输入法

Linux CentOS7 联网配置 | 安装中文输入法

参考视频&#xff1a;保姆式教学虚拟机联网liunx(centos)_哔哩哔哩_bilibili 配置网络&#xff1a;解决上网问题 第一步&#xff1a;选择网络模式 第二步&#xff1a;配置网卡命令&#xff1a;打开终端执行命令&#xff1a; 1、先切换到根目录下&#xff0c;防止在第执行cd …
阅读更多...
css如何设置文本添加下划线

css如何设置文本添加下划线

css文本添加下划线 text-decoration: underline;text-decoration相关属性参数 参数描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。inherit规定应该从父元素继承 text-…
阅读更多...
blue beacon rssi 指纹室内定位数据集

blue beacon rssi 指纹室内定位数据集

数据集是开展实验的基础&#xff0c;搜集并分享。如果你有关于室内定位的问题&#xff0c;请联系博主。 namedatesetpapercommentBLEBeacon: A Real-Subject Trial Dataset from Mobile Bluetooth Low Energy Beaconshttps://github.com/dimisik/BLEBeacon-Datasethttps://arxi…
阅读更多...
matlab基于线性二次调节器(LQR)法实现机器人路径规划可变轨迹跟踪

matlab基于线性二次调节器(LQR)法实现机器人路径规划可变轨迹跟踪

1、内容简介 略 可以交流、咨询、答疑 2、内容说明 基于线性二次调节器(LQR)法实现机器人路径规划可变轨迹跟踪 3、仿真分析 略 load path.mat %% 轨迹处理 % 定义参考轨迹 refPos_x path(:,1); refPos_y path(:,2); refPos [refPos_x, refPos_y];% 计算航向角和曲率 …
阅读更多...
Elasticsearch：ES|QL 函数及操作符

Elasticsearch：ES|QL 函数及操作符

如果你对 ES|QL 还不是很熟悉的话&#xff0c;请阅读之前的文章 “Elasticsearch&#xff1a;ES|QL 查询语言简介​​​​​​​”。ES|QL 提供了一整套用于处理数据的函数和运算符。 功能分为以下几类&#xff1a; 目录 ES|QL 聚合函数 AVG COUNT COUNT_DISTINCT 计数为近…
阅读更多...
G1264 0.85 V 启动，12uA，同步 DC/DC 变换器

G1264 0.85 V 启动，12uA，同步 DC/DC 变换器

G1264 0.85 V 启动&#xff0c;12uA&#xff0c;同步 DC/DC 变换器 概述&#xff1a; G1264集成 PFM 模式同步升压变换器&#xff0c;只需要一个电感和两个电容。由于升压专有设计&#xff0c;它启动在非常低的输入电压下降到850毫伏&#xff0c;使其成为单电池碱性/镍氢电池操…
阅读更多...
Flink Flink中的合流

Flink Flink中的合流

一、Flink中的基本合流操作 在实际应用中&#xff0c;我们经常会遇到来源不同的多条流&#xff0c;需要将它们的数据进行联合处理。所以 Flink 中合流的操作会更加普遍&#xff0c;对应的 API 也更加丰富。 二、联合&#xff08;Union&#xff09; 最简单的合流操作&#xf…
阅读更多...
深入Android S (12.0) 探索Framework之输入系统IMS的构成与启动

深入Android S (12.0) 探索Framework之输入系统IMS的构成与启动

文章目录 前言一、输入系统的基本组成部分二、输入系统相关源码分析1、IMS 构建1.1、SystemServer # startOtherServices()1.2、InputManagerService1.3、NativeInputManager # nativeInit()1.4、NativeInputManager1.5、InputManager1.6、InputDispatcher1.7、InputReader1.8、…
阅读更多...
io基础入门

io基础入门

压缩的封装 参考&#xff1a;https://blog.csdn.net/qq_29897369/article/details/120407125?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-120407125-blog-120163063.235v38pc_relevant_sort_base3&spm1001.2101.3001.…
阅读更多...
6 新建工程——寄存器

6 新建工程——寄存器

文章目录 6.1 本地新建工程文件夹6.2 新建工程6.2.1 选择CPU型号6.2.2 在线添加库文件6.2.3 添加文件6.2.4 复制存储器分配文件6.2.5 配置选项卡6.2.5.1 Linker6.2.5.2 Target6.2.5.3 Output 选项卡6.2.5.4 Listing 选项卡6.2.6 下载器配置 版本说明&#xff1a;MDK5.24 6.1 本…
阅读更多...
数据结构（三）——算法和算法分析

数据结构（三）——算法和算法分析

&#x1f600;前言 数据结构和算法是计算机科学领域中至关重要的概念。它们为解决实际问题提供了有效的方法和步骤。算法作为解决问题的方法和步骤&#xff0c;在计算机中以指令的有限序列的形式表达。本文将介绍算法的定义、描述和程序设计等方面的内容&#xff0c;帮助您深入…
阅读更多...
【Redisson】基于自定义注解的Redisson分布式锁实现

【Redisson】基于自定义注解的Redisson分布式锁实现

前言 在项目中&#xff0c;经常需要使用Redisson分布式锁来保证并发操作的安全性。在未引入基于注解的分布式锁之前&#xff0c;我们需要手动编写获取锁、判断锁、释放锁的逻辑&#xff0c;导致代码重复且冗长。为了简化这一过程&#xff0c;我们引入了基于注解的分布式锁&…
阅读更多...
目标检测——Faster R-CNN算法解读

目标检测——Faster R-CNN算法解读

论文&#xff1a;Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks 作者&#xff1a;Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun 链接&#xff1a;https://arxiv.org/abs/1506.01497 代码&#xff1a;https://github.com/rbgirsh…
阅读更多...
sqli-labs靶场详解(less17-less22)

sqli-labs靶场详解(less17-less22)

目录 less-17 less-18 less-19 less-20 less-21 less-22 less-17 修改密码关卡 服务器后端 账号密码都存在数据库中 使用UPDATE进行修改密码 尝试username处 尝试好久尝试不出来应该是对用户名进行了过滤 于是对password进行注入 判断注入点 passwdadmin 报错&#xff1a…
阅读更多...
CentOS 7 部署 MariaDB 的 2 种方法

CentOS 7 部署 MariaDB 的 2 种方法

有两种安装 MariaDB 服务器的方法。您可以安装 CentOS 7 存储库中可用的默认版本&#xff0c;也可以通过手动添加 MariaDB 存储库来安装最新版本。 如果安装过MariaDB或MySQL&#xff0c;使用以下命令彻底删除它们: yum remove mariadb* yum remove mysql* 方法一: 使用 Yum…
阅读更多...
安卓开发学习---kotlin版---笔记（一）

安卓开发学习---kotlin版---笔记（一）

Hello word 前言&#xff1a;上次学习安卓&#xff0c;学了Java开发&#xff0c;简单的搭了几个安卓界面。这次要学习Kotlin语言&#xff0c;然后开发安卓&#xff0c;趁着还年轻&#xff0c;学点新东西&#xff0c;坚持~ 未来的你会感谢现在努力的你~ 主要学习资料&#xff1a…
阅读更多...
15、 深度学习之正向传播和反向传播

15、 深度学习之正向传播和反向传播

上一节介绍了训练和推理的概念，这一节接着训练和推理的概念讲一下，神经网络的正向传播和反向传播。 其实单看正向传播和反向传播这两个概念，很好理解。 正向传播（Forward Propagation）是指从输入层到输出层的数据流动过程，而反向传播（Backpropagation）是指数据从输出…
阅读更多...
30秒搞定一个属于你的问答机器人，快速抓取网站内容

30秒搞定一个属于你的问答机器人，快速抓取网站内容

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 文章目录 简介运行效果GitHub地址 简介 爬取一个网站的内容&#xff0c;然后让这个内容变成你自己的私有知识库&#xff0c;并且还可以搭建一个基于私有知识库的问…
阅读更多...
IDEA下载和安装

IDEA下载和安装

IDEA的下载和安装 一、概述 IDEA全称IntelliJ IDEA&#xff0c;是用于Java语言开发的集成环境&#xff0c;它是业界公认的目前用于Java程序开发最好的工具。 集成环境&#xff1a;把代码编写&#xff0c;编译&#xff0c;执行&#xff0c;调试等多种功能综合到一起的开发工具…
阅读更多...
光伏测算工具能测量哪些数据？

光伏测算工具能测量哪些数据？

光伏测算工具在光伏电站的设计和规划过程中起着至关重要的作用。它们可以测量并分析一系列关键数据&#xff0c;以确保光伏电站的顺利建设和高效运营。本文将详细介绍光伏测算工具能测量的主要数据。 一、太阳能资源评估 光伏测算工具可以对场地的太阳能资源进行评估。这包括测…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023