酷屏如何创建自定义组件

67
2

瑞艾 数据达人Lv4

发表于2020-5-18 09:50

楼主
本帖最后由 瑞艾 于 2020-5-18 09:52 编辑

都知道酷屏支持自定义组件的功能,而且能实现创建完成即可直接使用,不需要做重启服务器的操作。
以下是一个饼图组件,单独轮播每一个部分的数据,并且每一块的占比大小都有一个投影的效果。

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

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

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



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

2.webp.jpg

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

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

3.webp.jpg

在大屏中使用组件时就可以录入不同的数据进行展示。
4.webp.jpg
有没有发现,上面两个图看着几乎一模一样,所以我们还需要开放一些统计图的外观等属性,供使用者来针对不同的场景配置不同样式的统计图。如下:

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




最近看过此主题的会员

18663728509

jcvc

Bernard

挨踢妹

小由菜

小亿

程序小哥哥

本主题由小亿于2020-5-18 10:04添加图章 精华

2个回答

只看楼主

程序小哥哥 小试身手Lv3

发表于2020-5-18 10:03

只看该作者

取消 关注该作者的回复

沙发

感谢分享,这个效果很赞呀~

挨踢妹 数据达人Lv4

发表于2020-5-18 10:22

只看该作者

取消 关注该作者的回复

板凳

感谢,学习了~

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

©2020ESENSOFT北京亿信华辰软件有限责任公司版权所有:京ICP备07017321号京公网安备11010802016281号