百余个可视化大屏实用组件分享，一用就爱上了

之前小亿推了一篇《20套大屏模板，教你3分钟制作出酷炫的可视化大屏》，有热心粉丝后台留言：

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

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

△亿信酷屏案例

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

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

酷屏组件介绍

其实在之前的推文《有了这些可视化大屏组件，酷炫大屏玩得飞起》中，就有过组件介绍，但这次有上新哦。酷屏中已内置总计9大类组件，121个小组件，满足大屏制作各类基本诉求，一起来看一下效果吧。

【容器类组件】

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

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

△网格容器

△麦穗带标题容器

【表格类组件】

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

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

△排名表格

△轮播表格

【文本类组件】

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

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

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

【统计图组件】

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

△玫瑰图组件

△花蕊饼图组件

【动态组件】

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

△动态魔方组件

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

酷屏组件实操

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

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

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

1、新建自定义组件

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

html源代码：就是组件的html静态代码，可以理解为是组件的整体框架；

js脚本文件：一般用来写组件动态js，如组件的形态及交互等相关内容；

css样式文件：这个不用多说，就是样式配置。

2、组件自定义开发

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

3、取数定义及属性配置

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

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

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

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

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

小结：无论是前文介绍的直接封装好的组件，还是自定义制作的组件，都支持在大屏设计界面进行拖拽操作，然后进行属性细节优化，从而完成可视化大屏制作。有大数据的地方，就有可视化的需求。酷屏能够提供实时的大数据分析，同时提供极致的可视化效果呈现，助您科学决策快人一步！