美文网首页上班这点事工具癖技术篇
如何制作一个可视化大屏模板

如何制作一个可视化大屏模板

作者: 帆软 | 来源:发表于2019-03-05 16:46 被阅读101次

    是否曾被阿里年会上酷炫的数据大屏所吸引?是否心里也曾想着跃跃欲试?这次我们写一篇demo实例来讲述下如何用Finereport制作一个合格的大屏demo。

    按照文章中所言的几种常见排布方式:

    以上是几种常见的大屏排布方式,一句各个大屏模板所需要展示的具体信息我们可以自行选择,需要注意的点就是需要有重点信息,有辅助信息,重点信息重点展示,辅助信息用来辅描述重点信息。

    这边根据实际情况了解 ,需要展示信息等,于是构想出了如下图所示的分布图

    样式构思完毕之后 ,就需要考虑在帆软众多的图表库中挑选合适的图表来展示相应的信息了

    这些图表在设计器中所在的位置

    假如这些内置的图表还不够使用的话,帆软还有插件商城可以使用:

    按照我们定下来的图表展示,我们导入我们所需要的数据。

    当把所有的图表数据添加完成之后我们可以按照自己的喜好,结合整个大屏需要展示的情景,给不同的图表单独设置系列颜色,标签大小,字体颜色,图例位置。

    这是导入数据之后 略微细节调整之后的界面。

    这时候按照我们的图表展示的安排,地图上配色只能大概的区分市场潜力等级,而不能完全展示,需要用到我们的图表联动功能,这样才能够更加准确的展示我们地图上面的信息。图表联动功能由参数实现。

    同时部分数据由于是平均数,数据库数据实时刷新,这时候可以开启我们图表的监控刷新功能,实时监控我们的数据更新。

    至此这个大屏大体图表的使用就完成了,按照我们之前的制作图表安排 我们还需要制作几个报表块用来展示一些样式的详细信息,在报表块中我们可以使用一些图片来代替,使得整个页面更加美观耐看。

    同理 针对这些实时刷新的数据,一样可以开启报表快的监控刷新,让实时数据简单明了的能够被观察到。

    至此我们已经完成了整体的设计,需要完成最后一步,给每个图表添加标题说明,以及按照我们的设计理念,增加边框样式,凸出设计的重点。最后我们的大屏成品就制作完成了。

    相关文章

      网友评论

        本文标题:如何制作一个可视化大屏模板

        本文链接:https://www.haomeiwen.com/subject/ugdouqtx.html