什么是网站建设技术,个人建个网站多少钱,商品列表html模板,企业网站建设品牌在做工厂智能化生产看板时#xff0c;绝对会有设备状态看板#xff0c;展示设备当天或者当前状态#xff0c;设备状态数据一般是有mes 系统设备管理模块对设备信息进行采集#xff0c;一般包括过站数据#xff0c;设备当前状态#xff0c;是否在线是否故障、检修、待生产… 在做工厂智能化生产看板时绝对会有设备状态看板展示设备当天或者当前状态设备状态数据一般是有mes 系统设备管理模块对设备信息进行采集一般包括过站数据设备当前状态是否在线是否故障、检修、待生产、正常运行等 那么前端看板用什么展示设备当天所有状态以及状态持续的时长设备当天的运行记录 实现效果
代码
!DOCTYPE html
html
headmeta charsetUTF-8title跳转页面/titlescript typetext/javascript srcjquery.min.js asp-append-versiontrue/scriptscript typetext/javascript srcecharts.js asp-append-versiontrue/scriptscript srchttps://cdn.jsdelivr.net/npm/echarts5.2.2/dist/echarts.min.js/scriptstyle*{font-size:100px;}/style
/head
body!-- 创建容器 --div idchart stylewidth:800px;height:500px;/divscriptvar 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 日期格式前端转时间戳就不会报错。
