先放下效果圖
以上是目前開發出來的大屏框架1.0版本,較爲簡陋。沒有進行復雜的界面設計,採用了9*9的標準設計佈局
主要使用了百度提供的echarts庫,進行圖表的實現,使用了jquery來實現簡單的主題切換交互功能
稍微說明下設計的思路:
首先作爲一個框架庫,對於界面的設計,應該是通過配置項來實現的
在佈局方面,我選擇了使用絕對定位佈局來佈局,使用百分比來界定每一個小盒子的寬高
只需要在開發時,進行相應的設計,寫入對應的domjson配置,就可以生成任何想要的盒子,以下是代碼
根據以上這些數據,再通過解析的代碼就可以生成對應的dom結構
關於echart的渲染,根據id進行匹配,只用配置對應的option代碼,就可在對面的盒子裏生成對應的圖表
可在此函數內進行Ajax操作,完成圖表的數據交互
也可通過該函數進行特例化設計,可用字符串拼接,也可以template模板,進行隨心所欲的各種設計