c9dff878001f44b3cc4fe86fddb0eea8.png

酷屏是亿信华辰自主研发的新一代数据可视化产品,内置近百种组件特效,六十余种风格各异的表格、导航、统计图等组件及SVG特效可供用户选择,展示效果炫酷,可任意制作酷炫灵动的图表和大屏,可谓设计能走多远,酷屏就能达到多远的境界。
尽管酷屏已经内置了很多组件特效,但是如果能自己做一个自己喜欢的组件,才更有成就感。因此酷屏提供了二次开发功能,根据系统提供的内置API接口,可以随心所欲增加自己喜欢的功能和组件等。

ad46c63732a8ce54435b725575c8e1a1.gif


系统提供了很多API接口,如HTML组件开发、联动刷新、资源树、资源权限校验、表格自定义、第三方统计图使用等。下面主要介绍下比较常用的API接口。
1、HTML组件开发API
这个API主要是对内置组件的扩展和定制,当内置组件不满足当前需求,或者想定制自己喜欢的组件,就要用到这个API了。基本方法如下:

1a526448ca9b95d486fdd192d6dde83d.png


接下来用一个小例子来介绍一下常用的方法。实现一个组件,可以显示通过取数自定义的字符串,通过属性面板可以改变背景颜色,组件改变大小时字体大小改变。
首先,我们新建一个组件:

41e17e52ae1fd9ec2902778eae31fcdb.png


然后会打开一个新建HTML组件对话框:

ebfaa703da954a33265f6666dca1c77d.png


新增一个自定义属性,以便可以在左边属性面板里面随时改变。

c9c80c2796d0cf95d770370183a7cc55.png


init()方法主要是将组件拖到编辑区的时候调用。

7d0ed26d467b5297f92505612c1a2faf.png


setProperty()方法主要是用于修改自定义属性。

0bec7f667a5428ef7c80feea40c3690e.png


refreshDatas()方法主要是用于刷新数据。

65027298f887467f6589af3f5823443e.png


当组件的大小改变时就会执行resize()方法。

b28bdf91311038a54dde23fc8ff9e602.png


dispose()方法很重要,主要用于组件销毁,不正确使用可能会造成内存泄漏哦!

895ecfb7cd49e41c8273a3b903a09e8b.png


建成之后的组件如下。

241415736506659663263fd8610f9407.png


2、联动刷新
这个联动刷新是指将一个参数组件的参数绑定在表元的过滤条件中,达到条件的时候,表格或者统计图就会随着参数值的变化而动态改变。基本方法如下:

e0e0b3da11bf3cada850cf939f3173e8.png


接下来用一个小例子来介绍主要方法。有一个日期下拉框,当下拉框的值发生改变的时候,另一个组件刷新数据。
首先拖入一个日期下拉框组件到编辑区。

8857d2d22ba16aca7bc4734c8f9db0a8.png


然后点击右边属性面板事件。

3497e8b1c4db29ce5244d53ed4b85d5d.png


调用calc_Special_Widget()方法,
//1.map类型参数
calc_Special_Widget(new EUI.Map("calc_widget_id=GRID3;@bbq=" + data ));
//2.map格式的字符串类型参数
calc_Special_Widget("calc_widget_id= GRID3;@ bbq =" + data );
//3.json格式参数
calc_Special_Widget({"calc_widget_id":" GRID3","@ bbq ":data});//注意data不要+号
//4.json格式字符串
var para = {"calc_widget_id":" GRID3","@ bbq ":data};
var jsonstr = JSON.stringify(para);
calc_Special_Widget(jsonstr);
上面四种参数格式任选一种。

a9c9b5f21ed557a3c00cc8b33d3455fc.png


设置过滤条件,要注意和参数一致哦!

733cd7853d121ee042c1736ad2e160fe.png


最后结果,当切换日期下拉框里面的日期改变时,表格的数据也会相应的变化。

11d9de5eb0af9e4ab6122cacc3ff4a92.png


3、可视化表格样式自定义
表格所需的样式比较复杂,实际中也是各有各的爱好,因此给表格提供了一个自定义接口,支持对表元的自定义。

ac97714956f1e24e89917ba37b686a49.png


在属性面板上对样式名称进行设置,值是字符串,如'text-w'。

90ce54011705ace0fca37981f51dc505.png


样式的内容,可以写文件引入,也可以直接在代码态写css。

039385cf71a398c3856d74480240e151.png


最后结果就可以得到你想要的表格样式。

eea90670c3e170d628669391ca27f33b.png


这里仅叙述了酷屏提供的部分API接口,更好好玩的操作等你来发掘。各种炫酷大屏,尽在亿信酷屏!
PS:搜索“亿信华辰”就能在官网体验酷屏产品demo了!

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