“授人以魚，不如授人以漁”，這句話語出《淮南子·說林訓》。道理很簡單，魚是目的，釣魚是手段，一條魚能解一時之饑，卻不能解長久之饑，如果想永遠有魚吃，那就要學會釣魚的方法。各位小伙伴看多了各種或奇特或絢麗或強大的組件，怕是早就心癢癢，蠢蠢欲動了。只能欣賞怎么行，今天就要給大家傳授如何用億信ABI制作各種組件！

億信ABI是億信華辰深耕商業智能領域十多年，自主研發的一款融合了數據源適配、ETL數據處理、數據建模、數據分析、數據填報、工作流、門戶、移動應用等核心功能而打造的全能型數據分析平臺，可靈活滿足各類復雜需求。

?

第一步：分析組件

分析組件，做組件之前，應該是已經存在設計圖，你可以清楚的知道你將要實現一個什么樣的組件，具有怎么樣的功能。思考一下使用什么方式去實現。

舉個簡單的例子，全篇會圍繞這個這個例子展開。如下圖所示：

?

經過分析通過echarts.js可以實現，有一個不規則形狀的柱形圖和時間軸。下面進入知識儲備階段。

第二步：了解組件相關重要知識

要學會制作一個組件，當然要對它進行一個基礎的了解才能在制作時游刃有余呢。下面我們來了解組件的組成部分，如圖所示

1、取數定義：定義組件需要的默認數據以及數據格式。

2、屬性：添加自定義的屬性。比如添加自定義的autoplay屬性，在組件里實現邏輯控制以后，就可以通過在屬性面板操作，改變組件。

?

3、預覽：可以在制作組件的過程中，邊寫邊查看效果

4、源代碼：寫靜態的html代碼。

5、default.js:寫組件創建的腳本。js部分有幾個重要的函數:

1) init(cwidget, vardata, events, storagedata, resources:組件是創建時會執行init函數，cwidget是該組件對象，vardata以json的格式存儲取數，events以json的格式存儲用戶在右邊屬性上設置的事件,storagedata以字符串格式儲存組件自己需要存儲的值，resources以json的格式存儲資源及權限校驗信息.

2) setProperty(key, value, cwidget)：當屬性面板發生變化時，想要組件應該做相應的改變，則實現該方法。key為屬性名稱，value是當前的值，cwidget是組件對象。

?

3) refreshDatas(cwidget, vardata, storagedata)：刷新操作，數據改變時，調用該方法，重新渲染數據。

4)?resize(cwidget)：?組件大小改變時執行，通過實現resize()方法，使得組件自適應。

5) dispose(cwidget)：?銷毀操作,銷毀自己相關的東西。

6、defalut.css:寫組件需要的樣式表。

備注：如果需要添加腳本或者樣式表可以點擊加號添加。

第三步：實際操作

哇，終于來到了實際操作部分，此時的你是頭昏腦脹還是信心十足呢？話不多說，我們愉快的開始酷屏制作吧！

1、分析數據格式和需要開放的屬性接口。

?

以該組件為例：需要x軸數據，數據格式定為一維數組；需要y軸數據，數據格式定為多維數組;需要時間軸數據，數據格式定為一維數組；

?

需要開放的屬性：是否自動播放屬性，播放時間間隔屬性。

?

2、組件自身的實現，包括靜態html,js，css，以本例講解。

html部分：本例不需要其他html,只需要提供一個父節點。

css部分：父節點百分百撐滿容器。

js:創建組件的動態腳本，使用第三方js時，通過EUI.include(“js文件路徑”)引入進來。這個例子，js實現步驟：

1、獲得echart實例

2、獲得echart需要的option參數；

3、調用echart的setOption(option)方法；

4、實現setProperty方法，某一項發生變化就實現響應的動作。

?

5、實現resize()方法，使組件可以自適應，本例只需要調用echart實例的resise()方法。

?

6、實現refreshDatas()，即在數據發生變化時，執行重新渲染組件的操作。

?

7、最后實現dispose方法，銷毀組件相關東西。

?

組件制作的全過程就都在這里了！你get到了嗎？歡迎一遍又一遍的細讀哦！