文档中心

JS SDK 集成方案

最近更新时间：2023.05.26 20:14:09

首次发布时间：2021.02.23 10:42:07

1. 概述

DataWind 支持以 JS SDK 提供对开发者友好的接入方式。事件监听和方法调用在 iframe 集成方式下不支持，这些特性需要通过 SDK 使用。

2. 快速入门

2.1 安装

直接在 HTML 中引入 SDK

<html>
  <head>
    <script src="https://unpkg.byted-static.com/aeolus/sdk/2.3.0/lib/components/index.umd.prod.js"></script>
  </head>
  <body></body>
</html>

2.2 使用

嵌入一个仪表盘的示例代码如下：

import React from 'react'
import ReactDOM from 'react-dom'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-dashboard
        urlPrefix="******"     // 应用访问地址，如SaaS环境Web端地址 https://console.volcengine.com/bi/datawind
        appId="******"         // 项目id
        dashboardId="******"   // 仪表盘id
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

由于 SDK 组件基于 web component，在不同框架（React / Vue）中均可引入使用。

3. 组件

3.1 通用参数

Property	Description	Default
urlPrefix	required, 应用访问地址，如 SaaS 环境 Web 端地址 https://console.volcengine.com/bi/datawind。参考 URL 配置章节
appId	required, 项目 id 见获得资源ID	-
feature	JSON.stringify 后的通用特性配置对象，如`'{"dashboard":{"sheet":{"tabPosition":"top"}}}'`，前往特性配置章节了解更多配置	'{}'
jwtToken	自定义权限 token，可以参考 jwtToken 嵌入仪表盘&图表获取
lang	多语言配置，可选 `zh_CN`, `en_US` 或 `ja_JP` (2.44 版本)	'zh_CN'

3.2 仪表盘

bi-dashboard 提供单个仪表盘浏览页嵌入

3.2.1 参数

Property	Description	Default	Example
dashboardId	required, 仪表盘 id	-	-
sheetId	指定默认激活的 sheet 页面 id	-	-
snapshotId	访问的书签 id	-	-
autoHeight	自动同步 iframe 高度为仪表盘高度，可选 true 或 false	'false'	'true'
filter	公共筛选器覆盖配置	-	如'projectId eq 123', 参考覆盖筛选器章节

3.2.2 示例

import React from 'react'
import ReactDOM from 'react-dom'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-dashboard
        urlPrefix="******"
        appId="******"
        dashboardId="******"
        sheetId="******"
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

3.3 移动端仪表盘

bi-mobile-dashboard 提供单个移动端仪表盘浏览页嵌入

3.3.1 参数

Property	Description	Default	Example
dashboardId	required,仪表盘 id	-	-
sheetId	激活的 sheet 页面 id	-	-
filter	公共筛选器覆盖配置	-	如'projectId eq 123', 参考覆盖筛选器章节

3.3.2 示例

import React from 'react'
import ReactDOM from 'react-dom'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-mobile-dashboard
        urlPrefix="******"
        appId="******"
        dashboardId="******"
        sheetId="******"
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

3.4 仪表盘图表

bi-dashboard-report 提供单个仪表盘图表嵌入

3.4.1 参数

Property	Description	Default
dashboardId	required, 仪表盘 id	-
reportId	required, 图表 id	-
sheetId	激活的 sheet 页面 id，嵌入多 sheet 仪表盘的图表时需要传入	-
filter	图表筛选器覆盖配置，如'projectId eq 123', 参考覆盖筛选器章节	-

3.4.2 示例

import React from 'react'
import ReactDOM from 'react-dom'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-dashboard-report
        urlPrefix="******"
        appId="******"
        dashboardId="******"
        reportId="******"
        feature={JSON.stringify({
          dashboard: {
            report: {
              actions: [],
            },
          },
        })}
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

3.5 可视化查询

bi-viz-query 提供可视化查询模块嵌入

3.5.1 参数

Property	Description	Default
dataSetId	数据集 id	-
queryId	查询 id	-
reportId	图表 id	-

3.5.2 示例

import React from 'react'
import ReactDOM from 'react-dom'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-viz-query
        urlPrefix="******"
        appId="******"
        reportId="******"
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

3.6 大屏

bi-vscreen-preview 提供单个大屏嵌入

3.6.1 参数

Property	Description	Default
id	大屏 id	-

3.6.2 示例

import React from 'react'
import ReactDOM from 'react-dom'
import '@aeolus/sdk'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-vscreen-preview
        urlPrefix="******"
        appId="******"
        id="******"
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

智能数据洞察