隨著大資料、物聯網的快速發展，系統視覺化需求也越來越大，本文整理幾個目前最火也是最常用的前端視覺化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

效果：

Sovit2D

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

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

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

效果

XX電場主接線圖：

煤礦採煤實時監控：

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

效果：

draw.io

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

演示Demo： Flowchart Maker & Online Diagram Software

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

社群部落格： Blog

效果：

HT-2D/3D

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

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

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

效果：

前端設計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

效果：

HslControls控制元件庫

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

github：

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

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

效果：