手把手教你如何在FEA上進行ECharts圖表封裝

​最近很想和你們分享下，如何在FEA上利用ECharts進行圖表封裝（可能和FEA槓上了有關），因而以echart餅圖插件爲例嘗試了下，具體實現步驟以下：

一、建立文件目錄與配置空函數。 

二、echart圖表高級參數的抽離。

三、配置高級參數默認值。

四、數據配置規範。

五、說明文檔配置規範。

六、插件的數據交互。（非必選項）

七、縮略圖的添加與文件上傳。

步驟一：準備工做

俗話說「磨刀不誤砍柴工」，良好的開端是成功的一半。首先建立好文件目錄，這裏以t08爲例，t08.js文件中添加一個空函數，此函數需配置myChart、ckey、height、width、div與res這6個參數，具體參數做用以下：

• myChart爲echart初始化的dom元素；

• ckey爲兩種可能，一種是該ssdb的key或是該ssdb的key的df數據；

• height爲該插件的高度；

• width爲該插件的寬度；

• div爲該插件的dom元素；

• res爲該插件的高級參數，其中參數順序固定不可更改；

具體內容詳見《FEA第三方插件開發指南》第一節、第二節。

步驟二：高級參數抽離

高級參數的抽離：提取除了配置中的data，一些包括樣式及標題等配置項。

具體內容詳見《FEA第三方插件開發指南》第三節。

步驟三：配置高級參數

高級參數默認值配置效果以下：

注：第一級爲左側的分類，第二級爲頂部的小分類，第三級爲具體內容。即參數配置層級需在三級及三級以上才能配置。

具體內容詳見《FEA第三方插件開發指南》第四節。

步驟四：數據配置規範

默認數據的第一行第一列爲index不可修改。具體data_t08.csv抽離後的數據格式.

具體內容詳見《FEA第三方插件開發指南》第五節。

步驟五：說明文檔配置規範

文件名稱：explain_t08.json。

格式:」列名」:」對這列的描述」,描述中帶有&&表示換行顯示。

具體內容詳見《FEA第三方插件開發指南》第六節。

步驟六：縮略圖的添加與上傳

img文件夾爲該插件所使用到的圖片，其中該插件的編號加.png爲該插件在圖表選擇裏面的縮略圖例如t08.png。最終實現效果以下所示：

具體內容詳見《FEA第三方插件開發指南》第八節。

步驟七：插件的數據交互

因爲插件交互部分並非用戶必填內容，因此在這裏就不詳細介紹，有感興趣的用戶可參考《FEA第三方插件開發指南》第七節。

到此有關ECharts圖表封裝的介紹就結束了，是否是感受尚未盡興，尚未學夠，不要着急。對於數據可視化咱們是專業的，固然服務也是最貼心的，《FEA第三方插件開發指南》的文檔咱們已經爲你獻上，輸入網址：http://60.191.16.186:9001/workspace/echart_course.pdf便可獲取完整文檔。若是還想成爲Echart界的大咖，關注openfea官方微信號，會有更多精彩的內容推薦。