随着大数据、物联网的快速发展，系统可视化需求也越来越大，本文整理几个目前最火也是最常用的前端可视化Web组态开发工具。

介绍： 免费的开源工具，需要解决的问题很多，国内学习参考资料少。但是，可视化组态的实现基本都是借助于这个框架。

演示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可视化开发工具，平台提供免费个人版可以试用，该产品可灵活、快捷地制作各类交互式常规屏和大屏可视化，内置百余种炫酷组件和组件动画效果，得到更形象、更直观的可视化呈现。动画效果的设计是它的一大特点。这是目前其它同类产品不具有的。另外该公司还研发了SovitChart产品，它是一套专注于制作可视化图表的软件系统。它是基于Echarts开源API研发了一套基于图表可视化界面开发系统，用户只要通过鼠标拖拉控件就能设计出精美的图表可视化web页面，同时可以方便的与后端数据进行绑定，实现数据驱动页面的变化，实现炫酷的图表展示。

官网演示demo： ​​www.sovitjs.com/demo.html​​

Sovit2D官方文档API： ​​www.sovitjs.com/document.ht…​​

效果

XX电场主接线图：

煤矿采煤实时监控：

介绍： 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​​

效果：

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

演示Demo： ​​Flowchart Maker & Online Diagram Software​​

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

社区博客： ​​Blog​​

效果：

介绍： 图扑软件专注于数据可视化Web组态开发，致力于工业组态建设。

演示demo： ​​构建先进 2D 和 3D 可视化所需要的一切​​

社区博客： ​​图扑软件 - 数据可视化博客​​

效果：

参考：​​github.com/UsrIot/usrC…​​

介绍： 适用于变电站，物联网和自动化应用的移动和云友好型SCADA HMI。

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

官网： ​​Open Substation HMI​​

博客： ​​ricolsen1supervc.wordpress.com​​（被墙）

图形参考来源1： ​​www.freepik.com/search?date…​​

效果：

介绍： HslControls是一个工业物联网的控件库，基于C#开发，配套HslCommunication组件可以实现工业上位机软件的快速开发，支持常用的工业图形化控件，快速的集成界面开发。 主要包含了按钮，开关，进度条，信号灯，数码管，时钟，曲线显示控件，仪表盘控件，管道控件，瓶子控件，饼图控件，传送带控件，温度计控件，鼓风机控件，阀门控件，电池控件等等。

github： ​​github.com/dathlin/Hsl…​​

博客： ​​HslCommunication组件库使用说明 - dathlin - 博客园​​

注意： 前端主要是JavaScript语言开发，c#我也不懂，只是做参考，看看人家的思路啥的。

效果：

介绍： 个人基于vue+quasar的web组态，核心代码基于vue，quasar仅仅是为了方便构建

github： ​​WebTopo​​

演示Demo： ​​WebTopo​​

博客： ​​博客地址​​

效果：

介绍： 基于HT框架的web组态软件，HTML5技术，道在线专组态运属行.

演示Demo： ​​WTScada组态软件​​

效果：

介绍： WebGL是目前最为流行的3D绘图协议

介绍： V虚拟现实行业