數據可視化大屏酷炫祕籍之前端開發者自己動手

數據可視化大屏酷炫祕籍之前端開發者自己動手

數據可視化大屏的酷炫效果相信大家都已經見識到了經常是這樣的:

或者是這樣的

又或者是這樣的

如此酷炫的大屏效果,要想完全復原首先離不開以下步驟:

  1. 設計師精確到像素的設計稿
  2. 有了圖紙稿原型,那就需要動效了,沒有動效的可視化大屏,等於沒有靈魂,那麼動效可能交給美工或設計師人員幫我們製作一些GIF動畫,或者小視頻用於展示。
  3. 但是需要將數據與模擬場景綁定,比如模擬機房,模擬3D零件,不僅需要展示動效和圖形效果,還需要綁定實際的業務數據,那麼這一步就得我們前端開發自己動手了。

相信大家都曾爲Echarts的圖表或地圖開發者模式給打動過,如果能夠把這些動效直接爲我們所用,展示到可視化大屏中,升職加薪不是夢,領導誇讚不絕口。

那我們接下來就以 Wyn 商業智能可視化大屏設計工具爲示例,演示如何進行插件開發,將喜歡的效果引入到可視化大屏中,接下來爲大家介紹插件開發中的一些基礎功能,以及demo示例。

Demo下載地址:

https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjIyMjY3fDUxZGM3Y2M5fDE2NTk1OTMxNDB8MjkzODJ8MTUwOTg2

一、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.按鈕顯示隱藏

到這裏我們的項目就整體介紹完畢,下面爲大家準備了更多拓展閱讀,感興趣的小夥伴不要錯過。

拓展閱讀

BI如何實現用戶身份集成自定義安全程序開發

BI如何配置“花生殼”,看這一篇就夠了

【三維地圖】開發攻略 —— 詳解“GeoJSON”技術和應用場景

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