不用写代码的可视化大屏，一口气把工具和方法都教给你

         前段时间公司的领导偶尔看了阿里、天猫的大屏，也非要吵着要做可视化大屏，但是我们公司没有阿里天猫那样的技术基础和资金支撑，这可让我们IT部门苦恼了相当长时间。

于是IT的老大直接甩给了我们来做，其实之前我也做了不少可视化大屏项目，这种大屏看着高端大气上档次，然而其开发步骤却并不像想象中那么简单，基本步骤就有五步：

 

• 业务需求：首先就是调研一下大屏的开发需求和目的，搞清楚领导究竟想看什么样的大屏，比如销售业务大屏、园区资源大屏、生产流程大屏等等；
• 原型设计：根据需求确定主要、次要指标，并且进行样式排版，这一步对于工具和软件的要求比较严格，因为最终要输出效果图给开发人员；
• 模板开发：根据效果图进行大屏制作；
• 大屏测试：前面三步都是软件测试，第四步是从硬件的角度对大屏的视觉、性能和数据方面进行测试；
• 正式上线运行

其实想要做出炫酷的可视化大屏，核心的难点在于软件和工具的实现效果，一开始我们想直接敲代码实现，结果发现代码实在是太复杂了，而且实现的效果也很丑。

无奈之下我们只能求助于市面上比较成熟的大屏开发软件，这些软件一般都有现成的图表模板，开发速度比写代码要快多了，最终经过了三天奋战，我们终于用FineReport做出了下面这些大屏：

 

 

 

炫酷不？这样的大屏不仅拥有着高端的科技感，而且都是经过了多次的版面设计和修改，这次大屏效果在同行业内部交流过程中反响不错。

当我们跟老板汇报的时候，老板也都惊喜的对我们刮目相看，升职加薪，走上人生巅峰（后面是瞎掰的）

FineReport大屏制作方法：

1、业务需求

根据业务需求确定大屏的主题，FineReport根据不同的业务场景分别有三种主题：

• 战略驾驶舱：主题内容为企业的整体运营情况，图表的数据逻辑不需要很深；
• 业务驾驶舱：主题内容为具体业务之间的数据差异，对图表之间的联动分析要求较高；
• 专项驾驶舱：操作型驾驶舱强调持续、实时的信息汇报。

 

2、基础指标设计

大屏说到底也还是报表的一种可视化形式，因此finereport是在决策报表当中进行大屏制作的，只需要讲不同的组件在页面中进行拖拽，并且绑定数据，就可以完成一张普通的大屏图表：

 

掌握了用决策报表制作可视化组件后，驾驶舱制作也就迈出了第一步

3、原型设计

当我们将要制作的图表都制作完成之后，下一步就要在驾驶舱画布将这些繁杂的图标进行排版，常见的排版原则这里就不多说了，主要就那么几点，左边优先于右边，上边优先于下边，中间优先于四周。

 

4、大屏调试

到了这一步，我们的可视化大屏的雏形也就基本出现了，下面的工作就是对背景、图表配色细节进行美化，对图表细节进行修饰，比如设置一下背景图等。

5、正式上线

根据大屏可视化效果选择合适的硬件情况，下图中的三位动态效果也是直接从FineReport中的第三方插件市场中下载的，里面的模板效果都非常多，直接套用，非常方便。

 

FineReport大屏模板

最后给大家带来一些好看的模板demo，评论里见！

 

 

 

 

 

收藏