Auto Byte

专注未来出行及智能汽车科技

微信扫一扫获取更多资讯

Science AI

关注人工智能与其他前沿技术、基础学科的交叉研究与融合发展

微信扫一扫获取更多资讯

百分点大数据技术团队: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分析,如将仪表板设计器、图表设计器嵌入业务系统,不断增强应用软件原生的数据可视化分析能力。


百分点
百分点

百分点是中国领先的企业级大数据+AI产品与技术提供商,拥有完整的大数据及认知智能产品线。秉承“用数据推动社会进步”的理念,为业内分享大数据和AI技术在行业实践中的经验与思考。

工程
2
暂无评论
暂无评论~