百分点大数据技术团队：BI 嵌入式分析实践

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

​