編者按：近些年來，商業智慧（BI）市場持續增長，隨著企業CRM、ERP等應用系統的引入，企業越來越注重利用資料智慧為高效決策提供支援，由此帶動的對BI的需求也越來越大。BI嵌入式分析能夠增強業務系統資料分析能力、提高資料決策效率、釋放開發資源提高開發效率。本文中，百分點大資料技術團隊基於對業內嵌入式分析主流技術棧的分析，系統介紹了百分點BI嵌入式分析解決方案及實踐應用。
一、概述
1. 什麼是BI
BI一般指商業智慧（Business Intelligence，簡稱：BI），又稱商業智慧或商務智慧。早在1996年，Gartner就提出了商業智慧的概念，它是指用現代資料倉儲技術、線上分析處理技術、資料探勘和資料展現技術進行資料分析以實現商業價值。
商業智慧發展至今已經成為一個非常龐大而複雜的系統，除了以獨立方式執行的BI系統外，嵌入到應用系統內的商業智慧分析也逐漸被業界推崇，也就是嵌入式BI分析。
2. 嵌入式BI分析
嵌入式BI分析是將BI系統功能或者分析產物內容整合到其他業務系統（如OA、ERP等系統）中，使用者可以在業務系統中便捷利用這些資料分析的功能或結果。
因此它的主要價值有以下幾個方面：
增強業務系統資料分析能力：增強業務系統對資料處理、資料分析以及視覺化的能力。
提高資料決策效率：縮短決策響應時間，減少多個系統間來回切換操作，實現在業務系統內的資料決策流程閉環。
釋放開發資源提高開發效率：讓開發人員無需或較少關注資料分析、視覺化功能模組開發，讓開發人員更專注於業務系統開發。
嵌入式BI分析通常會有設計器嵌入、分析結果嵌入等幾種方式，本文主要講解目前應用較為流行的“分析結果嵌入”方式，這種嵌入方式是指將資料分析後產出的報告、看板等嵌入到其他業務系統。
3. 場景案例
某零售公司將BI工具應用於商城、CRM、ERP系統等資訊的資料分析，便於進行精細化資料運營。應用一段時間後，業務人員經常抱怨在多個系統之間來回切換，操作比較繁瑣，工作效率較低。
經過討論之後，IT人員將分析產物直接嵌入在銷售系統對應資訊模組中，要做出如下改造：
（1）首先利用各業務系統的資料，在BI工具中做好分析報告。
（2）在業務系統中確定嵌入頁面以及方案，將分析結果合理地展現。
如下圖所示，我們將“零售商品綜合看板”等多個分析結果，嵌入在商城系統後臺相應的選單導航，為業務人員日常分析提供了極大的便利。
請點選輸入圖片描述（最多18字）
圖1 嵌入式BI分析
二、業內嵌入式分析解決方案
1.主流技術棧圖解
iframe
iframe技術圖解如下圖所示：
請點選輸入圖片描述（最多18字）
圖2 iframe 技術圖解
iframe標籤是框架的一種形式，支援在一個頁面內嵌入另一個頁面，基本語法：
<iframe src="檔案路徑"></iframe>
SDK
SDK技術圖解如下圖所示：
請點選輸入圖片描述（最多18字）
圖3 SDK 技術圖解
使用SDK技術將功能整合到第三方系統，首先利用npm下載 SDK 包，安裝成功後，使用import匯入包，然後對SDK配置做一個初始化處理，透過javascript獲取dom元素渲染報告嵌入到頁面中。
2.主流技術棧的優缺點
目前市場主流技術棧主要有兩大類，分別為iframe和SDK，以下表格將對它們的優缺點做出分析：
請點選輸入圖片描述（最多18字）
3. 廠商所用主流技術棧
百分點科技選取了6家廠商所用的主流技術棧，並做出分析說明，如下圖所示：
請點選輸入圖片描述（最多18字）
根據調研結果可見，國外廠商基本都支援SDK方式的嵌入式分析，國內大多廠商目前在嵌入式分析領域技術積累和沉澱稍顯不足。SDK嵌入解決了iframe整合的安全隱患，可以深度嵌入第三方業務生態，宛如原生。百分點科技從國際視野出發，打造安全可控的嵌入式BI技術，使用國產化BI賦能更多行業數字化轉型。
三、百分點BI嵌入式分析解決方案
百分點BI嵌入式分析支援兩種形式：iframe和SDK。iframe技術相對而言比較簡單，各廠商基本都支援，下面將重點介紹SDK這種形式。
1. SDK總體架構
架構圖
百分點BI SDK架構圖如下：
請點選輸入圖片描述（最多18字）
圖4 百分點BI SDK架構
總體說明
SDK是從BI系統分離出來單獨的一個模組，主要目的在於渲染圖表和渲染報告。報告的資料來源於BI伺服器，SDK採用react實現，資料驅動，用到了react-grid-layout、echarts和leaflet等庫。SDK中的元件主要可以分為4大類，分別是report container、report layout、elements以及其他一些通用元件。在SDK內部，百分點科技有自己的一套資料狀態管理，主要用於各種複雜的互動實現；在最頂層，我們設定了幾個簡單的 API，非常方便使用者使用SDK。
2. SDK的整合
這一節將說明SDK是如何與第三方系統整合的。
SDK的匯入
為方便使用者，百分點科技提供了2種規範的包，用於不同環境下使用SDK，無論哪一種使用起來都是非常簡單的。
（1）當使用者在瀏覽器環境使用時，需要提前引入lodash 、leaflet@1.7.1 、echarts@4.2.1庫，可是參照如下示例，此時可以拿到全域性的BI物件了。
<div id="container" style="width: 100%; height: 100%">Loading...</div>
<link type="text/css" rel="stylesheet" href="./cbi-web-sdk/umd/bi-web-sdk.min.css"/>
<script src="./lodash.min.js"></script>
<script src="./leaflet.js"></script>
<script src="./echarts.min.js"></script>
<script src="./cbi-web-sdk/umd/bi-web-sdk.min.js"></script>
<script>
window.addEventListener('load', function() {
// your code
});
</script>
（2）當使用者使用打包工具構建，需要先安裝好以下依賴，執行npm install lodash@latest echarts@4.2.1 leaflet@1.7.1cbi-web-sdk，示例如下：
import * as BI from 'cbi-web-sdk';
import 'cbi-web-sdk/cjs/bi-web-sdk.min.css';
// your code
SDK與第三方系統整合
在第三方系統匯入SDK後，接下來將以生成一張報告為例，瞭解SDK 如何與第三方系統整合的。（檢視示例：https://codesandbox.io/s/heuristic-dawn-46gzy?file=/src/App.js。）
（1）獲取報告秘鑰
在整合之前，需要先拿到報告秘鑰。為了滿足不同個場景的嵌入，可以生成多個報告秘鑰，如下圖所示：
請點選輸入圖片描述（最多18字）
圖5
圖中已經生成了5個不同的報告秘鑰，ID那一列就是具體的秘鑰，後面生成報告就是依賴這個秘鑰了。
（2）建立一個報告容器
在生成報告之前，需要在程式碼中建立一個報告容器，也就是一個html標籤，並且新增上ID。為了使用者體驗，可以在其內部新增一個loading效果。可以參考如下：
<div style="width: 100%; height: 100%" id="container">
Loading...
</div>
（3）初始化配置
BI物件上有一個setConfig方法，可以參考如下：
BI.setConfig({
language: 'zh_CN', // 報告所使用的的語言
webUrl: 'https://your-web-site.com/', // BI 系統的前端路由，主要用於圖內跳轉
serverUrl: 'https://your-web-site.com/api/subject', // BI 的後端伺服器地址
mapResourceUrl: 'https://your-web-site.com/map-resource' // geoJson 格式的地圖資源地址
});
（4）生成報告
經過上面3步之後，就可以利用第1步中生成的報告秘鑰和第2步中建立的標籤ID，生成一張報告了。參考如下：
new BI.Report('container', { linkId: 'REPORT_LINK_14b100f8db7dd0fc4' });
可以看到，Report建構函式有2個引數，第一個是報告的容器ID，第二個引數是一個物件，只需傳入一個linkId，linkId就是報告秘鑰。
SDK高階使用技巧
上節中已經分析瞭如何在第三方系統內嵌一張報告，但是在很多場景中僅僅這麼做還是不夠的，例如：
報告樣式自定義：在BI中按照統一風格樣式製作完成的報告，與業務系統UI格格不入，希望能夠調整滿足樣式自定義需求。
單個圖表嵌入：在某個頁面內，只嵌入其中的某幾張圖表，並且想擁有一些和自己的系統進行互動的能力。
接下來，將具體描述如何使用SDK中的高階技巧：
（1）報告樣式自定義
SDK提供了自定義修改報告樣式的能力，需要傳入styleConfig，styleConfig資料格式可參考BI系統中「儀表板/設計」那部分。示例如下：
const customStyleConfig = {
desktop: {
general: {
rowHeight: 24,
columns: 36,
compactType: 'vertical',
hideElementBorder: true,
hideElementHoverEffect: true,
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
pageSetting: {
sizeType: 'default',
showScale: false,
width: 1200,
height: 768
},
background: {
type: 'color',
color: {
type: 'none',
color: ['#ffffff']
}
},
font: {
color: 'color1_1'
}
}
};
new BI.Report('container', { linkId: 'REPORT_LINK_14b100f8db7dd0fc4', styleConfig: customStyleConfig } });
可以修改的報告樣式如下表所示：
請點選輸入圖片描述（最多18字）
general屬性值說明：
請點選輸入圖片描述（最多18字）
padding屬性值說明：
請點選輸入圖片描述（最多18字）
background屬性值說明：
請點選輸入圖片描述（最多18字）
pageSetting屬性值說明：
請點選輸入圖片描述（最多18字）
font屬性值說明：
請點選輸入圖片描述（最多18字）
（2）單個圖表嵌入
SDK是具備生成單個圖表的能力的，並且還支援繫結點選事件，如下程式碼示例所示：
const chartIns = new BI.Chart('container', { chartId: 'CHART_14b100f8db7dd0fc4' });
chartIns.bind('click', handleClick);
function handleClick({ dataInfo }) {}
如上程式碼示例所示，Chart有兩個引數，第一個引數是一個html標籤的ID，也就是圖表容器ID，第二個引數是一個物件，只需要傳入一個chartId，關於chartId的獲取，就需要開發人員從該圖表所屬的報告的獲取介面資訊中拿到了。
圖表例項支援使用bind方法繫結一個click事件，click事件的回撥引數dataInfo是一個物件，表示你所點選的圖表當前dataItem相關資料。
3. SDK架構設計
上面介紹了SDK與第三方系統的整合方案，接下來將具體介紹SDK的架構設計。
報告的組成
在SDK中，報告是具備跨平臺展示的能力。不管是在哪一個平臺，一張報告都是由容器、佈局、元素以及元素之間的互動等組成的。
容器，一般是報告樣式的體現，比如背景色等。
佈局，桌面端有兩種佈局，磁吸式佈局和懸浮式佈局，移動端有磁吸式佈局。
元素，將元素分為3大類，圖表元素、過濾元素和其他元素。
互動，圖表的聯動效果，過濾元素的篩選效果等。
用一張圖例來說明一下：
請點選輸入圖片描述（最多18字）
圖6
圖表的組成
在SDK中，圖表是一個核心元素。圖表是由容器、主體內容和互動組成。
容器，圖表通用的樣式一般體現在這裡，比如背景色，內邊距等。
主體，圖表的主體內容是透過視覺化庫渲染而成的。
互動，一般涉及下鑽上卷、篩選等。
可以參考下圖：
請點選輸入圖片描述（最多18字）
圖7
SDK的技術架構圖
SDK的技術架構圖如下所示：
請點選輸入圖片描述（最多18字）
圖8 SDK的技術架構圖
上圖中，可以清晰地看出SDK中各個類和元件之間的關係，箭頭方向表示狀態資料流向。
在圖示的元件中，其中有幾個比較特別的的元件，分別是ReportLayout、ElementBox、ChartElement，這幾個元件比較有代表性。
ReportLayout，這是一個佈局元件，是一個高度封裝的元件，可以看出，除了ReportContent，還有TabsElement也使用到了它。
ElementBox，這是一個元素渲染器元件，是一個非常重要的元件，在這個元件中，包含了幾個核心功能：懶載入、style mixin、資料載入等等。
ChartElement，這是一個核心元件，是一個繪製圖表的元件。在這個元件中，百分點科技對不同的視覺化庫做了封裝，使用策略模式繪製不同的圖表。
SDK的狀態管理
一份報告的渲染涉及很多個資料狀態，這裡百分點科技將一些狀態抽離出來，統一管理，進而方便對齊維護。
（1）Elements State是對元素的資料狀態進行管理，比如圖表的聯動、下鑽、過濾等等，如下圖所示：
請點選輸入圖片描述（最多18字）
圖9
從上面的示例程式碼可以看出，百分點科技採用比較扁平化的資料結構來管理元素的狀態，這樣可以更方便地更新元素資料。
（2）Layout State是針對於佈局上一些比較特殊的狀態進行管理。比如註釋元件的展開閉合，因為註釋元件的寬度和高度的設定，在Report Item元件中就設定好了，具體的註釋元件和Report Item相隔較遠，所以這個時候引入了Context。資料結構如下圖所示：
請點選輸入圖片描述（最多18字）
圖10 資料架構
對於Layout State和各相關元件的關係，以Tips元件為例，如下圖所示：
請點選輸入圖片描述（最多18字）
圖11 元件關係
4. SDK技術棧
框架和庫的選擇
（1）react/react-dom
由於SDK是從BI系統中分離出來的，是一個相當複雜的一個模組，有檢視，有model，百分點科技BI團隊使用react技術棧，所以SDK也會使用react來進行開發。
（2）g2/echarts
在資料的視覺化方面，目前業內比較好用的有highcharts、echarts、g2等等，這次SDK的開發會採用其中的g2和echarts，其中echarts主要用於地圖圖表的開發。
（3）antd
SDK中會使用到大量的前端通用元件，BI系統本身使用了antd UI 庫，那麼在SDK中，為保證風格統一，提高開發效率，百分點科技選擇了antd元件庫。
（4）leaflet
BI中有一個關於GIS的地圖，市面上比較流行的的GIS庫有openlayer和leaflet，這裡我們選擇了leaflet，原因是openlayer 過於龐大，leaflet相對來說比較輕巧，外掛化，對於移動端比較友好，leaflet完全可以滿足需求。
構建工具的選擇
SDK的構建使用webpack，前面說過，SDK是從BI系統中分離出來的的獨立模組，功能非常複雜，使用的資源型別比較多，有css 、img等，也使用了很多cjs規範的包，當先市面上比較流行的是webpack構建工具，生態也非常活躍。
結束語
因此，採用嵌入式BI分析的方式，能夠讓應用系統無縫整合BI分析能力，將資料分析和展示整合到同一個環境中，滿足使用者實時分析高價值的業務問題。同時，把BI平臺的前端渲染能力封裝成SDK，程式碼級深度嵌入至宿主系統，能夠提升系統安全性，頁面載入和渲染體驗宛如原生。
目前，百分點科技已實現了“分析結果嵌入”，未來我們將繼續研究更高階的嵌入式BI分析，如將儀表板設計器、圖表設計器嵌入業務系統，不斷增強應用軟體原生的資料視覺化分析能力。
