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

分享至

编者按

近些年来，商业智能（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）在业务系统中确定嵌入页面以及方案，将分析结果合理地展现。

如下图所示，我们将“零售商品综合看板”等多个分析结果，嵌入在商城系统后台相应的菜单导航，为业务人员日常分析提供了极大的便利。

图1 嵌入式BI分析

二、业内嵌入式分析解决方案

1.主流技术栈图解

iframe

iframe技术图解如下图所示：

图2 iframe 技术图解

iframe标签是框架的一种形式，支持在一个页面内嵌入另一个页面，基本语法：

iframe></code> </p><p> <p><br></p> <p><strong>SDK</strong></p> <p>SDK技术图解如下图所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/4d7bcd1cp00qyckud0002d200bp007tg00bp007t.png"></p> <p>图3 SDK 技术图解</p> <p>使用SDK技术将功能集成到第三方系统，首先利用npm下载 SDK 包，安装成功后，使用import导入包，然后对SDK配置做一个初始化处理，通过javascript获取dom元素渲染报告嵌入到页面中。</p> <p><strong>2.主流技术栈的优缺点</strong></p> <p>目前市场主流技术栈主要有两大类，分别为iframe和SDK，以下表格将对它们的优缺点做出分析： </p> <p><img src="http://dingyue.ws.126.net/2021/0824/d855e662p00qyckud0009d200g3008qg00g3008q.png"></p> <p><br></p> <p><strong>3. 厂商所用主流技术栈</strong></p> <p>百分点科技选取了6家厂商所用的主流技术栈，并做出分析说明，如下图所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/bb23cbfbp00qyckud000jd200ka00bvg00ka00bv.png"></p> <p><br></p> <p>根据调研结果可见，国外厂商基本都支持SDK方式的嵌入式分析，国内大多厂商目前在嵌入式分析领域技术积累和沉淀稍显不足。SDK嵌入解决了iframe集成的安全隐患，可以深度嵌入第三方业务生态，宛如原生。百分点科技从国际视野出发，打造安全可控的嵌入式BI技术，使用国产化BI赋能更多行业数字化转型。</p> <p><br></p> </p><p> <p> <br> </p> </p><p> <p><strong>三、百分点BI嵌入式分析解决方案</strong></p> </p><p> <p> <br> </p> <p> <br> </p> </p><p> <p><br></p> <p>百分点BI嵌入式分析支持两种形式：iframe和SDK。iframe技术相对而言比较简单，各厂商基本都支持，下面将重点介绍SDK这种形式。</p> <p><strong>1. SDK总体架构</strong></p> <p><strong>架构图</strong></p> <p>百分点BI SDK架构图如下：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/7f4daa68p00qyckue000ad200k500fwg00k500fw.png"></p> <p>图4 百分点BI SDK架构</p> <p><strong>总体说明</strong></p> <p>SDK是从BI系统分离出来单独的一个模块，主要目的在于渲染图表和渲染报告。报告的数据来源于BI服务器，SDK采用react实现，数据驱动，用到了react-grid-layout、echarts和leaflet等库。SDK中的组件主要可以分为4大类，分别是report container、report layout、elements以及其他一些通用组件。在SDK内部，百分点科技有自己的一套数据状态管理，主要用于各种复杂的交互实现；在最顶层，我们设置了几个简单的 API，非常方便用户使用SDK。</p> <p><strong>2. SDK的集成</strong></p> <p>这一节将说明SDK是如何与第三方系统集成的。</p> <p><strong>SDK的导入</strong></p> <p>为方便用户，百分点科技提供了2种规范的包，用于不同环境下使用SDK，无论哪一种使用起来都是非常简单的。</p> <p>（1）当用户在浏览器环境使用时，需要提前引入lodash 、leaflet@1.7.1 、echarts@4.2.1库，可是参照如下示例，此时可以拿到全局的BI对象了。</p> <br> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <code><div id="container">Loading...div></code> <code><br></code> <code><link type="text/css" rel="stylesheet" href="./cbi-web-sdk/umd/bi-web-sdk.min.css"/></code> <code><script src="./lodash.min.js">script></code> <code><script src="./leaflet.js">script></code> <code><script src="./echarts.min.js">script></code> <code><script src="./cbi-web-sdk/umd/bi-web-sdk.min.js">script></code> <code><br></code> <code><script></code> <code> window.addEventListener('load', function() {</code> <code> // your code</code> <code> });</code> <code>script></code> <br> <p><br></p> <p>（2）当用户使用打包工具构建，需要先安装好以下依赖，执行npm install lodash@latest echarts@4.2.1 leaflet@1.7.1cbi-web-sdk，示例如下：</p> <br> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <code>import * as BI from 'cbi-web-sdk';</code> <code>import 'cbi-web-sdk/cjs/bi-web-sdk.min.css';</code> <code><br></code> <code>// your code</code> <br> <p><br></p> <p><strong>SDK与第三方系统集成</strong></p> <p>在第三方系统导入SDK后，接下来将以生成一张报告为例，了解SDK 如何与第三方系统集成的。（查看示例：https://codesandbox.io/s/heuristic-dawn-46gzy?file=/src/App.js。）</p> <p>（1）获取报告秘钥</p> <p>在集成之前，需要先拿到报告秘钥。为了满足不同个场景的嵌入，可以生成多个报告秘钥，如下图所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/f1b335d8p00qyckuf0022d200u000jlg00u700jp.png"></p> <p>图5</p> <p>图中已经生成了5个不同的报告秘钥，ID那一列就是具体的秘钥，后面生成报告就是依赖这个秘钥了。</p> <p>（2）创建一个报告容器</p> <p>在生成报告之前，需要在代码中创建一个报告容器，也就是一个html标签，并且添加上ID。为了用户体验，可以在其内部添加一个loading效果。可以参考如下：</p> <br> <ul> <li></li> <li></li> <li></li> </ul> <code><div id="container"></code> <code> Loading...</code> <code>div></code> <br> <p> <br></p> <p>（3）初始化配置</p> <p>BI对象上有一个setConfig方法，可以参考如下：</p> <br> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <code>BI.setConfig({</code> <code> language: 'zh_CN', // 报告所使用的的语言</code> <code> webUrl: 'https://your-web-site.com/', // BI 系统的前端路由，主要用于图内跳转</code> <code> serverUrl: 'https://your-web-site.com/api/subject', // BI 的后端服务器地址</code> <code> mapResourceUrl: 'https://your-web-site.com/map-resource' // geoJson 格式的地图资源地址</code> <code>});</code> <br> <p><br></p> <p>（4）生成报告</p> <p>经过上面3步之后，就可以利用第1步中生成的报告秘钥和第2步中创建的标签ID，生成一张报告了。参考如下：</p> <br> <ul> <li></li> </ul> <code>new BI.Report('container', { linkId: 'REPORT_LINK_14b100f8db7dd0fc4' });</code> <br> <p><br></p> <p>可以看到，Report构造函数有2个参数，第一个是报告的容器ID，第二个参数是一个对象，只需传入一个linkId，linkId就是报告秘钥。</p> <p><strong>SDK高阶使用技巧</strong></p> <p>上节中已经分析了如何在第三方系统内嵌一张报告，但是在很多场景中仅仅这么做还是不够的，例如：</p> <p><strong>报告样式自定义</strong>：在BI中按照统一风格样式制作完成的报告，与业务系统UI格格不入，希望能够调整满足样式自定义需求。</p> <p><strong>单个图表嵌入</strong>：在某个页面内，只嵌入其中的某几张图表，并且想拥有一些和自己的系统进行交互的能力。</p> <p>接下来，将具体描述如何使用SDK中的高阶技巧：</p> <p>（1）报告样式自定义</p> <p>SDK提供了自定义修改报告样式的能力，需要传入styleConfig，styleConfig数据格式可参考BI系统中「仪表板/设计」那部分。示例如下：</p> <br> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <code>const customStyleConfig = {</code> <code> desktop: {</code> <code> general: {</code> <code> rowHeight: 24,</code> <code> columns: 36,</code> <code> compactType: 'vertical',</code> <code> hideElementBorder: true,</code> <code> hideElementHoverEffect: true,</code> <code> },</code> <code> padding: {</code> <code> left: 0,</code> <code> right: 0,</code> <code> top: 0,</code> <code> bottom: 0</code> <code> },</code> <code> pageSetting: {</code> <code> sizeType: 'default',</code> <code> showScale: false,</code> <code> width: 1200,</code> <code> height: 768</code> <code> },</code> <code> background: {</code> <code> type: 'color',</code> <code> color: {</code> <code> type: 'none',</code> <code> color: ['#ffffff']</code> <code> }</code> <code> },</code> <code> font: { </code> <code> color: 'color1_1'</code> <code> }</code> <code> }</code> <code>};</code> <code><br></code> <code>new BI.Report('container', { linkId: 'REPORT_LINK_14b100f8db7dd0fc4', styleConfig: customStyleConfig } });</code> <br> <p><br></p> <p>可以修改的报告样式如下表所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/8566e1f4j00qyckuf000yd200u000g9g00a4005h.jpg"></p> <p><br></p> <p>general属性值说明：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/ac492f82j00qyckuf000yd200u000bhg009h003m.jpg"></p> <p><br></p> <p>padding属性值说明：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/acdf675aj00qyckug0013d200kd00hlg005h004q.jpg"></p> <p>background属性值说明：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/db81ca89j00qyckug000ud200ru00alg006y002n.jpg"></p> <p><br></p> <p>pageSetting属性值说明：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/475d353fj00qyckug000yd200u000bhg00b7004a.jpg"></p> <p><br></p> <p> font属性值说明：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/a963a624j00qyckuh000ed200ls005pg0074001u.jpg"></p> <p><br></p> <br> <p>（2）单个图表嵌入</p> <p>SDK是具备生成单个图表的能力的，并且还支持绑定点击事件，如下代码示例所示：</p> <br> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <code>const chartIns = new BI.Chart('container', { chartId: 'CHART_14b100f8db7dd0fc4' });</code> <code><br></code> <code>chartIns.bind('click', handleClick);</code> <code><br></code> <code>function handleClick({ dataInfo }) {}</code> <br> <p><br></p> <p>如上代码示例所示，Chart有两个参数，第一个参数是一个html标签的ID，也就是图表容器ID，第二个参数是一个对象，只需要传入一个chartId，关于chartId的获取，就需要开发人员从该图表所属的报告的获取接口信息中拿到了。</p> <p>图表实例支持使用bind方法绑定一个click事件，click事件的回调参数dataInfo是一个对象，表示你所点击的图表当前dataItem相关数据。</p> <p><strong>3. SDK架构设计</strong></p> <p>上面介绍了SDK与第三方系统的集成方案，接下来将具体介绍SDK的架构设计。</p> <p><strong>报告的组成</strong></p> <p>在SDK中，报告是具备跨平台展示的能力。不管是在哪一个平台，一张报告都是由容器、布局、元素以及元素之间的交互等组成的。</p> <ul> <li> <p> 容器，一般是报告样式的体现，比如背景色等。 </p></li> <li> <p> 布局，桌面端有两种布局，磁吸式布局和悬浮式布局，移动端有磁吸式布局。 </p></li> <li> <p> 元素，将元素分为3大类，图表元素、过滤元素和其他元素。 </p></li> <li><p>交互，图表的联动效果，过滤元素的筛选效果等。</p></li> </ul> <p>用一张图例来说明一下：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/6ef6209bp00qyckui000fd200m600oeg00m600oe.png"></p> <p>图6</p> <p><strong>图表的组成</strong><br></p> <p>在SDK中，图表是一个核心元素。图表是由容器、主体内容和交互组成。</p> <ul> <li> <p> 容器，图表通用的样式一般体现在这里，比如背景色，内边距等。 </p></li> <li> <p> 主体，图表的主体内容是通过可视化库渲染而成的。 </p></li> <li><p>交互，一般涉及下钻上卷、筛选等。</p></li> </ul> <p>可以参考下图：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/0b41611fp00qyckui000fd200pe00gsg00pe00gs.png"></p> <p>图7</p> <p><br></p> <p><strong>SDK的技术架构图</strong></p> <p>SDK的技术架构图如下所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/7e0b4a6bp00qyckui000zd200u000nyg016x00y9.png"></p> <p>图8 SDK的技术架构图</p> <p>上图中，可以清晰地看出SDK中各个类和组件之间的关系，箭头方向表示状态数据流向。</p> <p>在图示的组件中，其中有几个比较特别的的组件，分别是ReportLayout、ElementBox、ChartElement，这几个组件比较有代表性。</p> <p><strong>ReportLayout</strong>，这是一个布局组件，是一个高度封装的组件，可以看出，除了ReportContent，还有TabsElement也使用到了它。</p> <p><strong>ElementBox</strong>，这是一个元素渲染器组件，是一个非常重要的组件，在这个组件中，包含了几个核心功能：懒加载、style mixin、数据加载等等。</p> <p><strong>ChartElement</strong>，这是一个核心组件，是一个绘制图表的组件。在这个组件中，百分点科技对不同的可视化库做了封装，使用策略模式绘制不同的图表。</p> <p><strong>SDK的状态管理</strong></p> <p>一份报告的渲染涉及很多个数据状态，这里百分点科技将一些状态抽离出来，统一管理，进而方便对齐维护。</p> <p>（1）Elements State是对元素的数据状态进行管理，比如图表的联动、下钻、过滤等等，如下图所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/1ec48e44p00qyckuj003nd200u000srg00um00tc.png"></p> <p>图9</p> <p>从上面的示例代码可以看出，百分点科技采用比较扁平化的数据结构来管理元素的状态，这样可以更方便地更新元素数据。</p> <p>（2）Layout State是针对于布局上一些比较特殊的状态进行管理。比如注释组件的展开闭合，因为注释组件的宽度和高度的设置，在Report Item组件中就设定好了，具体的注释组件和Report Item相隔较远，所以这个时候引入了Context。数据结构如下图所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/b3a164f2p00qyckuk000bd200l8006cg00l8006c.png"></p> <p>图10 数据架构</p> <p>对于Layout State和各相关组件的关系，以Tips组件为例，如下图所示：</p> <p><img src="http://dingyue.ws.126.net/2021/0824/f75136a8p00qyckuk0006d200k200a2g00k200a2.png"></p> <p>图11 组件关系</p> <p><br></p> <p><strong>4. SDK技术栈</strong></p> <p><strong>框架和库的选择</strong></p> <p>（1）react/react-dom</p> <p>由于SDK是从BI系统中分离出来的，是一个相当复杂的一个模块，有视图，有model，百分点科技BI团队使用react技术栈，所以SDK也会使用react来进行开发。</p> <p>（2）g2/echarts</p> <p>在数据的可视化方面，目前业内比较好用的有highcharts、echarts、g2等等，这次SDK的开发会采用其中的g2和echarts，其中echarts主要用于地图图表的开发。</p> <p>（3）antd</p> <p>SDK中会使用到大量的前端通用组件，BI系统本身使用了antd UI 库，那么在SDK中，为保证风格统一，提高开发效率，百分点科技选择了antd组件库。</p> <p>（4）leaflet</p> <p>BI中有一个关于GIS的地图，市面上比较流行的的GIS库有openlayer和leaflet，这里我们选择了leaflet，原因是openlayer 过于庞大，leaflet相对来说比较轻巧，插件化，对于移动端比较友好，leaflet完全可以满足需求。</p> <p><strong>构建工具的选择</strong></p> <p>SDK的构建使用webpack，前面说过，SDK是从BI系统中分离出来的的独立模块，功能非常复杂，使用的资源类型比较多，有css 、img等，也使用了很多cjs规范的包，当先市面上比较流行的是webpack构建工具，生态也非常活跃。</p> </p><p> <p> <br> </p> </p><p> <p><strong>结束语</strong></p> </p><p> <p> <br> </p> <p> <br> </p> </p><p> <p>因此，采用嵌入式BI分析的方式，能够让应用系统无缝集成BI分析能力，将数据分析和展示整合到同一个环境中，满足用户实时分析高价值的业务问题。同时，把BI平台的前端渲染能力封装成SDK，代码级深度嵌入至宿主系统，能够提升系统安全性，页面加载和渲染体验宛如原生。</p> <p>目前，百分点科技已实现了“分析结果嵌入”，未来我们将继续研究更高阶的嵌入式BI分析，如将仪表板设计器、图表设计器嵌入业务系统，不断增强应用软件原生的数据可视化分析能力。</p> <p><img src="http://dingyue.ws.126.net/2021/0824/055dd00ep00qyckul005gd200u000hvg00xc00ju.png"></p> </p> </body> </html>

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.