大屏编辑界面

更新时间:2020-02-10

如何新建并快速开始制作一个大屏页面,请参见快速入门中的大屏制作。本章节将为您介绍大屏编辑时的一些基本操作。

大屏的编辑页面

大屏编辑的界面与报表的类似,分为以下几个区域:

  1. 顶部工具栏:在这里您可以添加新的图表,并对大屏进行保存等操作。
  2. 左侧图层管理:在这里可以通过拖拽的方式改变图表的图层顺序,从而控制图表之间的相互覆盖顺序,列表中越靠上的图表在大屏中就越靠近屏幕上层。图层管理可以默认收起或调整宽度。
  3. 右侧控制面板:在没有选中图表的时候,这里可以对大屏本身的配置进行调整;选中某个图表的时候,这里可以对这个图表的位置、大小、样式、数据等进行配置。控制面板也可以默认收起或调整宽度。
  4. 底部工具栏:这里可以调整大屏编辑时的缩放百分比,方便您进行放大来查看和调整细节部分。
  5. 中心大屏部分:中心部分是您编辑的大屏的主体,在这里您可以通过拖拽的方式调整图表的位置、大小,并在单击选中图表之后可以进行图表的复制和删除等操作。

图片

大屏整体配置

如下图,点击页面顶部的大屏名称,右侧的控制面板即展示大屏页面的整体配置,在这里你可更改大屏的名称、大小、背景图片、整体的页面主题配色、并且还可以给页面设置水印。

图片

基础配置

大屏整体配置中的一些基础配置如下:

  • 大屏名称

    您可以修改大屏的名称

  • 宽度/高度

    设置屏幕分辨率,一般默认为 1920 × 1080,单位为 px,您可以更改

  • 网格设置

    网格间距是组件在页面中的最小移动单位,组件的边界会自动吸附到以网格间距为格子的边缘上。最小为 1px,此时组件的移动为平滑移动。在拖动组件的时候,网格会自动显示出来,方便您和其它组件进行位置的对齐。您也可以设置默认就「显示网格」。

  • 缩放方式

    您需要根据大屏最终展示的屏幕尺寸,选择合适的页面缩放方式。如果您使用的大屏展示屏幕是非标准屏幕尺寸,建议使用全屏铺满模式。

  • 背景设置

    您可以设置大屏的背景,可以上传图片、设置颜色、透明度等

  • 禁止图表导出 Excel/CSV/图片

    和报表类似,大屏中也可以整体设置禁止图表的数据导出功能,禁用后,页面上的所有图表都不能导出数据。

颜色主题

大屏页面可以设置整体页面的主题配色,我们内置了十多种主题配色,例如我们将主题设置为 warm,效果如下(当然,每个图表也可以单独设置自己的自定义的配色,详见图表组件操作):

图片

大屏水印设置

大屏页面可以开启水印,如下图:

图片

水印中还可以嵌入页面 URL 的参数,如下:

图片

水印中嵌入页面 URL 参数的语法是:{querys.key},其中key是参数名称。

编辑图表

您可以对模版中的图表进行新增,删除,复制和修改配置等操作来制作您自己的大屏。此处以右下角的折线图为例,单击折线图表来选中,选中后的编辑界面如下:

图片

在左侧的图层管理中可以看到,与图表相对应的列表项被同步选中了,您可以对它进行拖拽,来调整折线图与其他图表的叠放次序。

图表被选中后会被一个蓝色的编辑框包裹,左上角可以对图表进行复制和删除操作。编辑框右边、底边、右下角的蓝色小标识可以拖动从而实现对图表的大小进行调整。拖动整个图表可以改变其位置,也可以使用键盘的上下左右键来像素级别的微调图表位置。当然您可以通过右边的控制面板对图表的大小和位置进行直接的调整。

关于单个图表的详细配置请参考「图表组件操作」。

右键功能

我们也支持鼠标右键功能,在某一图表上单击鼠标右键,即可对图表进行删除、复制、图层调整、导出等操作,如下图:

图片

图表的多选和对齐

Windows 系统下,按住 Ctrl 键(Mac 系统下为 command 键),然后单击组件即可进行多选。选中多个图表组件后,右侧的控制面板将会出现如下的多种对齐设置按钮:

图片

在多选状态下,你也可以通过鼠标来整体拖动调整多个图表的位置。

快捷键

大屏中还支持以下快捷键,提升编辑效率(下面的 ctrl 在 mac 下可以换成 command 键):

  • delete:删除
  • ctrl+s:保存
  • ctrl+a:全选
  • ctrl+d:复制和粘贴
  • ctrl+c:复制(可以进行跨屏复制,在另一个大屏页面中用 ctrl+v 粘贴)
  • ctrl+v:粘贴
  • ctrl+z:撤销
  • shift+ctrl+z:重做

本页内容