谈谈自定义报表和可视化监控大屏设计

今天谈下自定义报表和可视化监控大屏设计方面的内容，准备分三个部分来讲，第一是先看下当前主流的商用报表工具的功能特点，其次分别谈下报表设计和可视化监控大屏设计。

图片来源网络

最近在网上搜索自定义报表，监控大屏制作，搜索到了FineReport报表制作工具。

FineReport报表软件是一款纯功能于一身的企业级web报表工具，它“专业、简捷、灵活”的特点和无码理念，仅需简单的拖拽操作便可以设计复杂的中国式报表，搭建数据决策分析系统。

这款报表制作工具还是相对的火，你能够想到的常见报表自定义，报表的多维度分析，统计汇总，上钻和下钻，图形可视化等基本都能够实现。可以对接各种关系型数据库作为数据源，同时也支持你手工填报数据上来进行采集后汇总，然后报表呈现。关键是该报表很多能力基于Excel来完成，只有你有基础的Excel使用技能，并不需要太多的编码能力就能够完成报表的开发和制造。

而对于监控大屏制作，是今年来报表的一个扩展关键能力，FinedReport刚好提供了该能力。

可以看看这篇文章介绍：
http://bbs.fanruan.com/thread-94898-1-1.html

看了之后，会发现监控大屏制作可以很容易，在没有这个工具的时候我们也在考虑如何做监控大屏，包括选择类似百度Echart做相关的图表，找美工进行整体界面风格的设计和配色，确定需要在监控大屏上显示的内容等。

而看了上面的文章，给我最大的感受就是，做任何事情我们都可以从大量的特殊性和差异化中抽象中共性化的特征，同时将差异点进行参数化和模板化，以完成对这类事情的普适化模板和套路设计。

拿监控大屏来说，你要达到上面的能力，首先你就需要有大量的监控到设计和开发实践，或者至少观察了大量的监控屏实现例子。其次你需要具备足够的抽象化能力，找寻共性，并完成从特殊到一般的过程。从FineReport体现的监大屏制作能力，该思路也完全适用于我们日常的产品化规划和设计工作。

所谓的软件产品化，也就是是一个从大量个性化业务场景中进行共性能力抽取，个性能力参数化的过程而已。

再回来看监控大屏实现，你会发现进行抽象和模板化后整个实现过程本身很简单。

1. 选择布局和排版，这个本身可以表格化和模板化，足够解决问题。

2. 选择基本的配色体系，在前面我们可以预设常用的配色体系，供选择即可。

3. 选择每个Panel里面的数据呈现方式(文字，数字，表格，各种图形，地图，关系等）

4. 为每个Panel的数据呈现配置相应的数据源

5. 实现一些最后的点缀，动态实时效果等。

而上面这些步骤也是我们自己进行监控大屏开发的时候常用的方法和步骤，只是FineReport把这个过程进一步参数化和模板化了而已。难的地方就在于大量观察和实践后，这种通用模型和能力的抽象。

最后对于FineReport报表本身的简单易用性，强大的功能，网上有些总结，而这些总结本身体现的就是长期在一个专业方向或领域的持续不断的积累，对简单易用产品哲学的坚持，对用户使用场景的深刻洞察，对各种产品细节的不断优化，而所有上面的这些都缺一不可。

一个产品要能够做成功，往往需要的就是这种长期的坚持和努力，不断优化改进，对一线用户使用需求的积极响应和分析。我们很多时候产品没有做好，一个是脱离用户，一个就是迎合潮流和赶时髦，很多产品做到中途由于推广的不好就放弃，又换一个新产品进行研发，和猴子掰玉米本质上并没有大的区别。

真正的产品成功之道，里面最重要的就是长期的坚持和积累，不轻言放弃。真正好用的产品往往都是你对用户需求的重视，由用户需求帮你不断打磨和抽象出来的模型。

FineReport网址：
http://www.fanruan.com/finemax/

对于自定义报表，在前面讲的商用报表平台或工具来实现大屏展示，而实际上一谈到报表大家谈的比较多的还是BI分析应用中常用的各种报表类工具，类似水晶报表，国内的FineReport等。一个商用的报表平台或工具可以看到功能会很强大，但是总结来说还是数据采集，设计，呈现几个部分内容。

1. 数据采集：从结构化数据库，各类文件数据源，也包括直接提供手工填报端的自动生成。

2. 报表设计器：提供独立的报表设计器能力，支持类似分组，切片，钻取等各类复杂场景，支持各类图表。

3. 报表展示：报表展示支持各类图表的展示，支持自定义参数查询，支持类似监控大屏等。

在这里不打算详细讨论商用自定义报表能力。对于我们大部分业务系统来说，需要的报表能力往往并不需要类似BI系统报表这么强大，更多的可以理解为自定义查询能力 可定制的图表展现。那么我们在实现自定义报表的时候就应该从这两个方面来考虑一个报表如何实现。

在考虑这个问题的时候，我们先考虑报表设计器的问题。对于最终的报表展现效果我们看到，分为自定义查询条件部分，和报表内容展示区域。报表内容展示区域可以理解为一个个的独立Widget面板，每个面板就展示一个内容，可以是一个曲线图，也可以是一个表格，Panel面板里面的内容可以自己进行定制。

整体展示效果类似如下：

下面来拆分下几个关键的功能。

1. 数据源的定义

数据源定义关键就是通过数据源形成可在报表界面上展示的数据集。因此该功能建议不仅仅是简单定义数据源，同时包括数据集或数据对象的定义。因为数据集本身也是可复用的，不需要重复设计。

数据源连接可以是JDBC方式，也可以是WebService接口方式，而实际上最佳方案是采用WS服务接口方式来获取数据集。这样可以进一步保障后端数据库的安全性。

为了更好的支撑参数化查询，对于数据集的定义可以带参数化查询条件，由外围传入。

2. 单数据面板的定义

单数据面板的定义实际上思路很简单，就是要实现数据集和数据展示组件之间的绑定。数据面板可以是常规的表格，折线图，曲线图，饼图等。当前如果采用百度Echart图表库的话，我们可以做到对Echart图表库的大部分图形展现都支持。

数据集笼统来说就是一个二维结构的数据对象返回，这个二维结构可以很容易影响到表格，也可以映射为类似折线，曲线，饼图等各种我们希望展示的形状。

3. 整体查询报表页面的设计和定义

对整体查询报表的设计实际上可以看到，主要工作就是定义自定义查询面板，定义和选择需要在该报表中展示的单数据面板。确定查询结果面板的具体布局形式。

对于面板布局采用最简单的Grid布局形式即可，在定义清楚一个标准的Grid布局后，我们就很容易来配置单个面板究竟占有几列几行。同时在单个面板设计的时候，我们还需要将单个面板中的待输入参数项和自定义查询中的查询条件参数进行映射和绑定，完成查询条件的传入工作。

4. 最终的报表设计内容解析和呈现

这里有两种实现方式，一种是代码动态生成然后再自动编译为独立的部署包。另外一种方式就是所有报表呈现都只有一套动态代码来执行，即整个页面是基于配置参数完全动态生成的。

第一种方式性能更好，但是配置变更后需要重新部署；第二种方式性能稍差，但是好在能够完全动态调整。

最终的单个完整报表的呈现可以理解为就是一个url地址，传入具体的报表id信息。同时单个报表的呈现还需要考虑单点集成，并预留用户id，组织id，姓名等Session相关的全局参数。

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

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

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

1.数据集设计

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

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

2.单面板设计

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

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

3.大屏设计

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

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

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

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

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

END

更多精彩干货分享

点击下方名片关注

IT那活儿