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

博观而约取,厚积而薄发。这篇文章主要讲述百分点大数据技术团队: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)在业务系统中确定嵌入页面以及方案,将分析结果合理地展现。
如下图所示,我们将“零售商品综合看板”等多个分析结果,嵌入在商城系统后台相应的菜单导航,为业务人员日常分析提供了极大的便利。
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图1 嵌入式BI分析
二、业内嵌入式分析解决方案
1.主流技术栈图解
iframe
iframe技术图解如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图2 iframe 技术图解
iframe标签是框架的一种形式,支持在一个页面内嵌入另一个页面,基本语法:
< iframe src="https://www.songbingjia.com/android/文件路径"> < /iframe>
SDK
SDK技术图解如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图3 SDK 技术图解
使用SDK技术将功能集成到第三方系统,首先利用npm下载 SDK 包,安装成功后,使用import导入包,然后对SDK配置做一个初始化处理,通过javascript获取dom元素渲染报告嵌入到页面中。
2.主流技术栈的优缺点
目前市场主流技术栈主要有两大类,分别为iframe和SDK,以下表格将对它们的优缺点做出分析:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)

3. 厂商所用主流技术栈
百分点科技选取了6家厂商所用的主流技术栈,并做出分析说明,如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)

根据调研结果可见,国外厂商基本都支持SDK方式的嵌入式分析,国内大多厂商目前在嵌入式分析领域技术积累和沉淀稍显不足。SDK嵌入解决了iframe集成的安全隐患,可以深度嵌入第三方业务生态,宛如原生。百分点科技从国际视野出发,打造安全可控的嵌入式BI技术,使用国产化BI赋能更多行业数字化转型。
?三、百分点BI嵌入式分析解决方案
百分点BI嵌入式分析支持两种形式:iframe和SDK。iframe技术相对而言比较简单,各厂商基本都支持,下面将重点介绍SDK这种形式。
1. SDK总体架构
架构图
百分点BI SDK架构图如下:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多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对象了。

< divstyle="width: 100%; height: 100%"> Loading...< /div>

< link type="text/css"rel="stylesheet"href="https://www.songbingjia.com/android/cbi-web-sdk/umd/bi-web-sdk.min.css"/>
< scriptsrc="https://www.songbingjia.com/android/lodash.min.js"> < /script>
< scriptsrc="https://www.songbingjia.com/android/leaflet.js"> < /script>
< script src="https://www.songbingjia.com/android/echarts.min.js"> < /script>
< scriptsrc="https://www.songbingjia.com/android/cbi-web-sdk/umd/bi-web-sdk.min.js"> < /script>

< script>
window.addEventListener(\'load\', function() {
// yourcode
});
< /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)获取报告秘钥
在集成之前,需要先拿到报告秘钥。为了满足不同个场景的嵌入,可以生成多个报告秘钥,如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图5
图中已经生成了5个不同的报告秘钥,ID那一列就是具体的秘钥,后面生成报告就是依赖这个秘钥了。
(2)创建一个报告容器
在生成报告之前,需要在代码中创建一个报告容器,也就是一个html标签,并且添加上ID。为了用户体验,可以在其内部添加一个loading效果。可以参考如下:

< div style="width: 100%; height:100%" >
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 } });

可以修改的报告样式如下表所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)

general属性值说明:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)

padding属性值说明:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
background属性值说明:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)

pageSetting属性值说明:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)

font属性值说明:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多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大类,图表元素、过滤元素和其他元素。
  • 交互,图表的联动效果,过滤元素的筛选效果等。
用一张图例来说明一下:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图6
图表的组成
在SDK中,图表是一个核心元素。图表是由容器、主体内容和交互组成。
  • 容器,图表通用的样式一般体现在这里,比如背景色,内边距等。
  • 主体,图表的主体内容是通过可视化库渲染而成的。
  • 交互,一般涉及下钻上卷、筛选等。
可以参考下图:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图7

SDK的技术架构图
SDK的技术架构图如下所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图8 SDK的技术架构图
上图中,可以清晰地看出SDK中各个类和组件之间的关系,箭头方向表示状态数据流向。
在图示的组件中,其中有几个比较特别的的组件,分别是ReportLayout、ElementBox、ChartElement,这几个组件比较有代表性。
ReportLayout,这是一个布局组件,是一个高度封装的组件,可以看出,除了ReportContent,还有TabsElement也使用到了它。
ElementBox,这是一个元素渲染器组件,是一个非常重要的组件,在这个组件中,包含了几个核心功能:懒加载、style mixin、数据加载等等。
ChartElement,这是一个核心组件,是一个绘制图表的组件。在这个组件中,百分点科技对不同的可视化库做了封装,使用策略模式绘制不同的图表。
SDK的状态管理
一份报告的渲染涉及很多个数据状态,这里百分点科技将一些状态抽离出来,统一管理,进而方便对齐维护。
(1)Elements State是对元素的数据状态进行管理,比如图表的联动、下钻、过滤等等,如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图9
从上面的示例代码可以看出,百分点科技采用比较扁平化的数据结构来管理元素的状态,这样可以更方便地更新元素数据。
(2)Layout State是针对于布局上一些比较特殊的状态进行管理。比如注释组件的展开闭合,因为注释组件的宽度和高度的设置,在Report Item组件中就设定好了,具体的注释组件和Report Item相隔较远,所以这个时候引入了Context。数据结构如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图请点击输入图片描述(最多18字)
图10数据架构
对于Layout State和各相关组件的关系,以Tips组件为例,如下图所示:
百分点大数据技术团队(BI嵌入式分析实践)

文章图片

编辑搜图图片存在马赛克,建议更换或删除× 请点击输入图片描述(最多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分析,如将仪表板设计器、图表设计器嵌入业务系统,不断增强应用软件原生的数据可视化分析能力。
【百分点大数据技术团队(BI嵌入式分析实践)】?

    推荐阅读