乐趣区

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

jiezi

更多技术交换、求职机会，欢送关注字节跳动数据平台微信公众号，回复【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.co…
    私有化部署环境替换为产品部署的域名
  • $HOST-h5
    挪动端的域名
    SaaS 环境设置为 https://console.volcengine.co…
    私有化部署环境替换为产品挪动端部署的域名
  • $APP_ID
    我的项目 id。在我的项目下任意关上地址均可取得，如图所示，任意关上一个我的项目下的链接，URL 如下所示，app_Id 值为 1010681
https://console.volcengine.com/bi#/dashboard/47610?appId=1010681
plaintext
  • $DASHBOARD_ID
    在列表页面关上须要外嵌的仪表盘，取得浏览器的 URL 链接如下，则 dashboardId 值为 47610
https://console.volcengine.com/bi#/dataQuery?appId=1010681&id=98850742&rid=306828&sid=22569
  • $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://poc.volces.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
    },
  }
}
  • 个性阐明

Step3. 生成代码

根据上述取得的信息来拼接代码，比方以取得的仪表盘链接举例：

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

生成 HTML 代码

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

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

应用实例

  • 如果在应用 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 天收费试用！

退出移动版