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.hqwc.cn/news/223467.html

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

相关文章

【Linux】 file命令使用

【Linux】 file命令使用

file命令 file命令用于辨识文件类型。 语法 file [参数] [文件名] who命令 -Linux手册页 命令选项及作用 执行令 file --help 执行命令结果 参数 -b 　列出辨识结果时&#xff0c;不显示文件名称&#xff1b;-i&#xff1a;显示MIME类型&#xff1b;-z&#xff1a;对…
阅读更多...
Redis与Mysql的数据强一致性方案

Redis与Mysql的数据强一致性方案

目的 Redis和Msql来保持数据同步&#xff0c;并且强一致&#xff0c;以此来提高对应接口的响应速度&#xff0c;刚开始考虑是用mybatis的二级缓存&#xff0c;发现坑不少&#xff0c;于是决定自己搞 要关注的问题点 操作数据必须是唯一索引 如果更新数据不是唯一索引&#…
阅读更多...
C语言：输出所有“水仙花数”。“水仙花数”是指一个3位数，其各位数字的立方和等于该数本身，如153=1^3 +5^3+3^3

C语言：输出所有“水仙花数”。“水仙花数”是指一个3位数，其各位数字的立方和等于该数本身，如153=1^3 +5^3+3^3

分析&#xff1a; 在主函数 main 中&#xff0c;程序首先定义四个整型变量 m、a、b 和 c&#xff0c;并用于计算和判断水仙花数。然后使用 printf 函数输出提示信息。 接下来&#xff0c;程序使用 for 循环结构&#xff0c;从 100 到 999 遍历所有三位数。对于每个遍历到的数 m…
阅读更多...
避免手机无节制使用

避免手机无节制使用

手机使用情况分析 使用时间 我挑选了11月份某一周的统计数据&#xff0c;可以看到&#xff0c;我的日均手机手机时间达到了惊人的8个小时&#xff0c;每周总共余约57小时。 按照使用软件的类型来分类&#xff0c;其中约%50用于娱乐&#xff0c;主要使用软件为&#xff1a;哔哩…
阅读更多...
体育网站的技术 SEO：完整指南

体育网站的技术 SEO：完整指南

您熟悉体育网站管理行业的快节奏、不断变化的性质。您的网站提供最新的体育新闻和信息&#xff0c;包括实时比分更新。但是&#xff0c;如果人们不容易找到它&#xff0c;那么你所有的精彩内容都是徒劳的。这就是体育网站技术 SEO 综合指南的用武之地&#xff01; 本指南将教您…
阅读更多...
Day49：647. 回文子串、516.最长回文子序列

Day49：647. 回文子串、516.最长回文子序列

文章目录 647. 回文子串思路代码实现 516.最长回文子序列思路代码实现 647. 回文子串 题目链接 思路 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 布尔类型的dp[i][j]&#xff1a;表示区间范围[i,j] &#xff08;注意是左闭右闭&#xff09;的子串是否是回文…
阅读更多...
APP测试的测试内容有哪些，常见的Bug分类介绍！

APP测试的测试内容有哪些，常见的Bug分类介绍！

对于产品的手机项目&#xff08;应用软件&#xff09;&#xff0c;主要是进行系统测试。而针对手机应用软件APP的系统测试&#xff0c;我们通常从如下几个角度开展&#xff1a;功能模块测试、兼容性测试、安装和卸载测试、软件更新测试、性能测试、用户体验性测试、交叉事件测试…
阅读更多...
Unity2D-URP基于ShaderGraph创建带粒子特效的激光光束

Unity2D-URP基于ShaderGraph创建带粒子特效的激光光束

文章目录 创建Shader新建Node: UV新建Node: Split......参数说明 基于Shader创建Material创建Line创建粒子系统StartVFX创建粒子材质更改粒子系统的材质设置透明模式设置粒子效果创建一个Beam设置EndVFX效果预览激光光束管理脚本最终预览 创建Shader Create --> Shader Gra…
阅读更多...
[C/C++]数据结构 堆排序(详细图解)

[C/C++]数据结构 堆排序(详细图解)

一:前言 在[C/C]数据结构 堆的详解中,介绍了什么是堆,并且完成了堆的实现和一系列接口,包括向上调整法和向下调整法等,接下来小编介绍一个有点量级的排序方法------堆排序,时间复杂度为O(n*lgn) 二:堆排序详解 2.1 方法介绍 1.首先将待排序数组建为大堆,此时堆顶元素就为数组…
阅读更多...
Vue框架学习笔记——侦听（监视）属性watch：天气案例+immediate+deep深度监听

Vue框架学习笔记——侦听（监视）属性watch：天气案例+immediate+deep深度监听

文章目录 前文提要天气案例描述样例代码呈现效果&#xff1a;事件的响应中可以写一些简单的语句&#xff08;不推荐&#xff09; 侦听&#xff08;监视&#xff09;属性watch结合天气案例的第一种写法&#xff08;New Vue&#xff09;immediate&#xff1a; 侦听&#xff08;监…
阅读更多...
解决Linux中文乱码、字体横向问题

解决Linux中文乱码、字体横向问题

解决Linux中文乱码问题 1、locale --查看当先系统编码集 2、echo $LANG --查看当前使用的语言 3、vim ~/.bash_profile --修改配置文件 4、加入以下语句 export LC_ALL"zh_CN.UTF-8" export LANG"zh_CN.UTF-8" 5、source ~/.bash_profile --更新配置文…
阅读更多...
矩阵置零[中等]

矩阵置零[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个m x n的矩阵&#xff0c;如果一个元素为0&#xff0c;则将其所在行和列的所有元素都设为0。请使用原地算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023