文档

管理自定义组件

更新时间:

本文为您介绍如何注册、调试、发布、删除组件等操作。

背景信息

Quick BI自定义组件有运行状态显隐状态两种维度的状态。

运行状态

运行状态是描述自定义组件从创建到销毁的一系列状态, 根据组件的开发模式的不同而有所不同。通过自定义组件管理平台可以维护组件的运行状态, 其路径为开放平台>自定义组件

在线编辑

  • 待发布 - 刚注册, 或已发布且信息有修改, 但未同步到线上的状态。

  • 已发布 - 线上运行中的状态。

image.png

专业模式

  • 开发中 - 刚注册但未上传开发包的状态。

  • 待发布 - 上传了开发包, 或已发布且信息有调整, 但未同步到线上的状态。

  • 已发布 - 线上运行中的状态。

image.png

您可以在自定义组件管理平台上,维护组件的运行状态。

注册组件

  1. 登录Quick BI控制台

  2. 在Quick BI首页,组织管理员按照下图指引,注册组件。

    image..png
    说明

    开发模式支持在线编辑模式和专业模式,您可以根据实际情况进行选择,

    请参见模式一. 在线开发模式二. 本地开发

  3. 注册组件对话框中,配置以下参数。

    界面参数说明

    参数

    说明

    组件名称

    您可以自定义组件名称。

    图标

    支持从本地上传图片作为组件的图标。

    说明
    • 图片分辨率大于60×60像素,且小于180×60像素。

    • 单张图片大小不超过100 KB。

    组件类型

    支持添加图表类型、图表卡片菜单类型、电子表格菜单类型的组件。

    适用范围

    添加组件的应用范围,支持在仪表板、数据大屏和电子表格中添加图表类型的自定义组件。

    开发模式

    • 在线编辑:在页面中编辑调试,适合大部分场景。

    • 专业模式:使用SDK本地调试,适合更专业的场景。

    调试地址

    用于调试自定义组件的地址。

    说明

    专业模式需要调试地址。

    平台

    支持添加自定义组件的平台,支持PC端和移动端。

    开启ShadowDOM

    开启后,组件dom会开启ShadowDOM模式。

    默认宽高

    设置自定义组件的宽度和高度。

    依赖的第三方库

    可选项,填写CDN地址,用于提升组件性能。

    备注

    给自定义组件添加备注。

  4. 单击确定

    此时,您可以在组件管理页面,看到您新注册的组件。

    image

编辑组件

  1. 在组件管理列表中,单击编辑图标。

    image
  2. 修改组件页面,修改界面参数。

    • 在线编辑

      image..png

      您可以修改组件名称、图标等,具体界面参数解释请参见管理自定义组件

    • 专业模式

      本例以上传开发包为例介绍。

      image

      其他界面参数解释请参见管理自定义组件

  3. 单击确定

完成修改后,组件会进入待发布状态,在专业模式下,开发可以通过种子项目中执行npm run pack导出组件包。

调试组件

您可以按照下图指引 ,进行组件调试。

image..png

在线编辑下, 组件调试环境有3种:

  • 在线开发环境 - 组件源码可以在线编辑,其他配置使用待发布包配置。

  • 待发布环境 - 组件资源会从待发布包读取,其他配置使用待发布配置。

  • 线上环境 - 组件资源会从已发布包读取,其他配置使用已发布配置。

专业模式下, 组件调试有3种模式:

  • 本地调试:组件资源会从本地服务获取,适用于组件注册后的本地开发。

  • 待发布包调试:组件资源会从待发布包获取,适用于待发布前的预览。

  • 发布包调试:组件资源会从线上获取,使用于查看线上隐藏的组件。

说明
  • 本地调试下,请确保组件本地服务已经启动。

  • 调试模式下, 仪表板自定义组件在菜单栏中显示, 即,组件的显隐状态失效。

  • 调试模式下, 仪表板可以保存但无法发布。

在调试组件的对话框中, 选择要调试的调试范围工作空间和对应的仪表板,单击前往调试, 会跳转到对应的仪表板页面,具体请参见调试组件

显隐组件

显隐状态描述自定义组件是否能够在仪表板中新建,共有两种:

  • 隐藏:新增的组件不能在仪表板菜单栏显示, 也无法切换图表,但可以显示之前保存过的图表。

  • 显示:新增的组件可以在仪表板菜单栏显示 ,也支持切换图表。

    image

在仪表板上则是该组件的入口显示或者隐藏。

image
说明
  • 修改组件显示状态不会让组件进入待发布状态,而是直接线上生效。

  • 状态为开发中时,组件将会一直显示。

发布组件

  • 在线编辑

    1. 在组件管理列表中,找到待发布状态的组件,单击发布图标,发布组件。

      image..png
    2. 在弹出的发布组件对话框中, 确认变更内容无误后(有变更的属性会标红),单击确认发布

      组件就会进入已发布状态。

      image..png

      您可以点击查看代码比对查看具体的代码变动。

      image.png
  • 专业模式

    发布组件前,请确保已上传开发包

    1. 在组件管理列表中,找到待发布状态的组件,单击发布图标,发布组件。image

    2. 在弹出的发布组件对话框中, 确认变更内容无误后(有变更的属性会标红),单击确认发布

      组件就会进入已发布状态。image

删除组件

在组件管理列表中,找到目标组件,单击删除图标,删除组件。

image

删除组件后,有以下影响:

  • 无法基于该自定义组件新增图表。

  • 先前已经保存过该自定义组件的图表也将不能显示改组件,并在原来的该组件的位置提示该图表元信息异常或已被删除

    image

  • 本页导读 (0)
文档反馈