前言
隨着數字化和信息化的發展，數據大屏使用越來越廣泛，我們不僅需要展示數據，更需要以一種更加美觀的方式展示數據。這就必然需要使用到各種圖表組件，比如柱狀圖、餅圖、折線圖等等。但是有一些效果不太適合通過這種常規圖表實現，比如3D效果圖表、組織結構、天氣預報等這些特殊效果。那麼這種特殊效果，我們就可以自己來開發實現。今天小編以葡萄城公司的嵌入式BI工具——Wyn商業智能爲例爲大家介紹如何實現一個天氣預報插件。
插件開發
Wyn提供了用戶自定義可視化插件開發的功能，使用者可以根據自己的實際需求，自己開發符合自己使用場景的、漂亮的可視化組件，來豐富大屏的展示效果。
- 獲取代碼
葡萄城公司官方公開了天氣預報插件的源碼，可以直接在github上獲取：https://github.com/GrapeCityXA/Wyn-Custom-Visual/tree/main/天氣預報 
- 代碼打包
獲取代碼之後，在本地的IDE中通過wyn-visual-tools package命令將程序打包生成對應的VIZ插件包。 
- 上傳組件
最後將插件包上傳到Wyn中進行使用。首先在門戶頁面上選擇"天氣預報.viz"組件包。 
選擇組件之後，點擊上傳 
- 組件使用
組件上傳之後就可以在儀表板中添加使用。 
開發說明
- 開源代碼庫
葡萄城將已經實現的可視化插件源碼已經公開，可以直接在github中獲取。比如上面的天氣預報插件就是直接從官方的代碼倉庫中獲取的，除此之外還有很多其他的插件供用戶下載使用。下載源碼、依賴之後就可以直接打包使用了。
- 從零開始做一個插件
如果官方提供的插件沒有需要的，就可以自己開始搭建項目工程，進一步開發插件。
2.1 準備環境
-
安裝10.0.0 以上的版本的node.js 。
![]()
-
然後在IDE（如VS Code）中創建一個空白工程。
![]()
-
安裝 wyn-visual-tools 命令集：npm i @grapecity/wyn-visual-tools -g
![]()
2.2 工程初始化
通過命令wyn-visual-tools init初始化項目環境，執行成功之後，可視化插件項目的基本工程框架就搭建出來了，後面繼續按照框架結構進行開發即可。初始化後的項目結構如下：
- assets：存儲圖片資源。目前僅支持圖片，定義中所使用的圖片將被編碼爲base64字符串。
- i18nResources：此文件夾用於存放 i18n 文件。
- node_modules: 該工程安裝的依賴。
- src/visual.ts：自定義可視化插件的入口。
- capabilities.json：配置可視化插件的一些靜態屬性， 包括數據綁定，屬性設置，操作欄的配置。
- package.json/package-lock.json: 該項目的npm配置， 具體可以參考https://docs.npmjs.com/files/package.json
- tsconfig.json: 該項目有關typescript的一些配置， 具體可以參考https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
- visual.d.ts: 可視化插件提供的一些接口定義。
- visual.json：有關自定義可視化插件的一些元信息。
- webpack.config.js: 該項目通過webpack進行打包，該文件是webpack的配置文件， 具體可參考https://webpack.js.org/configuration/
![]()
2.3 開發調試
我們在開發的過程中也不是一味的寫代碼，還需要根據當前的效果進行測試、修改、優化。在Wyn中也可以根據插件的情況進行調整。
-
首先，在Wyn的管理系統中開啓開發者模式：
![]()
-
然後啓動項目。
- 最後在儀表板設計器中就可以查看插件當前的效果。
打開儀表板設計器，在可視化插件模塊中找到開發工具組件，拖動到設計器中，點擊插件的右上角的刷新按鈕，就能看到組件的呈現效果，同時在代碼開發的IDE中可以看到運行時的日誌信息。 
- 葡萄城市場
開發完後的插件不僅可以自己使用，還可以將開發完成的插件上傳到葡萄城市場。 
總結
Wyn內置的圖表組件非常豐富，可以滿足大多數常見的使用場景，用戶直接在葡萄城市場中下載並使用即可。除此之外，當遇到一些特殊的場景時，也可以根據自己的實際場景自己動手開發。希望每個讀者在看完本文後，都可以設計出漂亮的儀表板大屏。
擴展鏈接：