數據可視化大屏酷炫祕籍之前端開發者自己動手
數據可視化大屏的酷炫效果相信大家都已經見識到了經常是這樣的:
或者是這樣的
又或者是這樣的
如此酷炫的大屏效果,要想完全復原首先離不開以下步驟:
- 設計師精確到像素的設計稿
- 有了圖紙稿原型,那就需要動效了,沒有動效的可視化大屏,等於沒有靈魂,那麼動效可能交給美工或設計師人員幫我們製作一些GIF動畫,或者小視頻用於展示。
- 但是需要將數據與模擬場景綁定,比如模擬機房,模擬3D零件,不僅需要展示動效和圖形效果,還需要綁定實際的業務數據,那麼這一步就得我們前端開發自己動手了。
相信大家都曾爲Echarts的圖表或地圖開發者模式給打動過,如果能夠把這些動效直接爲我們所用,展示到可視化大屏中,升職加薪不是夢,領導誇讚不絕口。
那我們接下來就以 Wyn 商業智能可視化大屏設計工具爲示例,演示如何進行插件開發,將喜歡的效果引入到可視化大屏中,接下來爲大家介紹插件開發中的一些基礎功能,以及demo示例。
Demo下載地址:
一、visual.json 文件介紹
name:插件名稱
externalJs:需要引入的外部js,可以通過{{參數名}}獲取配置中的參數
Configuration:擴展參數
配置字段內容獲取
二、webpack.config.js
設置外部引用包裏面的js對象名稱,可以在 visual.ts 文件中引用
外部擴展js插件引用方式:
三、package.json
Version:設置插件版本號
四、assets
可以在裏面定義一些圖片資源,使用時返回base64文件,用資源圖片時,需要在visual.json 中定義名稱映射
獲取圖片內容:
五、capabilities.json 屬性設置,數據字段配置
1.dataBinding 數據綁定
(1)dataRoles
name: 屬性名稱
displayNameKey: 顯示名稱
kind:
grouping:用於度量字段的分類或分組。
value:數值數據。
groupingOrValue:可用作度量也可以用作分組。
options:format 格式化,displayUnit 數據單位,enum 自定義下拉框,(使用方式後面詳細介紹)
(2)dataViewMappings,conditions
設置數據綁定的最大,最小數量。
conditions 組合條件,{},{}屬於或者關係,下面示例中可以理解爲:
① numeric 沒有綁定字段,category 綁定數量無限制。
② numeric 若綁定數據,則category 最多隻能綁定一個字段。
2.options->visual 組件屬性設置(使用方式後面詳細介紹)
開啓數據聯動,只有開啓數據聯動後,纔可以實現組件之間數據聯動
設置後顯示內容:
3.actions 設置組件按鈕,詳細介紹請參考
https://help.grapecity.com.cn/display/wyn600/Actions
六、visual.ts 文件
1.IVisualUpdateOption 屬性對象
isViewer:表示在預覽儀表板時是否呈現該組件。
isMobile::表示是否在移動端顯示該組件。
isEditing:表示組件的編輯狀態。當觸發了編輯操作時,值爲true。
isFocus: 表示組件的聚焦狀態。當觸發了聚焦操作時,值爲true。
dataViews: 在capabilities.json中定義的計算數據視圖(dataViewMapping)。
properties: 在 capabilities.json 中定義的屬性模型(options.visual)。
docTheme: 選擇的文檔主題。
language: 當前語言。
scale: 比例因子。
filters: 用來影響其他組件。
2.獲取屬性設置內容
3.組件排序,此代碼完成排序功能
4.數據聯動,點擊實現儀表板數據互動
(1)設置字段
(2)獲取聯動item合集
此功能調試代碼查看
5.聯動鑽取,跳轉
參考代碼:bindEvents() 方法
6.數據格式化
參考方法:formatData
7.自定義設置
具體參考 number_formatting 方法
8.按鈕顯示隱藏
到這裏我們的項目就整體介紹完畢,下面爲大家準備了更多拓展閱讀,感興趣的小夥伴不要錯過。