-
-
瑞艾 数据达人Lv4
发表于2020-5-18 09:50
楼主
本帖最后由 瑞艾 于 2020-5-18 09:52 编辑
都知道酷屏支持自定义组件的功能，而且能实现创建完成即可直接使用，不需要做重启服务器的操作。
以下是一个饼图组件，单独轮播每一个部分的数据，并且每一块的占比大小都有一个投影的效果。
如果要实现这种系统没有的组件动效，可以通过自定义组件来实现，下面可以看看自定义组件的创建流程。
1、新建自定义组件
2、组件自定义开发
3、取数定义及属性配置
都知道酷屏支持自定义组件的功能，而且能实现创建完成即可直接使用，不需要做重启服务器的操作。
以下是一个饼图组件，单独轮播每一个部分的数据，并且每一块的占比大小都有一个投影的效果。
如果要实现这种系统没有的组件动效，可以通过自定义组件来实现，下面可以看看自定义组件的创建流程。
1、新建自定义组件
进入酷屏编辑界面，创建一个自定义组件后，会看到可视化的编辑界面，我们叫做代码区，分为三块内容：html源代码、js脚本文件、css样式文件，是组件所需要的外观和交互部分。
- html源代码：就是组件的html静态代码，可以理解为是组件的整体框架；
- js脚本文件：一般用来写组件动态js，如组件的形态及交互等相关内容；
- css样式文件：这个不用多说，就是样式配置。
这部分就是按照自己想要的组件效果来完成以上html、js、css三个文件的编写。这部分酷屏自定义开发手册上介绍得非常详细，感兴趣的小伙伴移步参考。
而为了让组件产生最大的价值，提高组件的可复用性，就需要给组件定义一些在使用中可修改可配置的内容。
第一个当然就是组件需要展现的数据，可以直接在可视化的取数定义界面配置。例如在现在这个饼图中，我们需要定义两个取数类型：数据标题和具体数据值，并且还可以预设一些默认值，让使用者参考。
在大屏中使用组件时就可以录入不同的数据进行展示。
有没有发现，上面两个图看着几乎一模一样，所以我们还需要开放一些统计图的外观等属性，供使用者来针对不同的场景配置不同样式的统计图。如下：
通过不同的属性设置，同一个饼图组件就能够呈现不一样的效果。
