写点什么

字节跳动嵌入式数据分析最佳实践

  • 2022 年 8 月 17 日
    北京
  • 本文字数:4209 字

    阅读完需:约 14 分钟

字节跳动嵌入式数据分析最佳实践

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群


商业智能 (BI) 已经广泛被应用到用户实际业务过程中,如果 BI 作为独立应用平台应用,那么用户在日常使用业务系统(比如 CRM/ERP/OA 等)时,就需要经常切换不同系统,繁杂登录过程与应用系统的切换,会导致业务思考的中断,降低效率。这不利于 BI 在企业内做推广,也难实现 IT 应用管理平台的统一。

因此将低门槛数据分析操作功能,和已完成的看板结果直接放置在业务系统程序的 UI 中,就会保证业务用户数据洞察的连续性和可用性。

该篇文章以字节跳动内部应用的实操案例,来完成如下业务场景。


业务场景

案例一

张小明同学希望在自己的运营平台上接入 BI 的可视化分析能力,能够在运营平台上通过点击、拖拽等页面交互方式便可以快速生成可视化图形,获取数据洞见。

经过调研后决定集成 Datawind 平台,将自己的数据源通过数据准备导入到 Datawind 中作为数据集,并在运营平台上嵌入该数据集的可视化查询页面。之后可以直接在运营平台上直接做数据拖拽分析,极大地提高了数据分析效率。



案例二

王小红同学想要建立运营数据看板并分享给不同的地区经理,希望不同的地区经理只看到本地区数据。并且这些数据看板可以集成到地区经理最常用的 CRM 系统之中。

小红发现 Datawind 能够满足制作数据看板的诉求,并且 Datawind 的行权限、自定义筛选器也能满足平台对数据权限控制的需要,也可以快速集成到自己的 CRM 系统中,最后决定使用嵌入 Datawind 仪表盘的方式搭建运营数据看板。



案例三

李小华同学需要对海量的商品交易记录进行查询。他希望使用这样一款查询工具:具备对海量明细数据的查询能力、支持丰富的筛选操作、能够配置表格和单元格样式、必要时可以对表格列的字段公式进行改写。确认 Datawind 满足需要后,李小华在 Datawind 上建立了明细数据报表并将其嵌入到商品交易管理系统中,让每个相关运营同学都能快速查询获得想要的数据结果。



Iframe 集成方案


为了最方便快捷实现集成,可以通过 Iframe 的方式对接,操作方式如下。

概述

该操作需要开发人员完成,主要操作步骤如下所示:

Step 1. 获得目标仪表盘/图表的 URL 链接

Step 2. 链接修改

Step 3. 生成代码


该开发人员建议在需要操作的项目中赋予项目管理员权限,完成后再根据实际情况赋予权限。


Step 1.获得目标仪表盘/图表的 URL 链接

  • 如下两种方式均可获得目标仪表盘/图表/大屏的链接,得到的结果是一致的

  • 仪表盘移动端则只能按照第二种方式获得

1. 直接在产品中获得

(1)仪表盘/图表

  • 图表

    进入到仪表盘预览状态

    点击需嵌入图表右侧,选择「嵌出图表」

显示「复制成功」,之后可以鼠标右键复制,或者键盘 crtl+V 即可

  • 仪表盘

    进入到仪表盘预览状态

    点击需嵌入图表右侧,选择「嵌出仪表盘」


显示「复制成功」,之后可以鼠标右键复制,或者键盘 crtl+V 即可。

(2)大屏

如图在列表页选择查看,打开之后复制浏览器 URL 即可



2. 自行拼接

选择自行拼接,则按照如下方式进行,划下划线内容是变量,在如下参数详解要解释的,其他为固定内容

  • 仪表盘

$HOST/#/external/dashboard/$DASHBOARD_ID?appId=$APP_ID&inline=true

比如:

https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true
复制代码
  • 移动端仪表盘

$HOST-h5/dashboard/?appId=$APP_ID&id=$DASHBOARD_ID&inline=true
复制代码

比如:

https://console.volcengine.com/bi-h5/dashboard/?appId=1010681&id=47610&inline=true
复制代码

注意:移动端链接只能移动端设备访问,如果该链接在 PC 端打开,则默认跳转为 PC 端链接。


  • 图表

$HOST/#/external/dashboard/$DASHBOARD_ID/$REPORT_ID?appId=$APP_ID&inline=true

比如:

https://console.volcengine.com/bi#/external/dashboard/47610/305962?appId=1010681&inline=true
复制代码
  • 可视化查询

$HOST/#/dataQuery?appId=$APP_ID&inline=true

比如:

https://console.volcengine.com/bi#/dataQuery?appId=1010681&inline=true
复制代码
  • 大屏

$HOST/vScreen/preview?appId=$APP_ID&id=$VSCREEN_ID&resizeMode=auto

比如:

https://console.volcengine.com/bi#/vScreen/preview?appId=1010681&id=11&resizeMode=auto
复制代码
  • 参数详解

$HOST

  • SaaS 环境设置为 https://console.volcengine.com/bi

  • 私有化部署环境替换为产品部署的域名

$HOST-h5

移动端的域名

  • SaaS 环境设置为 https://console.volcengine.com/bi-h5

  • 私有化部署环境替换为产品移动端部署的域名

