快速开始_智能商业分析 Quick BI(Quick BI)-阿里云帮助中心

在数据驱动业务的背景下，许多公司规划了自己的企业门户系统或数据分析平台，并希望将Quick BI集成嵌入到自有系统中，打造流程统一化、应用一体化的综合性数据分析平台。例如：希望将Quick BI的仪表板编辑页面嵌入到自有系统中，实现用户在不脱离自有系统环境的前提下，完成仪表板编辑操作并顺利返回至自有系统页面的效果。

您可以使用Quick BI提供的嵌入JS SDK，在自有业务系统中快速集成Quick BI系统的特定页面，并通过参数配置的模式灵活自定义相关页面的显示内容及跳转逻辑。

限制说明

仅专业版支持使用嵌入JS SDK。
您需要提前完成阿里云账号与自有系统账号的对接认证，以实现用户在系统间互相跳转时，可以进行无感登录、访问以及相关页面操作。具体说明请参见阿里云SSO。
目前仅支持嵌入Quick BI系统的部分页面，包括：工作台、模板市场、我的看板、订阅管理、监控告警、数据集、数据填报、数据管理、数据准备、仪表板、电子表格、数据大屏、数据门户、即席分析、自助取数。您可以自定义配置相关页面中的显示内容，及返回按钮链接的页面地址。

操作步骤

除了通过 iframe 方式嵌入页面，Quick BI还支持以嵌入JS SDK的形式为开发者提供更友好的嵌入方式。通过嵌入JS SDK，开发者可以根据实际业务需求，自定义设置嵌入特性、监听嵌入事件并调用嵌入行为。以下以嵌入仪表板编辑页面为例进行说明。

说明

iframe 嵌入方式下不支持进行嵌入特性、嵌入事件及嵌入行为的配置，目前仅支持通过嵌入JS SDK配置。

步骤一：安装环境

在开始之前，推荐先学习 ES2015。官方指南假设您已了解关于 HTML、CSS 和 JavaScript 的中级知识。在开发前，您需要进入nodeJS官网，下载并安装Node环境（建议安装Node.js 20 及以上的版本）。安装完成后可以通过以下命令验证是否安装成功。

node -v

步骤二：安装npm包

使用嵌入JS SDK进行Quick BI的嵌入前，首先需要安装该SDK的npm包。Quick BI提供了适配于不同开发环境使用的npm包，开发者可以根据实际开发环境自行选择并安装合适的npm包。

适用于通用JavaScript环境（无框架）
```
npm install @quickbi/bi-embed-client
```

适用于React 框架环境

npm install @quickbi/bi-embed-client-react

适用于Vue2框架环境

npm install @quickbi/bi-embed-client-vue2

步骤三：开发嵌入页面

不同开发环境下的操作方式不同，具体如下。

JavaScript环境（无框架）：通过EmbedClient类创建一个嵌入客户端实例，并操作该实例渲染Quick BI的仪表板编辑页面到宿主的系统中。

import { EmbedClient, EmbedRouteKey } from '@quickbi/bi-embed-client';

const embedClient = new EmbedClient({
  src={
    origin: 'xxx',  // 访问qbi的host
    page: EmbedRouteKey.dashboardEdit,  // 仪表板编辑页对应的EmbedRouteKey
    // 访问qbi仪表板页面的查询参数
    search: {
        workspaceId: 'xxx',  // 空间ID
        id: 'xxx',  // 作品ID
    }
  }
})

embedClient.render(document.getElementById('container'))

React 框架环境（推荐）：通过渲染EmbedComponent组件进行嵌入，组件内部默认实现了创建嵌入客户端实例和自动重新渲染的逻辑。

import React from 'react';
import ReactDOM from 'react-dom';
import { EmbedComponent, EmbedRouteKey } from '@quickbi/bi-embed-client-react';

const Demo: React.FC = () => {
  return (
    <EmbedComponent
      src={
        origin: 'xxx',  // 访问qbi的host
        page: EmbedRouteKey.dashboardEdit,  // 仪表板编辑页对应的EmbedRouteKey
        // 访问qbi仪表板页面的查询参数
        search: {
          workspaceId: 'xxx',  // 空间ID
          id: 'xxx',  // 作品ID
        }
      }
    />
  )
}

ReactDOM.render(<Demo />, document.querySelector('.container'))

Vue2框架环境：直接引入EmbedComponent组件，该组件内部默认实现了创建嵌入客户端实例和响应式渲染的逻辑。

<template>
  <EmbedComponent 
    :src="embedSrc" 
  />
</template>
<script lang="ts">
import Vue from 'vue'
import {
  EmbedComponent,
  EmbedRouteKey,
} from '@quickbi/bi-embed-client-vue2'

export default Vue.extend({
  name: 'SDK',
  components: {
    EmbedComponent
  },
  data() {
    return {
       embedSrc: {
        origin: 'xxx',  // 访问qbi的host
        page: EmbedRouteKey.dashboardEdit,  // 仪表板编辑页对应的EmbedRouteKey
        // 访问qbi仪表板页面的查询参数
        search: {
          workspaceId: 'xxx',  // 空间ID
          id: 'xxx',  // 作品ID
        }
      },
    }
  },
})
</script>

参考文档

关于嵌入客户端实例的详细介绍及开发方式，请参见基本概念、嵌入JS SDK API。
如果您希望通过参考更多开发示例，来理解嵌入JS SDK的使用方式，请参见开发示例。
如果您在开发过程中遇到了问题，可以参见常见问题进行自主排查。