数据可视化大屏设计，组件的设置与调整是打造炫酷大屏的基础！

数字化时代，数据可视化大屏是信息呈现和交流的方式之一。可视化大屏可以直观、高效地展示数据，不同类型的组件在大屏设计器中扮演着至关重要的角色。JVS-智能BI的可视化大屏中，提供了丰富的大屏组件，包括：图表、地图、控件、图形等等。接下来我将详细介绍组件的配置与调整方法，包括组件的选择与预览、位置与大小的调整、辅助对齐技巧、样式配置选项、组件的层叠与群组管理等功能。

组件的基础设置

数字大屏其实本质上是通过大量的组件通过设计，最后拼装出来的可视化效果，所以组件就是大屏设计的最基础的元素。那什么是组件？

组件是：是可复用、可配置的界面基础元素，用于展示数据、交互控制的原子单位。例如：柱状图、饼状图、折线图、数字翻牌器、文本、tab选项、按钮等等，都是组件。组件是构成大屏的基本单元，通过拖拽、配置组件，用户可以灵活搭建出符合需求的大屏页面。

那么大屏是否美观，与组件的灵活、外观风格等配置是分不开的，大屏和纯的图表配置有什么差异，其实主要集中在组件的布局方式，图表是采用的瀑布式布局，大屏采用的是可以层叠的任意布局，可以组成多层，多页面。

组件的新增

点击图表或者其他的组件选项，系统弹出组件的列表，把对应的组件拖入画布中，在右侧的画布中将实时预览到组件

点击选中右侧的组件时，系统将高亮展示对应的组件。

位置与大小调整

组件在高亮选中时，系统会把组件的轮廓展示出来，并且展示轮廓上的各个可拖动的关键操作点，可以拖拽对应的控制点用以可以直接修改 组件的大小，这种控制相对比较主观

除了通过手动拖拽控制组件大小，也可以通过精确控制组件大小，通过（x,y,w,h）四个参数进行位置与大小的控制

X:为左上角的横坐标的位置

Y:为左上角的中坐标的位置

也就是是控制组件在画布上的坐标的位置，控制组件的基本定位，坐标的原点在（0,0）处，如下图所示：

W:组件的宽度

H:组件的高度

辅助对齐

对组件的位置配置，还可以通过对多个组件对齐的方式调整位置，如下图所示，选中多个组件，系统会自动展示对多个组件的样式配置，这里主要包括对齐的便捷操作，这种操作会更加精确。

除了多个组件的对齐方式，系统还提供了 辅助线的设置，点击标尺，系统会自动生成对应的辅助线，如下图所示：

样式配置

除了对组件的位置、大小的配置，还可以设置透明度、组件的一些特殊的配置，

例如上图所示的柱状图，那么还包括配色方案、背景颜色配置、图例设置、X轴、Y轴等具体配置。

组件的层叠

组件与组价是可以通过堆叠展示的，点击图层时，可以看到本页面上的各个组件的 层级堆叠情况，如下图所示，从左侧的组件堆叠的情况看，“图片”组件是在“柱状图”的上方，

拖动组件的层级变化或者右键控制组件的层级，那么我们可以看到层级的效果，图片放入底部后，柱状图则在图片上方

可以通过右键操作对组件的层级进行调整

组件的群组

多个组件可以组成1个组，很多操作就可以对这个组进行统一操作，例如移动位置，放大缩小等操作，群组的操作是选定几个组件，邮件选择“组合”，或者通过快捷按钮，Ctrl+G，取消组合也是相同的操作。

组合之后可以在图层中看到群组的相关信息，可以双击群组名称进行修改：

组件的层级调整

组件之间是按照层级的方式进行排布，不同层级的组件可以在左侧的层级目录中拖拽调整上下排序，也可以在画布中通过邮件设置选中对象的层级，支持群组的统一操作

在线demo：http://bi.bctools.cn

gitee地址：https://gitee.com/software-minister/jvs-bi