随着大数据、物联网的快速发展，系统可视化需求也越来越大，本文整理几个目前最火也是最常用的前端可视化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： www.sovitjs.com/demo.html

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

效果

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（订阅、发布）

参考：github.com/UsrIot/usrC…

OSHMI

介绍： 适用于变电站，物联网和自动化应用的移动和云友好型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控件库

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

github： github.com/dathlin/Hsl…

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

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

效果：