数据可视化-监控大屏呈现和拓扑图绘制工具总结( 四 ) 在日常项目建设和实施过程中

GoJS是一套基于JavaScript的付费图形绘制工具库，地址：
这套工具库有免费版本，也有收费版本，收费版本比jsPlumb工具库来说就强大了很多，特别是动态Port图和动态分组图，这两个用来绘制我们集成架构图，应用架构图等都相当有用。

Dynamic Ports：Dynamically add ports and custom link routing. USe data-bindings to save and load routes within the Model JSON.
Dynamic Grouping：Use groups as containers and subgraphs, with group members bounds by their own rules and layouts.

文章插图
所有Demo演示地址参考：
JointJS工具库
这个也是常用的绘图工具库，地址在：
这个库官方介绍的例子都感觉比较重，而实际其它搜索到的一些使用介绍来看，用于简单从集成架构图，流程图类绘制还是没有太大问题的。基本还是标准的新建画板，画布，然后进行各种图形的定义和绘制。
jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON ，也能通过JSON配置导入直接生成图形。由于这个工具库是基于SVG的，因此也不太推荐使用。
一篇使用参考：
监控大屏的可视化

文章插图
Quick V 是一套数据可视化大屏展示方案。在大数据时代， Quick V 将数据全面、直观地呈现在用户眼前，帮助管理者在面临业务复杂度的急剧变化时，即刻拥有海量有序的决策支持信息，满足会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。
参考：
大家可以先看下上面这个大屏可视化效果，感觉整体还是做的相当不错。这个工具本身商用收费，比较好的就是对于我们常见的大屏监控已经固化为各种模板，基本都可以直接使用。
基于百度Echart自己实现可配置的监控大屏

文章插图
在前面我也谈到，实际上对于监控大屏实现，当前我们完全可以采用百度Echart来定制实现，而这篇文章主要想谈下如何对监控大屏可视化做到灵活可配置。
首先我们看到监控大屏可视化，实际上跟我们前面谈到的自定义报表相当类似，其核心仍然是单面板设计，多面板组合。基于这个思路我们逐一展开进行描述。
在讲自定义报表的时候，我们单面板设计数据集和实际的数据呈现是耦合在一起的，而实际上更好的思路是数据集和数据呈现进行分离。基于这个思路，逐一展开讲关键功能点实现。
数据集设计
数据源定义，对于数据源定义，最好也进行独立，一个报表前端呈现本身也可能涉及到多个数据源。数据集设计，即返回一个二维的数据集合，可以有多列。我们需要通过配置的方式来实现，即首先选择数据源，然后自定义Sql语句，然后返回具体的数据集对象。在sql过程中我们可以对字段标题名称等进行转义。
更加解耦的方法是数据集可以直接选择具体的WS服务，由服务返回一个二维的数据集对象。这种方式可以进一步实现报表平台和底层数据库的解耦。
单面板设计
单面板设计简单来说就是将前端的呈现方式，究竟是折线图，饼图还是雷达图等，和后端的数据集进行绑定。在这个过程中重点是要确认具体的图表呈现的一些关键配置，包括X ， Y轴显示，图表名称，图例是否显示等关键配置，都需要在单面板设计的是配置完成。
单面板设计完成后，最好提供预览功能按钮，可以马上体验到单面板展示的效果。