You need to enable JavaScript to run this app.
导航

Iframe集成方案

最近更新时间2023.05.26 20:13:59

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

1. 前提

该操作需要开发人员完成,该开发人员建议在需要操作的项目中赋予需要嵌入第三方资源的权限,为了方便建议是项目管理员权限,操作完成之后在根据实际情况赋予权限。权限说明见权限指南

2. 操作步骤

2.1 Step1.获得目标仪表盘/图表的 URL 链接

根据 URL 配置中获得 URL 链接获取目标资源的 URL

2.2 Step2.加入自定义参数

2.2.1 自定义参数

你可以传递自定义参数改变嵌入效果:

  • inline - 需要设置为true,表示使用嵌入模式
  • feature - 特性配置,用于控制部分界面功能的显示 / 隐藏或展示效果,详细使用方法可见特性配置
  • filter - 筛选器参数配置。在嵌入仪表盘时可覆盖公共筛选器默认值,嵌入图表时可覆盖图表筛选字段。详细使用方法可见覆盖筛选器

2.2.2 示例

  • 嵌入单个仪表盘
https://console.volcengine.com/bi/datawind/#/external/dashboard/36154?appId=1000157&inline=true
  • 嵌入仪表盘,隐藏 header,并覆盖 Region 公共筛选器的op为 in,value为'East','South'
https://console.volcengine.com/bi/datawind/#/external/dashboard/36154?appId=1000157&inline=true&feature={"dashboard": {"showHeader": false }}&filter=Region in 'East','South'

2.3 Step3.生成代码

根据上述获得的信息来拼接代码,比如以获得的仪表盘链接举例:

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

2.3.1 生成 HTML 代码

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

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

2.3.2 使用实例

  • 如果在使用 React 框架,参考如下实例

  • 在 iframe 的 url 中传入 feature 参数来配置通用特性。feature 的类型为 JSON.stringify 后的特性配置对象。可以参考如下的 iframe 嵌入代码隐藏仪表盘 header

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

class AeolusComponent extends React.Component {
  render() {  
    return (      
      <iframe 
        allowFullScreen
        src={`https://console.volcengine.com/bi/datawind/#/external/dashboard/47610?appId=1010681&inline=true&feature=${JSON.stringify(             
              {               
                dashboard: {    
                  showHeader: false          
                }          
              }      
        )}`}
      />
    )
  }
}
ReactDOM.render(<AeolusComponent />, document.querySelector('body'))