数据可视化需求一应俱全,百余个可视化大屏实用组件分享啦

    技术2022-07-10  99

    有热心粉丝后台留言:

     

    说得没错,其实模板也都是单个组件组装起来方便用户直接套用的,当然我们也能把模板和组件结合起来玩,甚至直接用现有的组件来组装,毕竟我们的组件,又多又酷炫,不信,你看!

     

    可视化大屏所展示的各个模块,以最小单位定义成组件。组件具有可复用、可定制、低耦合的特性。而亿信华辰大屏可视化平台-酷屏正是采用组件化开发的模式,在一个大屏中创建的任何组件,都能够复用到其它的大屏,同样支持定制化开发。利用现存组件,通过拖拽操作,即可完成如下大屏制作。

     

    △亿信酷屏案例

    酷屏作为亿信华辰自主研发的新一代大屏可视化产品,内置上百种风格各异的表格、导航、统计图等组件及SVG特效可供用户选择,展示效果炫酷,可任意制作酷炫灵动的图表和大屏。

    是不是很厉害?说了这么多,那酷屏组件究竟是什么样,如何通过组件制作大屏,让我们接着往下看。

    酷屏组件介绍

    酷屏中已内置总计9大类组件,121个小组件,满足大屏制作各类基本诉求,一起来看一下效果吧。

    容器类组件

    制作大屏的第一步,就是布局。一般来说,我们都会使用容器先来进行大体结构的布置。一是可以让整个屏看起来井然有序,清晰明确;二是方便调整,因为以模块为单位的移动或者大小改变,一定比模块中每个组件一个个来调整来得轻松。

    目前酷屏内置的容器组件有数十种,包括常用的田布局、T形布局等进行整体布局,还有炫酷的渐变标题容器、虚拟滚动条容器等单个容器组件,颜色、风格各有千秋,小伙伴们可以根据需要自行选择。

    △网格容器

    △麦穗带标题容器

    表格类组件

    当数据展示比较基础;或者当数据项目较多,不适合统计图组件展示;或者既需要展示数据,又需要展示排名情况,表格组件就是首选,清晰直观。

    除了基础的表格组件外,针对不同需求,酷屏还内置了各类扩展表格。例如排名表格,可用于榜单场景;轮播表格,可用于展示数据较多的场景。

    △排名表格

    △轮播表格

    文本类组件

    文本类组件,适用于大屏内文字排版,包括大标题、小标题、单个文本展示、单个数据展示等。

    酷屏内置滚动数字牌、跳动图标大本、上下飘移大本文、走马灯文本、渐进滚动文本等文本组件等,炫酷效果让平淡文本数字变得引人注目。

    △数字牌组件与跳动图标大文本组件

    统计图组件

    酷屏统计图组件的种类非常丰富,包含我们所熟知的图形就有十几种,例如线状图、面积图、雷达图、柱状图、条形图、流向图等等,而这些图形的风格、颜色的改变又能衍生出非常多美轮美奂的组件效果。

    △玫瑰图组件

    △花蕊饼图组件

    动态组件

    在酷屏中,通过组件加载动效,让每个模块都舞动起来,整个可视化大屏界面化静为动,酷炫不少。我们对动画不断优化调整,为用户尽量提供简洁且酷炫的动态效果,也希望能够尽可能满足更多用户的大屏需求。

    △动态魔方组件

    当然还有更多的炫酷组件,就不一一介绍了,欢迎到文末的体验链接,进行试用查看。

    酷屏组件实操

    组件介绍完了,但是这么多组件,还是没有满足自己需求的,怎么办?酷屏还有个非常厉害的地方,酷屏支持自定义组件的功能,而且能实现创建完成即可直接使用,不需要做重启服务器的操作。

    以下是一个饼图组件,单独轮播每一个部分的数据,并且每一块的占比大小都有一个投影的效果。

     

    如果要实现这种系统没有的组件动效,我们就需要通过自定义组件来实现,下面可以看看自定义组件的创建流程。

    新建自定义组件

    进入酷屏编辑界面,创建一个自定义组件后,会看到可视化的编辑界面,我们叫做代码区,分为三块内容:html源代码、js脚本文件、css样式文件,是组件所需要的外观和交互部分。

    html源代码:就是组件的html静态代码,可以理解为是组件的整体框架;js脚本文件:一般用来写组件动态js,如组件的形态及交互等相关内容;css样式文件:这个不用多说,就是样式配置。

     

    组件自定义开发

    这部分就是按照自己想要的组件效果来完成以上html、js、css三个文件的编写。这部分咱们的酷屏自定义开发手册上介绍得非常详细,感兴趣的小伙伴移步参考。

     

    取数定义及属性配置

    而为了让组件产生最大的价值,提高组件的可复用性,就需要给组件定义一些在使用中可修改可配置的内容。

    第一个当然就是组件需要展现的数据,可以直接在可视化的取数定义界面配置。例如在现在这个饼图中,我们需要定义两个取数类型:数据标题和具体数据值,并且还可以预设一些默认值,让使用者参考。

     

    在大屏中使用组件时就可以录入不同的数据进行展示。

     

    有没有发现,上面两个图看着几乎一模一样,所以我们还需要开放一些统计图的外观等属性,供使用者来针对不同的场景配置不同样式的统计图。如下:

     

    通过不同的属性设置,同一个饼图组件就能够呈现不一样的效果。

     

    小结:无论是前文介绍的直接封装好的组件,还是自定义制作的组件,都支持在大屏设计界面进行拖拽操作,然后进行属性细节优化,从而完成可视化大屏制作。

    有大数据的地方,就有可视化的需求。酷屏能够提供实时的大数据分析,同时提供极致的可视化效果呈现,助您科学决策快人一步!

    Processed: 0.010, SQL: 9