编者按：近些年来，商业智能（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分析，如将仪表板设计器、图表设计器嵌入业务系统，不断增强应用软件原生的数据可视化分析能力。
