快速模板——Echart包

在Ext JS中雖然內置了圖表包,但整體來說只能算可用。如果希望更好的效果,會引入別的圖表包,如Ext JS自身引入了D3包,不過這是收費的。爲了健全快速模板的功能,於是引入了EChart包來實現更好的圖表功能。

要將別的功能包引入到Ext JS,基本都是以擴展組件的方式來實現的,EChart包也不例外,這次唯一不同的地方是將這個功能做了包的形式,將包放到項目的packages文件夾或工作區的packages\local文件夾,然後在app.json中引用這個包就行了。

目前的EChart包只定義了一個EChart.Component類來實現圖表功能,其具體功能是包括爲圖表綁定element、根據組件大小調整圖表大小和將存儲(store)的數據轉換爲圖表所需的數據。該組件目前能實現基本的線圖、柱狀圖和餅圖。如果要使用更多圖表,需要對組件進行擴展,重寫EChart.Componentredraw方法,爲圖表提供適合的數據就行了。以下是EChart圖表組件的示例圖:

在這裏插入圖片描述源代碼:https://github.com/tianxiaode/qTemplate-ExtJSCE7/tree/master/src/client/workspace/packages/local/echart

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章