制作一个自定义统计图

     本文介绍制作一个自定义统计图的详细步骤。

     右键点击自定义组件,或者分组文件——>新建HTML组件,进入到新建组件编辑界面。


     组件编辑界面主要分为三个部分,源代码、JS文件、CSS文件

源代码:组件的HTML dom结构
js文件:组件主要的功能实现脚本
CSS文件:组价的样式表文件

上方工具栏说明


取数:取数定义里定义的数据,即为组件在运行时需要的参数,一般是可以通过拾取表元而获得的数据,在定义时,可以设定一个默认值。

点击取数定义后,在弹出的对话框中,点击 "+"  号,就可以实现变量的创建,变量设定完毕后,点击 "确认" 保存。

所有的取数,在js代码中,都会以字符串的形式存放在 "vardata" 参数中,例如上图中,想使用 item 参数,就要写成 vardata.item 。


组件属性



“属性”是指,在编辑界面的右侧,可以根据编辑人员的需求,来改变参数,如右图的“上下文组件”中,四个属性都是通过左图中 “+” 自定义的属性,前面7个属性是组件默认的属性,从第八条开始才是你自己新建的组件属性。

对于一个属性而言,左图红圈中的五项很重要。

1)“属性名称”可以理解为,你在写js代码时,在  “setProperty” 方法中传入的 “key” 值。

2)“属性标题”是指在右侧属性面板上这个属性的名称,例如右图红框里面的,都是标题属性。

3)“类型”分为很多种,右图红框属性的类型,就是输入框,编辑者自己敲自己需要的内容,类型一共有11种,如下图。


4)“编辑” ,指是否能在右侧属性面板,对该属性进行写操作,不勾选,该属性就是不可写状态

5)“显示”,如果勾选了,该属性就会显示在属性面板上,不勾选,则该属性不显示在属性面板


事件:“事件”的只是提供一个接口,实现这个接口的,是你组件的使用者。



插入图片:插入图片,简单来讲就是,把你所需要的图片素材,从本地上传到vfs服务器上的过程,点击上传图片,选择所需要上传的图片就行了,单击所需要的图片,点击“确定”就可以将图片插入了。

这里值得一说的是,“图片管理”的默认界面,显示的都是“用户图标”,如下图,而“系统图标”点击后,所显示的图片就是系统自带的,一般用户并不能往系统图标里上传图片。



预览:“预览”按钮点击后,会显示你的组件目前的效果


总结:开发自定义组件流程

1)新建酷屏组件

2)设计取数定义

3)考虑需要的属性,并留好接口

4)通过你掌握的html、js、css知识,依次写好对应的三个文件

5)插入图片素材

6)点击预览,看你的组件效果

7) 检查你的组件、debug,若符合要求就点击“保存”。

至此,一个酷屏组件就编写完毕了

附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇克隆内置组件并修改

下一篇引用第三方组件

请先登录

创建词条

词条信息

数据王子
数据王子

圣贤|词条创建者

374

浏览次数:501 次

更新时间:2020-11-16