2022年最火的前端Web組態視覺化工具

Sovit資料視覺化研究猿發表於2022-05-11

隨著大資料、物聯網的快速發展,系統視覺化需求也越來越大,本文整理幾個目前最火也是最常用的前端視覺化Web組態開發工具。

mxgraph

介紹:免費的開源工具,需要解決的問題很多,國內學習參考資料少。但是,視覺化組態的實現基本都是藉助於這個框架。

演示Demo: Grapheditor

mxgraph官方文件API: mxCell

最大的交流社群: Diagram Software and Flowchart Maker

交流社群2: Newest 'mxgraph' Questions

github: GitHub - jgraph/mxgraph: mxGraph is a fully client side JavaScript diagramming library

效果:

2022年最火的前端Web組態視覺化工具

Sovit2D

Sovit2D視覺化開發工具,平臺提供免費個人版可以試用,該產品可靈活、快捷地製作各類互動式常規屏和大屏視覺化,內建百餘種炫酷元件和元件動畫效果,得到更形象、更直觀的視覺化呈現。動畫效果的設計是它的一大特點。這是目前其它同類產品不具有的。另外該公司還研發了SovitChart產品,它是一套專注於製作視覺化圖表的軟體系統。它是基於Echarts開源API研發了一套基於圖表視覺化介面開發系統,使用者只要通過滑鼠拖拉控制元件就能設計出精美的圖表視覺化web頁面,同時可以方便的與後端資料進行繫結,實現資料驅動頁面的變化,實現炫酷的圖表展示。

官網演示demo: http:///demo.html

Sovit2D官方文件API:  http:///document.html

效果

XX電場主接線圖:

2022年最火的前端Web組態視覺化工具

煤礦採煤實時監控:

2022年最火的前端Web組態視覺化工具

le5le-topology

介紹:A diagram (topology, UML) framework uses canvas and typescript. 一個用canvas+typescript寫的繪圖【核心庫,不依賴框架】(微服務架構圖、拓撲圖、流程圖、類圖等ULM圖,動畫、視訊支援)。本框架目前已經實現了拖拽、縮放、旋轉、自定義屬性等基礎操作,開發者只用關心圖表繪畫實現即可。其次,流暢、高效能 - 使用 canvas 和多個場景離屏,操作過程流暢;完全不用擔心 SVG 方式 dom 元素過多,效能高效。其三,自帶部分動畫效果,能滿足基本的需求。使用TypeScript語言。chrome、firefox、ie11等瀏覽器是沒有問題的。IE9以下版本沒有測試,僅僅是繪圖引擎,只需要支援canvas+html5標準即可

演示Demo: 樂吾樂Topology - 基於開源的免費視覺化繪圖工具

github: GitHub - le5le-com/topology: A diagram (topology, UML) framework uses canvas and typescript

效果:

2022年最火的前端Web組態視覺化工具

draw.io

介紹:和mxgraph相比,在其基礎上加了一些東西,更加完善。但是都是出自同一家公司之手。

演示Demo: Flowchart Maker & Online Diagram Software

github: GitHub - jgraph/drawio: Source to app.diagrams.net

社群部落格: Blog

效果:

2022年最火的前端Web組態視覺化工具

HT-2D/3D

介紹:圖撲軟體專注於資料視覺化Web組態開發,致力於工業組態建設。

演示demo: 構建先進 2D 和 3D 視覺化所需要的一切

社群部落格: 圖撲軟體 - 資料視覺化部落格

效果:

2022年最火的前端Web組態視覺化工具

前端設計Mqtt(訂閱、釋出)

參考:

OSHMI

介紹:適用於變電站,物聯網和自動化應用的移動和雲友好型SCADA HMI。

github: GitHub - riclolsen/OSHMI: SCADA HMI for substations and automation applications.

官網: Open Substation HMI

部落格: (被牆)

圖形參考來源1: https:///search?dates=any&format=search&page=1&query=%E5%B7%A5%E4%B8%9A&sort=popular

效果:

2022年最火的前端Web組態視覺化工具

HslControls控制元件庫

介紹:HslControls是一個工業物聯網的控制元件庫,基於C#開發,配套HslCommunication元件可以實現工業上位機軟體的快速開發,支援常用的工業圖形化控制元件,快速的整合介面開發。 主要包含了按鈕,開關,進度條,訊號燈,數碼管,時鐘,曲線顯示控制元件,儀表盤控制元件,管道控制元件,瓶子控制元件,餅圖控制元件,傳送帶控制元件,溫度計控制元件,鼓風機控制元件,閥門控制元件,電池控制元件等等。

github:

部落格: HslCommunication元件庫使用說明 - dathlin - 部落格園

注意:前端主要是JavaScript語言開發,c#我也不懂,只是做參考,看看人家的思路啥的。

效果:

2022年最火的前端Web組態視覺化工具

VUE組態-支援拖動

介紹:個人基於vue+quasar的web組態,核心程式碼基於vue,quasar僅僅是為了方便構建

github: WebTopo

演示Demo: WebTopo

部落格: 部落格地址

效果:

2022年最火的前端Web組態視覺化工具

WTScada HTML5組態百軟度件

介紹:基於HT框架的web組態軟體,HTML5技術,道線上專組態運屬行.

演示Demo: WTScada組態軟體

效果:

2022年最火的前端Web組態視覺化工具

WebGL

介紹:WebGL是目前最為流行的3D繪圖協議

WVGL

介紹:V虛擬現實行業


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70014953/viewspace-2893581/,如需轉載,請註明出處,否則將追究法律責任。

相關文章