系统提供普通仪表盘与高级仪表盘两种类型的仪表盘。(区别详见普通仪表盘与高级仪表盘的区别)
高级仪表盘提供的是一面画布,可设置画布的背景、标题、图表风格和配色、分析组件的配置、过滤组件主题等。本文将介绍高级仪表盘编辑页的使用场景与功能。
需要精美的报表展现,选择高级仪表盘
需要使用标签页、文字、图片控件,选择高级仪表盘
1、进入仪表盘列表页,点击「新建仪表盘」
2、选择「高级仪表盘」以及要存放的路径,并保存
3、点击「编辑」按钮,进入编辑页面开始制作
高级仪表盘的编辑界面如图所示,我们可以将其划分为如下几个区域:
导航区 :支持仪表盘重命名,预览以及保存操作
控件区 :显示可添加至画布上的各类图表控件、辅助控件,以及对控件进行排版设置。
画布区 :可在画布上自由绘制仪表盘。
控件设置区 :在画布上选中已添加的控件时,此区域会显示该控件的配置项。
多页面编辑区 :支持在一张仪表盘内制作多个页面,分主题排版图表。
点击添加图表按钮,页面中会出现一个空图表区域,用户可以在右侧图表列表中选择自己需要添加的图表或新建图表。点击添加或新建后,相应位置会加载出所选图表。
点击添加文本框按钮,页面中会出现一个空白标签页,且为选中状态。此时点击导航区的其他控件即可在标签页中添加其他控件。也可以将画布中已有的控件拖入标签页。
点击添加文本框按钮,会添加一个富文本编辑器,可以对字号、行高、字体颜色、字体背景色、字体外观、对齐方式等进行设置;并支持添加超链接; 点击更多可以设置有序列表、无序列表、引用等格式
场景
点击添加网页按钮,页面中会出现一个空网页区域,用户可以在右侧设置网页地址,组件便可加载网页。
点击添加图片按钮,页面中会出现一个空图片区域,用户可以在右侧点击上传图片,或者直接输入一个在线地址。
详见 仪表盘-公共筛选器
详见 仪表盘-公共筛选器
当我们需要将控件与控件进行叠加时,可以通过调节图层顺序确定各控件的上下层次关系。
修改图层顺序之前:
修改图层顺序之后:
我们可以将多个控件组合成一个,统一进行位置移动,颜色配置等操作。
通过同时圈选多个控件点击控件区「组合」按钮或使用快捷键Ctrl+G进行组合。
当同时圈选或者按住command/ctrl键同时选中多个控件时,对齐功能将被点亮。
控件间距设置可以调整使3个或以上元素的间隔相等,包含水平对齐分布和垂直对齐分布
控件对齐设置可以对齐2个或以上元素,包含垂直方向和水平方向上各三类对齐方式:左对齐、垂直居中对齐、右对齐;顶部对齐、水平居中对齐、底部对齐
点击“➕”或“➖”,对画布进行整体缩放
高级仪表盘画布区域采用自由模式进行布局(类似PPT),所有控件可以自由任意拖动,互相覆盖
参考线&等间距线 :
拖动控件时,画布中会出现辅助调整位置的参考线&间距线:
修改图表描述 :
编辑图表 :
点击跳转到图表编辑页编辑图表
复制图表、删除图表
画布和每个不同的控件都有自己的设置项,设置后立即生效。支持批量设置,选中2个及以上的控件(除画布外),同时进行外观、大小、文本等设置。
点击画布任意区域,即可在右侧边栏看到设置项:
页面尺寸 :可以选择预设的尺寸,也可以自定义自己需要的尺寸。
⚠️注意:尺寸设置后为固定值,不会根据显示屏幕的大小而自动伸缩,这点与普通仪表盘是完全不同的。
外观 :可以设置画布的填充颜色以及是否显示网格线
⚠️注意:网格线为帮助进行控件对齐&定位的工具,只在编辑状态下显示,在预览和阅览状态下不显示。
定时刷新 :可以设置仪表盘阅览页的定时刷新时间
点击图表任意区域,在右侧边栏选择图表设置,即可看到设置项:
展示标题 :关闭开关后,标题将隐藏
标题设置 :支持设置字体大小、字体颜色、字体外观(粗体、下划线、斜体)
变换 :调整图表的位置&尺寸
⚠️注:X&Y的位置为图表左上角端点所在的位置
外观 :可以调整图表的背景填充颜色、边框圆角的程度、边框颜色&边框粗细
点击标签页任意区域,即可在右侧边栏看到设置项:
变换:可以调整标签页区域的位置&尺寸
外观:可以调整标签页区域的背景填充颜色、边框圆角的程度、边框颜色&边框粗细
点击文本框任意区域,即可在右侧边栏看到设置项:
变换:调整文本框的位置&尺寸,当高度小于文字行数时,会出滚动条
外观:可以调整文本框的背景填充颜色、边框圆角的程度、边框颜色&边框粗细
点击图片任意区域,即可在右侧边栏看到设置项:
来源:可以替换当前图片的来源
变换:调整 图片所在容器 的位置&尺寸
外观:可以调整 图片所在容器 的背景填充颜色、边框圆角的程度、边框颜色&边框粗细
注意:我们目前针对图片是等比例进行伸缩,所以当图片的比例与图片容器不一致时,在容器内会出现空白区域
点击置顶筛选器任意区域,即可在右侧边栏看到设置项:
置顶区域的宽度默认会与画布保持一致,但当画布宽度超过屏幕宽度时,筛选器的宽度将与屏幕最大宽度一致,即置顶筛选器永远不会出现左右滚动条
点击非置顶筛选器任意区域,即可在右侧边栏看到设置项:
变换:可以调整筛选器区域的位置&尺寸
外观:可以调整筛选器区域的背景填充颜色、边框圆角的程度、边框颜色&边框粗细
支持批量设置,选中2个及以上的控件(除画布外),同时进行外观、大小、文本等设置。
同时选中的控件存在设置项不统一时,文案会展示为“多个”。
支持用户在仪表盘内新增页面,并通过切换页面导航栏查看同一个仪表盘内不同页面的数据内容。
进入高级仪表盘编辑页面,点击画布下方页面导航栏内的“添加按钮”,可以在仪表盘内添加多个页面。
(允许在同一个仪表盘内不同页面中,添加同一个图表)
多sheet页面时,仪表盘编辑者可以直接复制页面,在此页面旁边生成一个布局排版完全一致的页面
支持跨页面复制和剪切控件,包含图表、文本、网页、图片等。
用户可通过鼠标单击选中控件右键复制/剪切,也可使用快捷键复制/剪切。
支持双击页面名称进行页面名称修改,也可以点击鼠标右键选择重命名。
多sheet页面时,编辑态支持直接拖拽改变页面的顺序 ,阅览态会默认打开排在最左边的页面。
多sheet页面时,仪表盘编辑者可以选择对查看者进行展示的页面,把暂时不想展示的页面进行隐藏。
点击鼠标右键,选择隐藏,阅览态将不再展示此页面。
(不再隐藏,点击鼠标右键,选择取消隐藏)
多sheet页面时,支持删除页面,点击鼠标右键,选择删除。
文本、图表等其他内容都会被删除。图表会从该页面移除,但仍可以被再次选择添加。
提升使用高级仪表盘的编辑效率,一些常用的功能支持利用快捷键敏捷触发。常用功能和快捷键对照表:
hover到功能建也会提示对应快捷键的使用方法。