组件基础操作

1. 概述

1.1 功能概述

仪表板设计以组件操作为核心，提供完整的可视化设计解决方案，包含：

• 基础操作： 添加、选择、移动、复制组件等

• 高效工具： 格式刷、组件组合、对齐

• 精准控制： 组件层级管理、组件大小调整

2. 操作步骤

2.1 前提条件

1. 界面状态： 已进入仪表板设计界面，且画布区域至少有一个图表。

2.2 添加组件

1. 在仪表板设计器中，从左侧可视化组件面板直接拖拽可视化组件（如柱状图）至画布即可添加，支持添加多组件协同布局，绑定数据字段后即可呈现可视化效果。

   
   

2.3 组件单选/多选

1. 数据绑定完成后，可通过调整组件属性进一步优化展示效果。组件属性调整支持两种模式：

• 单选： 单独配置单个组件属性

• 多选： 通过Ctrl+点选或鼠标框选批量修改组件的共同属性

  
  

2.4 调整组件位置

1. 选中组件（支持单选/多选）后，可通过鼠标拖拽或键盘的方向键移动组件至目标位置，组件移动精度由底部工具栏的网格对齐开关控制（开启时按网格单位移动，关闭时像素级自由移动）。

2.5 剪切、复制、粘贴和删除组件

1. 选中组件（单选或多选），可以对组件进行剪切、复制、粘贴和删除操作。

   操作	操作步骤说明	操作界面图	鼠标右键操作界面图
   剪切	单击功能菜单栏开始按钮下的剪切图标或使用右键快捷键剪切或使用快捷键Ctrl+X，都可以剪切组件
   复制：	单击功能菜单栏开始按钮下的复制图标或使用右键快捷键复制或使用快捷键Ctrl+C，都可以复制组件
   粘贴	单击功能菜单栏开始按钮下的粘贴图标或使用右键快捷键粘贴或使用快捷键Ctrl+V，都可以粘贴组件
   删除	单击功能菜单栏开始按钮下的删除图标或使用右键快捷键删除或使用快捷键Delete键，都可以删除组件。

• 单个组件，也可以单击所选组件的删除图标来删除。

  
  

2.6 格式刷

1. 选中组件（仅支持单选），单击功能菜单栏开始按钮下的格式刷图标按钮并单击目标组件，即可将外观样式快速应用到目标组件，同时保持数据和交互属性不变，高效统一仪表板设计风格。

   
   

   type=info

   注意： 格式刷仅同步外观样式（如颜色、圆角、标题等），目标组件的数据、交互属性及布局属性将保持不变。

2.7 多组件组合

组件组合功使仪表板设计更高效，轻松实现多组件统一管理和精准布局。

1. 选中组件（仅支持多选/框选多个组件），单击功能菜单栏开始按钮下的组合图标即可给组件设置组合或取消（选中组合）组合。

   组合分类	操作说明	操作按钮界面图	鼠标右键操作界面图
   组合	单击组合按钮下的组合图标或使用右键快捷组合按钮或使用快捷键CTRL+G，即可将多个组件合并为整体，方便后续统一操作，提升仪表板制作效率。设置组合后，组合整体可自由移动/缩放或集成到其他应用（通过URL集成或DIV集成）；单击组合内容的任一组件可单独编辑。
   取消组合	选中已组合的组件，单击组合按钮下的取消组合图标或使用右键快捷键取消组合按钮或使用鼠标快捷键(SHIFT+CTRL+G)快速取消组合，取消后可给组件单独设置属性，也可重新组合组件。

2.8 组件层级

层级功能是复杂仪表板实现专业视觉设计的核心要素，通过精准的层次控制打造立体化视觉效果。

1. 在设计器底部工具栏开启重叠功能，即可激活组件层级功能，开启灵活精准的层次化管理。

   
   

2. 选中组件（单选），单击功能菜单栏开始按钮下的层级图标或使用右键快捷键的上移或下移按钮，选择需要的层级关系。

   操作按钮界面图	鼠标右键操作界面图

• 调整组件层级关系： 选中目标组件后，可通过右键快捷键或使用左侧组件层级单击选择组件，选择后即可调整组件层级关系。

  组件层级界面图	鼠标右键操作界面图

2.9 组件对齐或分布

1. 选中组件（仅支持多选/框选多个组件），单击功能菜单栏开始按钮下的对齐按钮或使用右键快捷键的水平对齐、垂直对齐和组件分布，即可给组件设置对齐方式。

   对齐方式	说明	最少组件个数	操作按钮界面图	鼠标右键操作界面图
   左对齐	将所选组件以最左侧组件为基准对齐	最少需要两个组件
   水平居中	所选组件中心点垂直轴线对齐
   右对齐	将所选组件以最右侧组件为基准对齐
   顶端对齐	所选组件以最上方组件为基准对齐
   垂直居中	所选组件点水平轴线对齐
   底端对齐	所选组件以最下方组件为基准对齐
   水平平均分布	在选定组件范围内等间距排列组件	最少需要三个组件
   垂直平均分布	在选定组件范围内等间距纵向排列组件

2.10 快速调整组件大小

1. 选中组件（仅支持多选/框选多个组件），单击功能菜单栏开始按钮下的大小按钮或使用右键快捷键的大小设置，即可给组件调整大小，使得仪表板设计更方便。

   大小设置	说明	操作按钮界面图	鼠标右键操作界面图
   等高	将所选组件以最后选择的组件为准设置成相同的宽度
   等高	将所选组件以最后选择的组件为准设置成相同的高度
   等大小	将所选组件以最后选择的组件为准设置成相同的宽度和高度
   延伸至左侧	将所选组件的左边框全部延伸至与最左边的边框对齐
   延伸至右侧	将所选组件的右边框全部延伸至与最右边的边框对齐
   延伸至顶部	将所选组件的上边框全部延伸至与最上边的边框对齐
   延伸至底部	将所选组件的下边框全部延伸至与最下边的边框对齐
   互换位置	选中两个组件时可互换位置，互换位置时也会互换大小