JS SDK 集成方案--智能数据洞察-火山引擎

文档中心

立即注册

导航

JS SDK 集成方案

最近更新时间：2025.02.18 10:46:43首次发布时间：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 使用

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

React 框架：

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-open；私有化环境Web端地址https://${domain}/bi
        appId="******"         // 项目id
        dashboardId="******"   // 仪表盘id
      />
    )
  }
}

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

Vue 框架：

<script setup>
// 实际业务逻辑、 获取appId/ dashboardId
</script>

<template>
 <!-- 使用bi-dashbord前 需要在html模板中引入sdk -->
 <bi-dashboard
 urlPrefix="******" // 应用访问地址，如SaaS环境Web端地址 https://console.volcengine.com/bi/datawind-open；私有化环境Web端地址https://${domain}/bi
 appId="******" // 项目id
 dashboardId="******" // 仪表盘id
 />
</template>

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

3. 组件

3.1 通用参数

Property	Description	Default
urlPrefix	required, 应用访问地址，如 SaaS 环境 Web 端地址 https://console.volcengine.com/bi/datawind-open。参考 URL 配置章节
appId	required, 项目 id 见获得资源ID
feature	通用特性配置对象，如`'{"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'
query	公共筛选器覆盖配置		如'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	Example
dashboardId	required,仪表盘 id
sheetId	激活的 sheet 页面 id
query	公共筛选器覆盖配置	如'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 仪表盘的图表时需要传入
query	图表筛选器覆盖配置，如'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={{
         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'))