歡迎關注前端早茶，與廣東靚仔攜手共同進階
前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~
公眾號作者：廣東靚仔
前言：
有些時候，我們需要使用到可視化繪圖的編輯器。這里給大家收集了一些，如下所示。
正文：
1.mxgraph：
介紹：開源免費，但是需要解決的問題很多，國內學習參考資料少。但是，可視化組態的實現基本都是借助於這個框架來實現的。
演示demo：https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
mxgraph官方文檔API：http://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html
最大的交流社區：https://forum.jgraph.com/tags/swimlane/index.html
交流社區2：https://stackoverflow.com/questions/tagged/mxgraph
github：https://github.com/jgraph/mxgraph
效果：
2.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：http://topology.le5le.com/
github：https://github.com/le5le-com/topology
gitee：https://gitee.com/mirrors/topology
效果：
3.draw.io
介紹：和mxgraph相比，在其基礎上加了一些東西，更加完善。但是都是出自同一家公司之手。
演示demo：https://www.draw.io/
github:https://github.com/jgraph/drawio
社區博客：https://about.draw.io/blog/
效果：
4.HT-2D/3D
演示demo：http://www.hightopo.com/demo/2deditor/HT-2D-Editor.html
全部demo：http://www.hightopo.com/demos/index.html
github：圖撲軟件
社區博客：https://www.hightopo.com/blog/
效果：
3D地鐵站台：
2D電力相關：
5.3D可視化樓宇管理：
介紹：3D可視化樓宇管理系統，實時監測樓宇相關的各方面的數據。提到工業互聯網往往會涉及：物聯網、IoT、5G、數字孿生、邊緣計算、PaaS平台、SaaS應用、產業互聯網、互聯網+、工業4.0、智慧城市、智慧園區、智慧樓宇、智能制造等概念，但本文將圍繞可視化的話題，圍繞更基礎的 HTML5/WebGL/WebVR 等底層技術，我們覺得業界還沒達到智能化、平台化的成熟階段，走得太快即使是 GE Predix 也會從明星變流星，了解垂直行業需求，采集足夠多有效數據，做好實時的、穩定的、美觀的、Web 化的 2D 和 3D 數據可視化呈現，是工業互聯網需要走好的第一步。
演示demo:http://www.hightopo.com/demo/ht-smart-building/
github：圖撲軟件
效果：
6、前端設計Mqtt（訂閱、發布）
參考：https://github.com/UsrIot/usrCloudDemo_js/blob/master/web/mqttws31.js
7.OSHMI
效果：
介紹：適用於變電站，物聯網和自動化應用的移動和雲友好型SCADA HMI。
github:https://github.com/riclolsen/OSHMI
官網：https://oshmiopensubstationhmi.sourceforge.io/
博客：http://ricolsen1supervc.wordpress.com（被牆）
圖形參考來源1：https://www.freepik.com/search?dates=any&format=search&page=1&query=%E5%B7%A5%E4%B8%9A&sort=popular
8.HslControls控件庫
效果：
介紹：HslControls是一個工業物聯網的控件庫，基於C#開發，配套HslCommunication組件可以實現工業上位機軟件的快速開發，支持常用的工業圖形化控件，快速的集成界面開發。 主要包含了按鈕，開關，進度條，信號燈，數碼管，時鍾，曲線顯示控件，儀表盤控件，管道控件，瓶子控件，餅圖控件，傳送帶控件，溫度計控件，鼓風機控件，閥門控件，電池控件等等。
開發語言：c#
github：https://github.com/dathlin/HslControlsDemo
博客：https://www.cnblogs.com/dathlin/p/7703805.html
注意：前端主要是JavaScript語言開發，c#我也不懂，只是做參考，看看人家的思路啥的。
9.VUE組態-支持拖動
效果：
介紹：個人基於vue+quasar的web組態，核心代碼基於vue，quasar僅僅是為了方便構建
github預覽訪問如下地址：https://phynos.github.io/WebTopo/dist/spa
demo：https://phynos.github.io/WebTopo/dist/spa/
github：https://github.com/phynos/WebTopo
博客：https://bloghttps://github.com/phynos/WebTopo.csdn.net/lpch1987/article/details/96288974
10.WTScada HTML5組態百軟度件
效果：
介紹：基於HT框架的web組態軟件，HTML5技術，道在線專組態運屬行.
demo：http://www.wtscada.com/scada/
github：暫無
11、WebGL
介紹：WebGL是目前最為流行的3D繪圖協議
12、WVGL
介紹：V虛擬現實行業
參考文章：
1.基於web組態軟件 關於組態軟件的設計與開發
2.組態軟件認識
關注我，一起攜手進階
前端技術公眾號
如果這篇文章有幫到你，歡迎關注前端早茶，與廣東靚仔攜手共同進階～