TwinCAT HMI Echart實(shí)現(xiàn)顯示24小時(shí)數(shù)據(jù)

第1頁(yè)TwinCATTwinCATHMIEchart實(shí)現(xiàn)顯示24小時(shí)數(shù)據(jù)作者：范小軍職務(wù)：風(fēng)電部技術(shù)工程師公司：BECKHOFF中國(guó)郵箱：x.fan@日期：2022-12-26摘要：顯示24小時(shí)數(shù)據(jù)的波形圖，兩種方式進(jìn)行顯示，plc代碼中提供單個(gè)的數(shù)據(jù)，在js代碼中進(jìn)行數(shù)據(jù)處理，這樣顯示的數(shù)據(jù)在HMI界面加載的數(shù)據(jù)就是從0開(kāi)始然后再加載，第二種方式是通過(guò)plc代碼中的數(shù)組去實(shí)現(xiàn)。附件：序號(hào)文件名備注1Echart顯示24小時(shí)數(shù)據(jù).zip例程匯總2TcHmiProject_Linechart2.zip2.2節(jié)例程3TcHmiProject_Linechart3.zip2.3節(jié)例程歷史版本：免責(zé)聲明：我們已對(duì)本文檔描述的內(nèi)容做測(cè)試。但是差錯(cuò)在所難免，無(wú)法保證絕對(duì)正確并完全滿(mǎn)足您的使用需求。本文檔的內(nèi)容可能隨時(shí)更新，如有改動(dòng)，恕不事先通知，也歡迎您提出改進(jìn)建議。參考信息：目錄1. 方式一：通過(guò)js處理數(shù)據(jù)然后顯示 32. 方式二：通過(guò)plc代碼實(shí)現(xiàn) 62.1. PLC代碼處理 62.2. Js代碼通過(guò)計(jì)時(shí)器實(shí)現(xiàn) 72.3. Js代碼通過(guò)watch實(shí)現(xiàn) 9

