基本概念

更新时间:
复制为 MD 格式

您可以通过以下基本概念,进一步了解Quick BI的自定义可视化功能。

组件构成

Quick BI中,自定义组件、自定义菜单和自定义页面统称为自定义可视化组件。自定义可视化组件主要由两部分组成:生命周期和元信息。

生命周期

自定义可视化生命周期用于描述组件/菜单/页面在不同阶段如何渲染,是一个包含了bootstrapmountunmountupdate属性的JavaScript对象,其接口为:

interface Lifecycle {
  bootstrap?: LifecycleBootstrap;
  mount?: LifecycleMount;
  unmount?: LifecycleUnmount;
  update?: LifecycleUpdate;
}

bootstrap

开机生命周期。当进入Quick BI宿主页面时,首先会拉取自定义可视化组件并注册,此时会调用 bootstrap 函数。其接口为:

type LifecycleBootstrap<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

mount

挂载生命周期。当第一次渲染自定义可视化组件时,会调用 mount函数。其接口为:

type LifecycleMount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

unmount

卸载生命周期。当卸载自定义可视化组件,会调用 unmount 函数。其接口为:

type LifecycleUnmount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

update

更新生命周期。当自定义可视化组件的props 有更新时,会调用 update 函数。其接口为:

type LifecycleUpdate<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

LifecycleProps

LifecycleProps描述的是传入自定义可视化组件各个生命周期的 props参数类型。包含了 containercustomProps两个属性,其接口为:

interface LifecycleProps {
  container?: HTMLElement;
  customProps?: CustomProps;
}
container

container是宿主页面上的一个DOM元素,自定义可视化组件将会渲染到 container 上。如果开启了 Shadow DOMcontainer的父元素会变成ShadowRoot元素。

customProps

customProps是宿主页面往自定义可视化组件中注入的上下文信息,不同的可视化类型接受不同的上下文信息类型,详细请参考具体可视化类型章节。

下面是关于自定义可视化组件生命周期的最简单的例子:

export {
  bootstrap: (props: LifecycleProps) => {},
  mount: (props: LifecycleProps) => {
    console.log(props); // { container: DOMObject, customProps: {} }
    props.container.textContent = `hello word`;
  },
  unmount: (props: LifecycleProps) => {},
  update: (props: LifecycleProps) => {
    props.container.textContent = `hello word updated`;
  },
}

元信息

自定义可视化元信息是一个JavaScript对象,用于描述自定义可视化组件渲染之外的配置。不同的可视化类型有不同的配置,例如:自定义组件的元信息可以定制数据面板、样式面板、高级面板等功能,详细信息请参考具体可视化类型章节。

// 自定义组件元信息例子
export default {
  propsSchema: {
    // 数据面板配置
    dataSchema: {},
    // 样式面板配置
    styleSchema: {},
    // ...
  }
}

宿主

Quick BI中可以集成自定义可视化组件的页面称之为宿主页。

说明
  • 同一个自定义可视化组件可以被不同的宿主页集成,例如:“自定义线图”既可以集成到仪表板中,也可以集成到数据大屏中。

  • 同一个自定义可视化组件只能被宿主页集成一次,但可以创建多个组件实例,例如:仪表板中可以配置多个“自定义线图”,根据不同数据集展示不同数据。

物料栏

Quick BI宿主页中配置自定义可视化组件的入口称之为物料栏,例如:仪表板编辑页、企业门户配置页等。

  • 仪表板物料栏image

  • 企业门户物料栏image