【BI 視覺化外掛】怎麼做？手把手教你實現

葡萄城技术团队發表於2024-05-27

背景

對於現在的使用者來說，外掛已經成為一個熟悉的概念。無論是在使用軟體、 IDE 還是瀏覽器時，外掛都是為了在原有產品基礎上提供更多更便利的操作。在 BI 領域，圖表的豐富性和對接各種場景的自定義是最吸引人的特點。雖然市面上現有的 BI 軟體內建了許多圖表元件和自定義屬性設定，但對於多元化的需求來說，仍然會有無法滿足需求的地方。因此，為了更好地滿足使用者多元化地需求，外掛應運而生。那要怎麼才能在 BI 軟體中 DIY 一個外掛呢？

1、開發環境準備及工程建立

首先我們需要準備開發的環境：

Node.js
任意IDE（VScode 為例）
BI 軟體設計器： Wyn商業智慧軟體設計器（簡稱Wyn）

開發環境準備完之後，安裝依賴並建立一個外掛工程：

//安裝依賴
npm i @grapecity/wyn-visual-tools -g
//建立工程
wyn-visual-tools init

建立的工程目錄結構如下所示：

2、開發和除錯

建立好後就可以做開發了。從上面可以介紹可以知道，src/visual.ts是自定義視覺化外掛的入口。所以我們所有的開發都是在這個裡面實現。開發時我們使用 wyn-visual-tools develop 進行啟動除錯（如下圖所示）。專案執行過程中，點選重新整理按鈕就可以檢視本地執行的工程。

而所有的開發，都是在src/visual.ts中實現的。每次圖表載入，資料繫結以及屬性修改，都是執行visual.ts。並且在其中我們也可以獲取到所有繫結的資料以及右側的屬性操作。那麼接下來我們大概看一下visual.ts的結構：

建構函式就是在元件被拖出來時，每次初始化載入一次，一般用來做一些全域性物件、事件的初始化定義等。

Update()：這個方法會在每次元件更新時執行，包括元件第一次載入、資料更新、資料欄位更改，屬性更改時，都會更新，並且透過他的引數我們就可以獲取到所有的資料以及看板右側的屬性。也是我們主要邏輯實現的地方。

OnDestory（）：OnDestory是在元件被銷燬時，將註冊的相關事件做銷燬。

GetInspectorHiddenState()：隱藏右側的所有屬性設定。

GetActionBarHiddenstate()：隱藏元件旁邊的屬性設定。

3、打包上傳

開發和除錯完之後，我們可以將專案打包並上傳到 Wyn商業智慧軟體設計器中。

打包指令：

wyn-visual-tools.cmd package

輸入打包指令後，會在同級目錄下生成一個 ***.viz的檔案，而這個檔案就可以直接在 Wyn商業智慧軟體設計器的門戶上傳，上傳之後就會生成一個外掛。

開發案例

下面小編藉助 Echarts 生成一個柱形圖外掛為例，為大家介紹一下如何從頭到尾實現一個BI 外掛：

1.Echarts物件初始化及除錯

首先我們使用的echarts。所以要引入，wyn內建已經將一個echarts做了內嵌，可以有效的減少重複引入和速度。使用方法如下:

我們在visual.json中配置引用echarts："dependencies": ["echarts"]

使用host.moduleManager.getModule('echarts').init(dom);對echart進行初始化。這時就獲取了一個echarts物件。然後就開啟除錯：

wyn-visual-tools.cmd develop

執行後即可在wyn的視覺化外掛中使用開發工具除錯。新增除錯工具並重新整理：

2.獲取資料

在元件載入時，除了初始化外，每次就是首先進入的就是update方法。而updata有一個入參:options。而我們所需要所有在頁面上互動的東西，都會在這個屬性裡面被傳進來。

Options: {
      dataViews: data,
      properties: properties
}

dataViews就是我們所有傳遞的資料，而properties就是所有右側裡面的屬性。那麼我們這次的示例需要一個分類，一個數值。所以我們就需要先將這兩個定義出來。而這個定義就在capabilities.json中。方法如下:

 "dataBinding": {
        "dataRoles": [
            {
                "name": "ActualValue",
                "displayNameKey": "數值",
                "kind": "value",
                "options": [
                    {
                        "displayNameKey": "資料格式",
                        "type": "format",
                        "name": "valueFormat"
                    }
                ]
            },
            {
                "name": "dimension",
                "displayNameKey": "分類",
                "kind": "grouping"
            }
        ]
    },

我們用grouping定義分類欄位，value定義數值欄位。所有資料按照分類欄位分組，並透視聚合數值欄位。這時候，我們隨便繫結兩個欄位，在update中console一下options。看一下輸出結果:

可以看到，繫結的資料已經獲取到了。

3.圖表繪製

有了資料我們下一步就是利用資料將圖表繪製出來。

Echart的原始option如上，所以我們只需要將資料作用到series[0]中，然後分類作為xAxis的資料即可。

在如上程式碼中，我們在update中獲取到資料並記錄到data物件中，並建立一個bindingName物件，用來儲存繫結的欄位的名稱。用來獲取物件陣列的資料。然後我們新定義一個方法render()專門用來繪製圖表。該方法中，我們去解析data物件。用map去返回一個陣列，第一個陣列取物件中所有的分類。第二個取物件中所有的資料。然後使用chart物件繪製圖表，此時一個簡單的echats折線圖就繪製出來了: