酷屏是亿信华辰自主研发的新一代数据可视化产品,内置近百种组件特效,六十余种风格各异的表格、导航、统计图等组件及SVG特效可供用户选择,展示效果炫酷,可任意制作酷炫灵动的图表和大屏,可谓设计能走多远,酷屏就能达到多远的境界。
尽管酷屏已经内置了很多组件特效,但是如果能自己做一个自己喜欢的组件,才更有成就感。因此酷屏提供了二次开发功能,根据系统提供的内置API接口,可以随心所欲增加自己喜欢的功能和组件等。
系统提供了很多API接口,如HTML组件开发、联动刷新、资源树、资源权限校验、表格自定义、第三方统计图使用等。下面主要介绍下比较常用的API接口。
1、HTML组件开发API
这个API主要是对内置组件的扩展和定制,当内置组件不满足当前需求,或者想定制自己喜欢的组件,就要用到这个API了。基本方法如下:
接下来用一个小例子来介绍一下常用的方法。实现一个组件,可以显示通过取数自定义的字符串,通过属性面板可以改变背景颜色,组件改变大小时字体大小改变。
首先,我们新建一个组件:
然后会打开一个新建HTML组件对话框:
新增一个自定义属性,以便可以在左边属性面板里面随时改变。
init()方法主要是将组件拖到编辑区的时候调用。
setProperty()方法主要是用于修改自定义属性。
refreshDatas()方法主要是用于刷新数据。
当组件的大小改变时就会执行resize()方法。
dispose()方法很重要,主要用于组件销毁,不正确使用可能会造成内存泄漏哦!
建成之后的组件如下。
2、联动刷新
这个联动刷新是指将一个参数组件的参数绑定在表元的过滤条件中,达到条件的时候,表格或者统计图就会随着参数值的变化而动态改变。基本方法如下:
接下来用一个小例子来介绍主要方法。有一个日期下拉框,当下拉框的值发生改变的时候,另一个组件刷新数据。
首先拖入一个日期下拉框组件到编辑区。
然后点击右边属性面板事件。
调用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);
上面四种参数格式任选一种。
设置过滤条件,要注意和参数一致哦!
最后结果,当切换日期下拉框里面的日期改变时,表格的数据也会相应的变化。
3、可视化表格样式自定义
表格所需的样式比较复杂,实际中也是各有各的爱好,因此给表格提供了一个自定义接口,支持对表元的自定义。
在属性面板上对样式名称进行设置,值是字符串,如'text-w'。
样式的内容,可以写文件引入,也可以直接在代码态写css。
最后结果就可以得到你想要的表格样式。
这里仅叙述了酷屏提供的部分API接口,更好好玩的操作等你来发掘。各种炫酷大屏,尽在亿信酷屏!
PS:搜索“亿信华辰”就能在官网体验酷屏产品demo了!