前面有寫過借助Node-RED實現(xiàn)Modicon M262數(shù)據(jù)可視化呈現(xiàn)于Web的方案。

效果如下:

現(xiàn)介紹另一種通過Python實現(xiàn)PLC數(shù)據(jù)可視化呈現(xiàn)于Web端的方案。

主要技能：

Python+Flask+Bootstrap+Echarts+Modbus TCP/OPC UA

實現(xiàn)方法：

1、Python 通過Modbus TCP或OPC UA采集Modicon M580 PLC數(shù)據(jù)

M580本體以太網(wǎng)口支持Modbus TCP，可通過Python+pyModbusTCP庫實現(xiàn)數(shù)據(jù)采集；

M580可擴展BMEP582040 OPC UA模塊，可通過Python+opcua庫實現(xiàn)數(shù)據(jù)采集；

2、Python+Flask+Bootstrap+Echarts開發(fā)Web實現(xiàn)圖形化動態(tài)展現(xiàn)PLC數(shù)據(jù)

Flask是一個使用Python編寫的輕量級Web應(yīng)用框架；

設(shè)計前端頁面，編寫HTML，CSS，JS代碼 配置路由，編寫視圖函數(shù)

Bootstrap是Twitter推出的一個開源的前端開發(fā)框架；

利用Bootstrap柵格系統(tǒng)實現(xiàn)響應(yīng)式布局

Echarts是一使用JavaScript實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 和移動設(shè)備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。

Echarts提供了豐富的可視化圖形，如折線圖，柱狀圖，散點圖，餅圖，盒型圖，雷達圖，熱力圖等等；

官網(wǎng)也提供了詳細的中文教程幫助大家使用。

依賴Echarts庫可便捷地將PLC數(shù)據(jù)呈現(xiàn)于各種豐富的圖表中。

小編設(shè)計一簡易Demo，效果如下：

以上提供了一點在Web端圖形化呈現(xiàn)PLC數(shù)據(jù)的思路，歡迎感興趣的朋友交流