$APP_ID

  • 项目 id。在项目下任意打开地址均可获得,如图所示,任意打开一个项目下的链接,URL 如下所示,app_Id 值为 1010681

https://console.volcengine.com/bi#/dashboard/47610?appId=1010681
复制代码

$DASHBOARD_ID

  • 在列表页面打开需要外嵌的仪表盘,获得浏览器的 URL 链接如下,则 dashboardId 值为 47610

https://console.volcengine.com/bi#/dashboard/47610?appId=1010681

  • $REPORT_ID

  • 图表 id,标识唯一的图表。可视化查询页面 URL 的 rid 表示图表 id。在如下可视化查询链接中,reportId 值为 306828

https://console.volcengine.com/bi#/dataQuery?appId=1010681&id=98850742&rid=306828&sid=22569
复制代码
  • $VSCREEN_ID

  • 大屏 id。在如下仪表盘链接中,vscreenId 值为 4750

https://console.volcengine.com/bi#/vScreen/4750?resizeMode=auto
复制代码


Step2.加入特性,修改链接

在 iframe 的 url 中传入 feature 参数来配置通用特性,以下是该特性的解释说明,可以根据实际情况选择需要的特性。

{  "dashboard": {                       // --- 仪表盘模块特性 ---    "showHeader": true,                // 显示Header    "showFavor": true,                 // 显示收藏    "showOwner": true,                 // 显示owner    "actions": [                       // 仪表盘操作,数组类型      "refresh",                       // 刷新      "fullscreen",                    // 全屏      "share",                         // 分享      "subscribe",                     // 订阅      "snapshot",                      // 书签      "auth",                          // 授权      "edit",                          // 编辑      "setAsDefaultDashboard",         // 设为默认仪表盘      "exportImage",                   // 导出图片      "embed",                         // 嵌出      "accessStatistics"               // 访问统计    ],    "report": {                        // --- 仪表盘图表特性 ---      "showHeader": true,              // 显示header      "actions": [                     // 仪表盘图表操作,数组类型        "imgExport",                   // 导出图片        "excelExport",                 // 导出excel        "pivotExport",                 // 导出透视表        "copyToDashboard",             // 复制图表        "embed",                       // 嵌出图表        "createMonitor"                // 新建监控      ],    },    "sheet": {                         // --- 仪表盘sheet特性 ---      "tabPosition": "top"             // tab页显示位置,可选top/left    },  }}
复制代码


{  "dashboard": {                       // --- 仪表盘模块特性 ---    "showHeader": true,                // 显示Header    "showFavor": true,                 // 显示收藏    "showOwner": true,                 // 显示owner    "actions": [                       // 仪表盘操作,数组类型      "refresh",                       // 刷新      "fullscreen",                    // 全屏      "share",                         // 分享      "subscribe",                     // 订阅      "snapshot",                      // 书签      "auth",                          // 授权      "edit",                          // 编辑      "setAsDefaultDashboard",         // 设为默认仪表盘      "exportImage",                   // 导出图片      "embed",                         // 嵌出      "accessStatistics"               // 访问统计    ],    "report": {                        // --- 仪表盘图表特性 ---      "showHeader": true,              // 显示header      "actions": [                     // 仪表盘图表操作,数组类型        "imgExport",                   // 导出图片        "excelExport",                 // 导出excel        "pivotExport",                 // 导出透视表        "copyToDashboard",             // 复制图表        "embed",                       // 嵌出图表        "createMonitor"                // 新建监控      ],    },    "sheet": {                         // --- 仪表盘sheet特性 ---      "tabPosition": "top"             // tab页显示位置,可选top/left    },  }}
复制代码
  • 特性说明



Step3.生成代码

根据上述获得的信息来拼接代码,比如以获得的仪表盘链接举例:


https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true
复制代码

1. 生成 HTML 代码

比如如下代码指的是隐藏仪表盘 header

<iframe allowfullscreen="true" src='https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true&feature={"dashboard":{"showHeader":false}}' />
复制代码

2. 使用实例

  • 如果在使用 React 框架,参考如下实例

  • 在 iframe 的 url 中传入feature  参数来配置通用特性。feature 的类型为 JSON.stringify 后的特性配置对象。可以参考如下的 iframe 嵌入代码隐藏仪表盘 header

import React from 'react'import ReactDOM from 'react-dom'
class EmbedComponent extends React.Component { render() { return ( <iframe allowFullScreen src={`https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true&feature=${ JSON.stringify( { dashboard: { showHeader: false } } ) }`} /> ) }}
ReactDOM.render(<AeolusComponent />, document.querySelector('body'))
复制代码


立即跳转火山引擎智能数据洞察DataWind官网了解详情,并参与 30 天免费试用!

发布于: 刚刚阅读数: 3
用户头像

公众号byte-dataplatform 2021.12.29 加入

字节跳动数据平台团队,赋能字节跳动各业务线,对内支持字节绝大多数业务线,对外发布了火山引擎品牌下的数据智能产品,服务行业企业客户。同名公众号欢迎了解。

评论

发布
暂无评论
字节跳动嵌入式数据分析最佳实践_字节跳动_字节跳动数据平台_InfoQ写作社区