更多技术交换、求职机会，欢送关注字节跳动数据平台微信公众号，回复【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=1010681plaintext- $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=autoStep2.退出个性，批改链接
在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天收费试用！