Web可视化应用的大屏组件支持添加和配置多种类型的子组件,帮助您高效地开发多样式的可视化大屏项目。本文介绍如何在大屏编辑器中添加并配置组件。

添加组件

  1. 在画布编辑器页面,单击左上角的组件列表图标,展开组件列表页面。
    展开组件列表页
  2. 组件列表页面中,单击左侧导航栏的某一个组件类型图标,选择其中的一个组件,将该组件添加到可视化应用项目中。
    例如添加折线柱图组件。添加基本柱图组件
    组件添加成功后,会自动展示在画布中。您可以通过拖拽组件边框,调整组件的大小;单击组件,并通过鼠标拖拽调整组件的位置。

配置组件基础样式

在大屏组件编辑器中,单击画布中的某一个组件,画布右侧会出现配置项面板。

配置项面板
  • 基础属性:在基础属性模块中,您可以调整组件的尺寸、位置、旋转角度和透明度。基础属性面板
    • 图表尺寸:包括组件的宽度和高度,单位为px。可单击锁定长宽比按键锁定组件的宽高比,等比例修改组件的宽高。再次单击进行解锁,解锁后宽高比不受限制。
    • 图表位置:包括组件的横坐标纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
    • 旋转角度:以组件的中心为中心点,进行旋转,单位为度(°)。
      • 手动输入角度值,控制组件的旋转角度。
      • 拖动圆圈旋转控制图标图标内的黑点,控制组件的旋转角度。
      • 单击左右翻转图标图标,控制组件左右翻转样式。
      • 单击上下翻转图标图标,控制组件上下翻转样式。
    • 透明度:取值范围为0~1。为0时,图表隐藏;为1时,图表全部显示。默认为1
  • 颜色选择器:您可以使用颜色选择器设置组件的字体颜色、轴线颜色、网格线颜色、边框颜色等。以文本颜色为例,您可以通过以下两种方式调整文本颜色。
    • 单击常用色块图标,选择一个颜色。常用色块面板

      常用色块功能可以帮助您快速选择系统中自带的常用颜色,简单方便,可高效修改相应组件的颜色。

    • 单击拾色器图标,可调整文本的颜色透明度、添加或删除全局颜色、选择最近使用颜色。拾色器面板
      • 调整字体颜色透明度:拖动透明度滑块,或者修改A值,调整颜色透明度。
      • 添加或删除全局颜色:在颜色选择框中选择需要添加的颜色,单击全局色彩下方的+,可将当前颜色添加为全局颜色;鼠标移至已添加的全局颜色上,单击拖动至全局色彩区域以外,可删除该全局颜色。
        说明 通过全局色彩选取过的颜色可跨越整个可视化项目,存在于在各个大屏和组件的最近使用栏中,方便您再次使用。
      • 选择最近使用颜色:系统会自动记录您最近使用的颜色,展示在最近使用模块中。当您需要使用同样的颜色时,可单击该颜色色块,将其应用的组件上。

支持的组件列表

组件类型 组件
常规图表 包括柱形图、折线图、饼图、散点图以及其他类型的图表。
地图 包括3D地球、基础平面地图、3D平面世界地图、3D平面中国地图、3D球形地图和三维城市。
媒体 包括萤石云播放器、单张图片、RTMP 视频流播放器、轮播图和视频。
文字 包括轮播列表、业务指标趋势、键值表格、通用标题、跑马灯、词云、轮播列表柱状图、数字翻牌器、多行文本、进度条、进度条表格、状态卡片、文字标签和时间器。
关系网络 包括关系网络和弦图。
素材 包括箭头标绘、自定义背景块、边框、装饰和标志墙。
交互 包括轮播页面、全屏切换、iframe、时间轴、地理搜索框、Tab列表和其他高级交互组件。
其他 包括一些辅助图形,例如时间选择器。