报表编辑界面

更新时间:2021-07-12

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

报表的编辑页面

报表的编辑页面主要分为三个区域:

  1. 顶部工具栏:在这里您可以添加新的图表,并对报表进行保存、预览等操作,也可以通过左边的按钮进行撤销和重做。
  2. 右侧控制面板:在没有选中图表的时候,这里可以对报表本身的配置进行调整;选中某个图表的时候,这里可以对这个图表的大小、样式、数据等进行配置。控制面板也可以默认收起或调整宽度。
  3. 中心报表部分:中心部分是您编辑的报表的主体,在这里您可以通过拖拽的方式调整图表的位置、大小,并在单击选中图表之后可以进行图表的复制和删除等操作。

图片

设置项搜索

控制面板的设置项搜索可以搜索当前控制面板的所有设置项,也支持指定的搜索方式如"高级 标签"多个字符中间用空格隔开,点击搜索结果列表的某一项就可以直接跳转到该设置项的具体位置。列表中有蓝色字体的设置项可能在当前控制面板下是不显示的。

图片

图片

报表整体配置

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

图片

报表页面自动刷新

报表页面的自动刷新是指:页面中所有的图表每隔一定的时间自动刷新数据,从而实现数据的实时同步。如下图设置页面每隔 30 秒就让所有的图表都自动重新拉取数据:

图片

颜色主题

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

图片

报表页面的背景和图表样式

报表页面支持配置背景色和背景图片,我们内置了一些背景图片素材供用户选择,用户也可以自己上传背景图片。对于背景图片的缩放方式,透明度,模糊度以及是否随页面一起滚动等都可以进行个性化的配置。

图片

在这里还可以继续对报表中所有图表的样式做一个整体的配置,包括图表的背景色,标题颜色,边框样式以及阴影样式等:

图片

当然,每个图表也可以单独设置自己的样式,详见图表组件操作

报表导出 Excel/图片

报表可以导出页面数据为 Excel,Tab 控件和标签页组件内的图表数据也会全部导出,每个图表为一个 Sheet。报表也可以导出页面为图片,页面内图表组件很多的建议使用截屏工具。

图片

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

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

图片

页面级字体设置

页面可以设置整个页面内各个组件的字体、字号、字体颜色、字体粗细,包括「基础图表」「高级图表」「表格」「指标」「文字」「过滤条件」。大部分图表组件的页面级字体设置都可以生效,但为了保证页面正常展示,过滤条件和一小部分图表组件的字体颜色、字体大小不会生效,例如页面级字体大小在轮播表格不生效。页面级字体设置优先级较低,无法将图表字体全部替换或覆盖,建议添加图表前先配置好。

优先级:单项设置(例如图表标签设置的字体颜色)> 图表字体设置 > 页面级字体设置。

图片

报表水印设置

报表页面可以开启水印,如下图:

图片

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

图片

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

隐藏查询按钮

报表页面支持隐藏过滤条件组中的查询按钮,打开这个开关后,过滤条件组中的查询按钮会隐藏,在更改过滤条件的值后,所有图表都会自动重新拉取数据。

图片

编辑图表

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

图片

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

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

右键功能

我们也支持鼠标右键功能,在某一图表上单击鼠标右键,即可对图表进行删除、复制、导出等操作,并且右键功能在浏览模式下也是支持的,如下图:

图片

快捷键

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

  • delete:删除
  • ctrl+s:保存
  • ctrl+d:复制和粘贴
  • ctrl+c:复制(可以进行跨页复制,在另一个报表编辑页面中用 ctrl+v 粘贴,不支持从报表复制粘贴到大屏,自定义组件不支持复制代码)
  • ctrl+v:粘贴
  • ctrl+z:撤销
  • shift+ctrl+z:重做

本页内容