近期热点 新闻
可视化大屏展现
2019-03-13 14:11:26
 
当前政府做的很多项目中涉及到智慧城市、城市大脑、智能IOC运营中心等项目都会有可视化监控展现大屏要做,今天在网上专门搜索了一下,可以看到有不少专门做可视化监控展现大屏解决方案的,包括一些做好的报表展现软件平台,也有专门对可视化监控大屏做了优化的,能够很好的做到定制和配置例如:百度Echarts来定制实现,我写此文目的是想谈谈如何对监控大屏可视化做到灵活可配置。
       首先我们看到可视化监控大屏展现,其实和我们谈到的自定义报表相当类似,其核心就是单面板设计、多面板组合,基于这个思路我们可以逐一展开进行描述。其实我们谈的自定义报表,更多的是实现单面板设计数据集和实际的数据呈现是耦合在一起的,实际上更好的思路是数据集合、数据呈现是要进行分离的,针对这个思路,我们可以逐一展开讲解关键功能点实现。
       1、数据集设计
       数据集是针对数据源的定义,对于数据源进行独立定义,一个报表的前端呈现本身也可能涉及到多个数据源。数据集设计,即是返回一个二维的数据集合,可以有多列。我们需要通过配置的方式来实现,即先选择数据源,然后自定义SQL语句,然后返回具体的数据集对象。在SQL过程中我们可以对字段标题名称等进行转义。其实更加解耦的方法就是数据集可以直接选择具体的WS服务,由服务返回一个二维的数据集对象,这种方式可以进一步实现报表平台和底层数据库的解耦。
       2、单面板设计
       单面板设计简单来说就是将前端的展现方式,究竟是折线图、饼图还是雷达图等,通过后端的数据集进行绑定。在这个过程中重点就是要确认具体的图表呈现的一些关键配置,包括X、Y轴显示、图表名称、图例是否显示等关键配置,都需要在单面板设计中配置完成。
       3、大屏设计
       对于大屏设计,实际上里面又有几个关键点,首先就是大屏展示需要有一个CSS模板,这个模板决定了所有的单面板图表的配色风格,包括具体的底色、前端的色系选择等。选择模板就是确保最终的大屏展示各个单面板风格能够完全保持一致。
可视化
       大屏面板设计,业界基本上采用的是Gird布局模式即可,每个单面板你唯一要确定的就是横向跨几行,纵向跨几列即可。类似于上面的图,我们采用4*4Grid进行布局,中间的地图展示则是横向跨3行,纵向跨两列。
       4、大屏整体的展示动态刷新能力
       在以上完成设计后,我们整个大屏展示效果也就出来。虽然我们在大屏设计中没有考虑动态查询功能,但是大屏监控仍然需要动态进行刷新。因此在设计大屏的时候需要具备动态刷新能力,考虑到后续具备一定的扩展能力,我们需要能够将关键的一些变量参数传递到图表展现中。
       我认为最为关键的参数就是当前时间,当前的时间需要能够传递到每一个数据集的SQL中,方便我们根据时间进行数据过滤。同时对于大屏我们需要配置定时刷新频率,基于该频率对展示内容进行动态刷新。