文档中心

事件

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

首次发布时间：2022.10.27 11:06:22

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

1. 事件类型

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

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页
Dashboard	dashboardHeightChange	{ height: number }	仪表盘布局变化时，返回高度信息
Dashboard	dashboardCreate	{ dashboardId: number }	创建仪表盘
Dashboard	dashboardSave	{ dashboardId: number }	保存仪表盘
Dashboard	dashboardSaveStatusChange	boolean	仪表盘保存状态变化时，返回是否保存
Dashboard	dashboardBackClick	void	配置特性 `dashboard.enableCustomEditBackClickHandler` = `true` 后开启，阻止默认的仪表盘编辑返回事件处理，并进行自定义处理
Dashboard	enterVizQuery	{ reportId: number; dataSetId: number }	点击仪表盘图表标题、编辑图标、进入可视化查询图标时触发
VizQuery	vizQueryDataSetChange	{ dataSetId: number }	切换数据集
VizQuery	vizQueryQuery	{ queryId: number }	查询结束
VizQuery	vizQuerySave	{ reportId: number, dashboardId?: number }	图表保存
Report	chartItemSelect	{ data: Record<Id, string	number>, fieldMap: Record<Id, FieldInfo>, fieldId?: Id, reportId?: number }

2. 代码示例

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

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'))

1. 事件类型

2. 代码示例