方式一：通過(guò)js處理數(shù)據(jù)然后顯示通過(guò)js語(yǔ)言實(shí)現(xiàn)，將plc采集的數(shù)據(jù)通過(guò)數(shù)組的移位進(jìn)行處理，首先移位然后再進(jìn)行數(shù)據(jù)的壓棧操作實(shí)習(xí)數(shù)據(jù)的動(dòng)態(tài)顯示。varchartDom=document.getElementById('TcHmiContainer');varmyChart=echarts.init(chartDom);varoption;varPLCvalue2;varPLCvalue1;varXname=[];vardata=[];vardata1=[];varcounter=0;vardataname;for(vari=0;i<1440;i++){//初始化x軸的數(shù)據(jù)，可以根據(jù)實(shí)際情況設(shè)置1440數(shù)值的大小設(shè)置x軸坐標(biāo)顯示的。vard=newDate();Xname[i]=d.getHours()+':'+d.getMinutes();data[i]=0;//sy;ValMath.random()*21;data1[i]=0;}varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.Power1%/s%');vardestroySymbol=symbol.watch(function(data){if(data.error===TcHmi.Errors.NONE){//Handleresultvalue...PLCvalue1=data.value;//console.log(value);}else{//Handleerror...}//Stopwatchinline//data.destroy();//Callthedestroyfunctioninlinetostopthewatchandfreeresources.});varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.Power2%/s%');vardestroySymbol=symbol.watch(function(data){if(data.error===TcHmi.Errors.NONE){//Handleresultvalue...PLCvalue2=data.value;//console.log(value);}else{//Handleerror...}//Stopwatchinline//data.destroy();//Callthedestroyfunctioninlinetostopthewatchandfreeresources.});option={title:{text:'功率曲線(xiàn)'},tooltip:{trigger:'axis'},legend:{data:['功率1','功率2']},grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},//toolbox:{//feature:{//saveAsImage:{}//}//},dataZoom:[{show:true,realtime:true,start:80,end:100},{type:'inside',realtime:true,start:65,end:85}],xAxis:{type:'category',boundaryGap:false,data:Xname},yAxis:{type:'value'},series:[{name:'功率1',type:'line',//stack:'Total',data:data,smooth:true},{name:'功率2',type:'line',//stack:'Total',data:data1,smooth:true,}]};intervalId=setInterval(function(){vard=newDate();Xname.shift();Xname.push(d.getHours()+':'+d.getMinutes());data.shift();data.push(PLCvalue1);data1.shift();data1.push(PLCvalue2);myChart.setOption({series:[{data:data},{data:data1}]});//myChart.setOption(option);},1000);方式二：通過(guò)plc代碼實(shí)現(xiàn)在PLC中將數(shù)據(jù)進(jìn)行處理，然后直接再Echart圖表中顯示。PLC代碼處理PROGRAMMAINVARPower1:LREAL; Power2:LREAL; bBoolAT%Q*:BOOL; counter:INT; yAxis:ARRAY[0..99]OFREAL; XAxis:ARRAY[0..99]OFSTRING; myGETSYSTEMTIME:GETSYSTEMTIME; myFileTime :T_FILETIME;(*獲取格林威治時(shí)間后要加上時(shí)區(qū)的偏移，部分國(guó)家還存在夏令時(shí)調(diào)整*) myFileTime_ul:T_LARGE_INTEGER; myCurTime :Timestruct; myCurDT :DT; ul_8h:T_LARGE_INTEGER:=(dwHighPart:=16#43,dwLowPart:=16#0E234000);(*8hourstimezone*) TimeStamp:STRING(60); TimeStamp1:STRING(20); TimewHour:STRING(10); TimewMinute:STRING(10); TimewSecond:STRING(10); ton1:Tc2_Standard.TON;END_VARTimewHour:=WORD_TO_STRING(myCurTime.wHour);//myCurTimeWORD_TO_STRINGTimewMinute:=WORD_TO_STRING(myCurTime.wMinute);TimewSecond:=WORD_TO_STRING(myCurTime.wSecond);TimeStamp1:=CONCAT(TimewHour,':');TimeStamp1:=CONCAT(TimeStamp1,TimewMinute);TimeStamp1:=CONCAT(TimeStamp1,':');TimeStamp1:=CONCAT(TimeStamp1,TimewSecond);counter:=counter+1;Power1:=Power1+0.1;IFPower1>100THEN Power1:=0;END_IFPower2:=Power2+0.2;IFPower2>100THEN Power2:=0;END_IFton1(IN:=TRUE,PT:=T#1S,Q=>,ET=>);//實(shí)現(xiàn)數(shù)據(jù)的1s移位1次IFton1.QTHEN XAxis[99]:=TimeStamp1; yAxis[99]:=Power2; FORi:=0TO98DO yAxis[i]:=yAxis[i+1]; XAxis[i]:=XAxis[i+1]; END_FOR ton1(IN:=FALSE,PT:=T#1S,Q=>,ET=>);END_IFJs代碼通過(guò)計(jì)時(shí)器實(shí)現(xiàn)varchartDom=document.getElementById('TcHmiContainer_10');varmyChart=echarts.init(chartDom);varoption;varXname=[];vardata1=[];/////for(vari=0;i<100;i++){//vard=newDate();///Xname[i]=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();//data[i]=0;//sy;ValMath.random()*21;//data1[i]=0;///}%s%PLC1.MAIN.XAxis%/s%//%s%PLC1.MAIN.aPoints%/s%varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.XAxis%/s%');vardestroySymbol=symbol.watch(function(data){if(data.error===TcHmi.Errors.NONE){//Handleresultvalue...Xname=data.value;//console.log(value);}else{//Handleerror...}//Stopwatchinline//data.destroy();//Callthedestroyfunctioninlinetostopthewatchandfreeresources.});varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.yAxis%/s%');vardestroySymbol=symbol.watch(function(data){if(data.error===TcHmi.Errors.NONE){//Handleresultvalue...data1=data.value;//console.log(value);}else{//Handleerror...}//Stopwatchinline//data.destroy();//Callthedestroyfunctioninlinetostopthewatchandfreeresources.});option={title:{text:'風(fēng)速（m/s）'},tooltip:{trigger:'axis'},grid:{left:'2%',right:'2%',bottom:'0%',containLabel:true},xAxis:{type:'category',boundaryGap:false,data:Xname},yAxis:{min:0,//取0為最小刻度max:100,//取100為最大刻度type:'value'},series:[{name:'功率1',type:'line',//stack:'Total',data:data1,smooth:true},]};intervalId=setInterval(function(){myChart.setOption({xAxis:{data:Xname},series:[{data:data1}]});//myChart.setOption(option);},1000);option&&myChart.setOption(option);Js代碼通過(guò)watch實(shí)現(xiàn)varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.yAxis%/s%');vardestroySymbol=symbol.watch(function(data){if(data.error===TcHmi.Errors.NONE){//Handleresultvalue...data1=data.value;myChart.setOption({xAxis:{data:Xname},series:[{data:data1}]});//console.log(value);}else{//Handleerror...}//Stopwatchinline//data.destroy();//Callthedestroyfunctioninlinetostopthewatchandfreeresources.});具體代碼如下：varchartDom=document.getElementById('TcHmiContainer_10');varmyChart=echarts.init(chartDom);varoption;varXname=[];vardata1=[];/////for(vari=0;i<100;i++){//vard=newDate();///Xname[i]=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();//data[i]=0;//sy;ValMath.random()*21;//data1[i]=0;///}%s%PLC1.MAIN.XAxis%/s%//%s%PLC1.MAIN.aPoints%/s%varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.XAxis%/s%');vardestroySymbol=symbol.watch(function(data){if(data.error===TcHmi.Errors.NONE){//Handleresultvalue...Xname=data.value;//console.log(value);}else{//Handleerror...}//Stopwatchinline//data.destroy();//Callthedestroyfunctioninlinetostopthewatchandfreeresources.});option={title:{text:'風(fēng)速（m/s）'},tooltip:{trigger:'axis'},grid:{left:'2%',right:'2%',bottom:'0%',containLabel:true},xAxis:{type:'category',boundaryGap:false,data:Xname},yAxis:{min:0,//取0為最小刻度max:100,//取100為最大刻度type:'value'},series:[{name:'功率1',type:'line',//stack:'Total',data:data1,smooth:true},]};varsymbol=newTcHmi.Symbol('%s%PLC1.MAIN.yAxis%/s%');vard