You need to enable JavaScript to run this app.
导航
事件
最近更新时间: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
  }
}

ModuleTypeDataDescription
Globalloadvoid页面加载事件。页面加载事件并非图表显示,仅表示首屏资源加载完成
Globalfocusvoid页面获取焦点
DashboarddashboardChange{ dashboardId: number; sheetId: number }切换仪表盘或者Sheet页
DashboarddashboardHeightChange{ height: number }仪表盘布局变化时,返回高度信息
DashboarddashboardCreate{ dashboardId: number }创建仪表盘
DashboarddashboardSave{ dashboardId: number }保存仪表盘
DashboarddashboardSaveStatusChangeboolean仪表盘保存状态变化时,返回是否保存
DashboarddashboardBackClickvoid配置特性 dashboard.enableCustomEditBackClickHandler = true 后开启,阻止默认的仪表盘编辑返回事件处理,并进行自定义处理
DashboardenterVizQuery{ reportId: number; dataSetId: number }点击仪表盘图表标题、编辑图标、进入可视化查询图标时触发
VizQueryvizQueryDataSetChange{ dataSetId: number }切换数据集
VizQueryvizQueryQuery{ queryId: number }查询结束
VizQueryvizQuerySave{ reportId: number, dashboardId?: number }图表保存
ReportchartItemSelect{ data: Record<Id, stringnumber>, 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'))