监控大屏可视化02(3.8)

在网上搜索下，可以看到有不少专门做监控大屏可视化解决方案的，包括一些好的报表平台软件，也专门对监控大屏可视化做了优化，能够很好的做到定制和可配置。而对于监控大屏实现，当前我们完全可以采用百度Echart来定制实现，而这篇文章主要想谈下如何对监控大屏可视化做到灵活可配置。

首先我们看到监控大屏可视化，实际上跟我们前面谈到的自定义报表相当类似，其核心仍然是单面板设计，多面板组合。基于这个思路我们逐一展开进行描述。

在讲自定义报表的时候，我们单面板设计数据集和实际的数据呈现是耦合在一起的，而实际上更好的思路是数据集合数据呈现进行分离。基于这个思路，逐一展开讲关键功能点实现。

数据集设计

数据源定义，对于数据源定义，最好也进行独立，一个报表前端呈现本身也可能涉及到多个数据源。数据集设计，即返回一个二维的数据集合，可以有多列。我们需要通过配置的方式来实现，即首先选择数据源，然后自定义Sql语句，然后返回具体的数据集对象。在sql过程中我们可以对字段标题名称等进行转义。

更加解耦的方法是数据集可以直接选择具体的WS服务，由服务返回一个二维的数据集对象。这种方式可以进一步实现报表平台和底层数据库的解耦。

单面板设计

单面板设计简单来说就是将前端的呈现方式，究竟是折线图，饼图还是雷达图等，和后端的数据集进行绑定。在这个过程中重点是要确认具体的图表呈现的一些关键配置，包括X，Y轴显示，图表名称，图例是否显示等关键配置，都需要在单面板设计的是配置完成。

单面板设计完成后，最好提供预览功能按钮，可以马上体验到单面板展示的效果。

大屏设计

对于大屏设计，实际上里面又几个关键点，首先就是大屏展示需要有一个CSS模板，这个模板决定了所有的单面板图表的配色风格，包括具体的底色，前端的色系选择等。选择模板就是确保最终的大屏展示各个单面板风格能够完全保持一致。

大屏版面设计，仍然采用标准的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每个单面板你唯一要确定的就是横向跨几行，纵向跨几列即可。类似上面的图，我们采用4*4Grid进行布局，中间的地图展示则是横向跨3行，纵向跨两列。

大屏整体的展示动态刷新能力

在以上设计完成后，我们整个大屏展示效果也就出来了。在该大屏设计中我们没有考虑动态查询功能。但是大屏监控仍然需要动态进行刷新。因此在设计大屏的时候需要具备动态刷新能力，为了考虑后续具备一定的扩展性，我们需要能够将关键的一些变量参数传递到图表展示中。

最关键的参数就是当前时间，当前的时间需要能够传递到每一个数据集Sql中，方便我们根据时间进行数据过滤。同时对于大屏我们需要配置定时刷新频率，基于该频率对展示内容进行动态刷新。