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

效果如下:

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

主要技能：

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

實(shí)現(xiàn)方法：

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

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

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

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

Flask是一個(gè)使用Python編寫(xiě)的輕量級(jí)Web應(yīng)用框架；

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

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

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

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

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

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

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

小編設(shè)計(jì)一簡(jiǎn)易Demo，效果如下：

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