酷屏是億信華辰自主研發(fā)的新一代數(shù)據(jù)可視化產(chǎn)品，內(nèi)置近百種組件特效，六十余種風格各異的表格、導航、統(tǒng)計圖等組件及SVG特效可供用戶選擇，展示效果炫酷，可任意制作酷炫靈動的圖表和大屏，可謂設(shè)計能走多遠，酷屏就能達到多遠的境界。

盡管酷屏已經(jīng)內(nèi)置了很多組件特效，但是如果能自己做一個自己喜歡的組件，才更有成就感。因此酷屏提供了二次開發(fā)功能，根據(jù)系統(tǒng)提供的內(nèi)置API接口，可以隨心所欲增加自己喜歡的功能和組件等。

系統(tǒng)提供了很多API接口，如HTML組件開發(fā)、聯(lián)動刷新、資源樹、資源權(quán)限校驗、表格自定義、第三方統(tǒng)計圖使用等。下面主要介紹下比較常用的API接口。

1、HTML組件開發(fā)API

這個API主要是對內(nèi)置組件的擴展和定制，當內(nèi)置組件不滿足當前需求，或者想定制自己喜歡的組件，就要用到這個API了?；痉椒ㄈ缦拢?

?

接下來用一個小例子來介紹一下常用的方法。實現(xiàn)一個組件，可以顯示通過取數(shù)自定義的字符串，通過屬性面板可以改變背景顏色，組件改變大小時字體大小改變。

首先，我們新建一個組件：

?

然后會打開一個新建HTML組件對話框：

?

新增一個自定義屬性，以便可以在左邊屬性面板里面隨時改變。

?

init()方法主要是將組件拖到編輯區(qū)的時候調(diào)用。

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

?

refreshDatas()方法主要是用于刷新數(shù)據(jù)。

?

當組件的大小改變時就會執(zhí)行resize()方法。?

dispose()方法很重要，主要用于組件銷毀，不正確使用可能會造成內(nèi)存泄漏哦！

?

建成之后的組件如下。

?

2、聯(lián)動刷新

這個聯(lián)動刷新是指將一個參數(shù)組件的參數(shù)綁定在表元的過濾條件中，達到條件的時候，表格或者統(tǒng)計圖就會隨著參數(shù)值的變化而動態(tài)改變。基本方法如下：

?

接下來用一個小例子來介紹主要方法。有一個日期下拉框，當下拉框的值發(fā)生改變的時候，另一個組件刷新數(shù)據(jù)。

首先拖入一個日期下拉框組件到編輯區(qū)。

?

然后點擊右邊屬性面板事件。

?

調(diào)用calc_Special_Widget()方法，

//1.map類型參數(shù)

calc_Special_Widget(new EUI.Map("calc_widget_id=GRID3;@bbq=" + data ));

//2.map格式的字符串類型參數(shù)

calc_Special_Widget("calc_widget_id= GRID3;@?bbq?=" + data );

//3.json格式參數(shù)

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);

上面四種參數(shù)格式任選一種。

?

設(shè)置過濾條件，要注意和參數(shù)一致哦！

?

最后結(jié)果，當切換日期下拉框里面的日期改變時，表格的數(shù)據(jù)也會相應(yīng)的變化。

?

3、可視化表格樣式自定義

表格所需的樣式比較復雜，實際中也是各有各的愛好，因此給表格提供了一個自定義接口，支持對表元的自定義。

?

在屬性面板上對樣式名稱進行設(shè)置，值是字符串，如'text-w'。

?

樣式的內(nèi)容，可以寫文件引入，也可以直接在代碼態(tài)寫css。

?

最后結(jié)果就可以得到你想要的表格樣式。

這里僅敘述了酷屏提供的部分API接口，更好好玩的操作等你來發(fā)掘。各種炫酷大屏，盡在億信酷屏！

PS：搜索“億信華辰”就能在官網(wǎng)體驗酷屏產(chǎn)品demo了！