您可以通过以下基本概念,进一步了解Quick BI的自定义可视化功能。
组件构成
在Quick BI中,自定义组件、自定义菜单和自定义页面统称为自定义可视化组件。自定义可视化组件主要由两部分组成:生命周期和元信息。
生命周期
自定义可视化生命周期用于描述组件/菜单/页面在不同阶段如何渲染,是一个包含了bootstrap、mount、unmount、update属性的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参数类型。包含了 container和 customProps两个属性,其接口为:
interface LifecycleProps {
container?: HTMLElement;
customProps?: CustomProps;
}container
container是宿主页面上的一个DOM元素,自定义可视化组件将会渲染到 container 上。如果开启了 Shadow DOM,container的父元素会变成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宿主页中配置自定义可视化组件的入口称之为物料栏,例如:仪表板编辑页、企业门户配置页等。
仪表板物料栏

企业门户物料栏
