事件--智能数据洞察 DataWind-火山引擎

文档中心

立即注册

智能数据洞察 DataWind

进阶指南

事件

在访问智能数据洞察 DataWind 过程中会触发各类事件。使用 SDK 时，我们会将事件分派到对应的 Web Component 上，您可以监听到这些事件。

事件类型

智能数据洞察事件的类型如下所示。具体的 type 与 data 在下表中给出。

说明

type：是一个字符串类型的字段（string），用于标识事件的具体类型。
data：是一个可选的任意类型字段（any），用于携带事件相关的具体数据或参数。

interface BIEvent extends Event {
  detail: {
    type: string;
    data?: any
  }
}

Module	Type	Data	Description
Global	load	void	页面加载事件。页面加载事件并非图表显示，仅表示首屏资源加载完成
Global	focus	void	页面获取焦点
Dashboard	dashboardChange	{ dashboardId: number; sheetId: number }	仪表盘或者Sheet页切换事件 `dashboardId`：目标仪表盘 ID（切换后） `sheetId`：目标 Sheet 页 ID（切换后）
Dashboard	dashboardHeightChange	{ height: number }	仪表盘布局变化时，返回高度信息 `height`：当前仪表盘容器的高度（像素）
Dashboard	dashboardCreate	{ dashboardId: number }	创建仪表盘 `dashboardId`：新创建的仪表盘ID
Dashboard	dashboardSave	{ dashboardId: number }	保存仪表盘 `dashboardId`：保存的仪表盘ID
Dashboard	dashboardSaveStatusChange	boolean	仪表盘保存状态变化时，返回是否保存
Dashboard	dashboardBackClick	void	配置特性 `dashboard.enableCustomEditBackClickHandler` = `true` 后开启，阻止默认的仪表盘编辑返回事件处理，并进行自定义处理
Dashboard	enterVizQuery	{ reportId: number; dataSetId: number }	点击仪表盘图表标题、编辑图标、进入可视化查询图标时触发 `reportId`：被点击图表的报表 ID `dataSetId`：图表关联的数据集 ID
VizQuery	vizQueryDataSetChange	{ dataSetId: number }	切换数据集 `dashboardId`：目标仪表盘 ID（切换后）
VizQuery	vizQueryQuery	{ queryId: number }	查询结束 `queryId`：当前查询的唯一标识
VizQuery	vizQuerySave	{ reportId: number, dashboardId?: number }	图表保存 `reportId`：保存的图表报表 ID `dashboardId`：可选，图表所属仪表盘 ID（若保存到仪表盘）
Report	chartItemSelect	{ data: Record<Id, string	number>, fieldMap: Record<Id, FieldInfo>, fieldId?: Id, reportId?: number } `data` ：查询结果行数据 `fieldMap` ：字段信息键值对 `fieldId` ：表格选中时的指标 id `reportId` ：图表 id

代码示例

如下是监听仪表盘保存事件的示例代码：

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

interface AeolusEvent extends Event {
  detail: {
    type: string;
    data?: any
  }
}

class BIComponent extends React.Component {
  componentDidMount() {
    /**
     * Using `document.querySelector(YOUR_SELECTOR)` or `ref.current` to access the aeolus component dom element, 
     * and call `addEventListener` with your listener
     * @example ref.current.addEventListener('aeolusevent', ...)
     */
    document.querySelector('bi-dashboard').addEventListener('aeolusevent', (e: BIEvent) => {
      const { type, data } = e.detail
      if (type === 'dashboardChange') { console.log('dashboard change', data) }
    })
  }

  render() {
    return (
      <bi-dashboard
        urlPrefix='https://console.volcengine.com/bi/datawind'
        appId='******'
        dashboardId='******'
      />
    )
  }
}

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

最近更新时间：2025.09.17 19:37:27

这个页面对您有帮助吗？

有用

无用