Finside 财芯 文档中心
首页智算智数智视
首页智算智数智视
财芯官网
  1. 大屏
  • 大屏
    • 大屏管理
    • 组件配置
    • 数据管理
  • BI
    • 工作表
    • 数据关联
    • 看板
    • 看板组件配置
    • 图文报告
    • 大屏与BI组合配置
首页智算智数智视
首页智算智数智视
财芯官网
  1. 大屏

组件配置

可视化组件是用来将数据以图形方式呈现的视觉化组件,是构成数字化大屏的基本要素。平台提供的组件可分为六类,包括基本组件、地图组件、高级组件、辅助图形、文本内容和资源收藏。本节会先介绍组件的通用配置,并介绍几种常用的重点组件,其后再按照组件类型对各类型组件进行介绍。

组件通用配置说明#

将组件拖拽至设计区后,便可以对组件进行进一步优化,各类组件通用配置通常包括样式配置、数据配置、交互配置、通信配置四项,不同的组件交互配置、通信配置大致相同,样式配置和数据配置会有所差异。
本节会对组件通用样式配置、数据配置、交互配置和通信配置进行说明,其他个性化配置需查看各个组件的详细介绍。

(1)样式配置#

①全局样式#

全局样式是指对组件全局的样式(包括字体、组件边距等)进行调整。
图片90.png
此处以基本柱图组件为例进行讲解,具体配置说明如下:
字体
使用场景:调整整个组件的字体
操作说明:
默认:Arial,苹方,微软雅黑。
用法:直接写字体名称就可以,电脑里有这个字体就按这个字体显示,可以写多个,写多个的意思是如果当前电脑里没有第一个字体就找第二个字体。多个字体间使用英文逗号间隔。
边距
使用场景:
上:调整组件最高柱子和上边框之间的距离。
下:调整组件X轴和下边框之间的距离。
左:调整组件Y轴和左边框之间的距离。
右:调整组件右边和左边框之间的距离。
操作说明:直接输入距离,范围大于0,单位为像素,如100,默认为10。
柱子样式
宽度占比
使用场景:调整柱子的宽度。
操作说明:直接输入数值,范围大于0,输入的数值是指每个柱子的宽度占X轴一段的百分比。
主体间占比
使用场景: 组件如果大于两个柱子,调整两个柱子之间的距离。
操作说明:直接输入数值,范围大于0,输入的数值是指柱子之间的宽度占X轴一段的百分比。
圆角值
使用场景:调整柱子边框的弧度。
操作说明:直接输入数值,范围大于0,输入的数值是指柱子边框的弧度。

②数据样式#

数据样式是指对数据在组件内的呈现形式进行调整,例如数据在基本柱图中呈现的形式是柱形,则使用数据样式可对柱形的填充色、边框色和边框粗细进行调整。如果存在多个类别,例如输入两类产品6个月的销售情况,以时间做X轴,销量做Y轴,则为区分开两类产品,系统会自动将其按照项目进行分组,用户对不同项目配置数据样式即可。
图片91.png
以基本柱图为例,具体配置说明如下:
项目一
填充色
使用场景:调整柱子1的框内颜色:有两个颜色选择,第一个颜色是指柱子下半边的颜色,第二个颜色是指柱子上半边的颜色,中间呈现渐变的效果。
边框色
使用场景:调整柱子1的边框颜色,两个渐变色效果如填充色描述。
操作说明:点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。
设置颜色有三种方式:
滑动颜色调的位置,调整颜色
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可
选择下方的颜色框,常用的颜色都有显示。
边框粗细
使用场景:调整柱子1边框粗细。
操作说明:直接输入数值,值要大于0,值越大,边框越粗。
项目二
使用场景:多个维度做对比,可以增加第多个柱子来对比。
操作说明:使用同项目1。

③文本样式#

文本样式是设置不同地方的文本显示方式,一个组件内可能会出现多个针对不同部分的文本样式设置,例如在基本柱图里,数值、X轴、Y轴、图例和hover层中都有文本样式的设置,虽然设置的对象不同,但是设置的内容都相差不远。
图片92.png
具体配置说明如下:
字号
使用场景:设置文字的大小。
操作说明:可以直接输入\鼠标移动到字号编辑栏,显示箭头,点击箭头调整数值。
颜色
使用场景:设置文字的颜色。
操作说明:点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。
设置颜色有三种方式:
滑动颜色调的位置,调整颜色;
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可;
选择下方的颜色框,常用的颜色都有显示。
文字粗细
使用场景:设置文字正常粗细显示。
操作说明:默认为正常,可调整为加粗。
阴影方向(水平)
使用场景:设置文字阴影的水平位置。
操作说明:直接输入大于0的数值,像素为单位。
阴影方向(垂直)
使用场景:设置文字阴影的垂直位置。
操作说明:直接输入大于0的数值,像素为单位。
阴影大小
使用场景:设置文字阴影的模糊程度,越大则越模糊。
操作说明:直接输入大于0的数值。
阴影颜色
使用场景:设置文字阴影的颜色。
操作说明:与设置文字颜色相似。

④数值#

数值是指对图形组件中数值显示进行样式设置,例如数值格式、小数位数、数值间距等。
图片94.png
以基本柱图为例,配置说明如下所示:
显示
使用场景:在柱形图上不显示数值的时候选择无,默认显示为全部。
操作说明:点击数值的筛选,选择无\全部。
数值格式
缩写方式 无缩写/国际缩写/中国缩写
使用场景:选择数值显示单位,10000举例
无缩写(千位分隔符):直接显示为10,000,有千位符
国际缩写(K/M/B):10K
中国缩写(万/亿):1万
操作说明:点击选择想要的数值缩写单位即可。
显示格式 数值/百分数
使用场景:显示数值本身/显示为百分数的形态。
操作说明:点击选择想要的数值显示格式即可。
小数位数
使用场景:数值显示的小数点位数,如2,则数值会显示两位小数点。
操作说明: 直接输入想要的小数点个数,大于0。
数值间距
使用场景:数值和柱形图的间距。
操作说明:直接输入间距数值,单位为像素。
背景
边距
使用场景:
上:是指数值背景往上的大小。
下:是指数值背景往下的大小。
左:是指数值背景往左的大小。
右:是指数值背景往右的大小。
操作说明:直接输入边距数值,单位为像素。
背景颜色
使用场景:背景快显示的颜色,前提是边距距离可以形成一个矩形,如果边距距离都为0,则无矩形显示,设置颜色无载体。
操作说明: 点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。
设置颜色有三种方式:
滑动颜色调的位置,调整颜色;
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可;
选择下方的颜色框,常用的颜色都有显示。
阴影方向(水平)
使用场景:设置背景块阴影的水平位置。
操作说明:直接输入大于0的数值,像素为单位。
阴影方向(垂直)
使用场景:设置背景块阴影的垂直位置。
操作说明:直接输入大于0的数值,像素为单位。
阴影大小
使用场景:设置背景块阴影的模糊程度,越大则越模糊。
操作说明:直接输入大于0的数值。
阴影颜色
使用场景:设置背景块阴影的颜色。
操作说明:与设置背景颜色相似。

⑤X轴#

如果组件是柱状图、折线图等拥有X轴和Y轴的组件,用户可对两轴样式进行设置,设置内容包括文本样式、是否显示X轴、轴线样式、网格线、刻度线、缩略周、滚动条、标签方向和轴文间距等。
图片95.png
图片96.png
以基本柱图为例,配置说明如下所示:
文本样式
参考之前介绍。
是否显示
使用场景:是否需要显示X轴,如果不需要显示,勾选一下即可,默认为显示。
操作说明:点击勾选即可切换显示和不显示。
轴线
是否显示
使用场景:是否需要显示X轴的线,如果不显示,勾选一下即可,默认为显示。
操作说明:点击勾选即可切换显示和不显示。
颜色
使用场景:设置X轴线的颜色。
操作说明:点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。
设置颜色有三种方式:
滑动颜色调的位置,调整颜色
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可
选择下方的颜色框,常用的颜色都有显示
粗细
使用场景:设置X轴线的粗细。
操作说明:直接输入数值,值要大于等于0,值越大,边框越粗。
网格线
是否显示
使用场景:是否显示X轴的参考线,以此来做空间间隔。
操作说明:点击勾选即可切换显示和不显示。
颜色
使用场景:设置网格线的颜色。
操作说明:同如上颜色设置一致。
粗细
使用场景:设置网格线的粗细。
操作说明:直接输入数值,值要大于等于0,值越大,边框越粗。
类型
使用场景:设置网格线的类型。
操作说明:点击筛选框可选择需要的类型,目前有三种类型可供选择。
刻度线
是否显示
使用场景:是否显示X轴的刻度线,以此来做空间间隔。
操作说明:点击勾选即可切换显示和不显示。
颜色
使用场景:设置刻度的颜色。
操作说明:同如上颜色设置一致。
粗细
使用场景:设置刻度的粗细。
操作说明:直接输入数值,值要大于等于0,值越大,边框越粗。
长度
使用场景:设置刻度线的长度。
操作说明:直接输入数值,值要大于等于0,单位为像素。
缩略轴
是否显示
使用场景:
缩略轴:是指通过调整缩略轴的位置,可以调整对应位置显示的柱形图。
一般用在X轴太长,位置有限,只能先显示一部分,在查看详情的时候,可以通过调整缩略轴,查看全貌。
操作说明:点击勾选即可切换显示和不显示。
开始位置(%)
使用场景:设置默认开始的位置。
操作说明:直接输入大于等于0的数值,这里的数值是指开始位置在整个X轴的百分之多少。
结束位置
使用场景:设置默认结束的位置。
操作说明:直接输入大于等于0的数值,这里的数值是指结束位置在整个X轴的百分之多少。
滚动条
是否设置
使用场景:一般用在X轴太长,位置有限,只能先显示一部分,在查看详情的时候,可以通过调整滚动条进行查看。
操作说明:点击勾选即可切换显示和不显示。
单列宽度
使用场景:这里的宽度是指X轴维度的宽度,如一月占的宽度,二月占的宽度。
操作说明:直接输入大于等于0的数值,单位为像素。
标签方向
使用场景:当X轴数值较长,无法显示全,则设置方向,可以按照倾斜度数显示。
操作说明:直接输入大于等于0的数值,这里的单位为度。
轴文间距
使用场景:设置X轴和X显示维度之间的距离。
操作说明:直接输入大于等于0的数值,这里的单位为度。

⑥Y轴#

如果组件是柱状图、折线图等拥有X轴和Y轴的组件,用户可对两轴样式进行设置,设置内容包括文本样式、是否显示Y轴、轴线样式、网格线、刻度线、缩略周、滚动条、标签方向和轴文间距等。
图片97.png
以基本柱图为例,配置说明如下所示:
是否显示
使用场景:选择是否显示Y轴,勾选则显示,不勾选则不显示。
操作说明:选择勾选和不勾选,默认勾选显示。
文本样式
可以设置Y轴的字的格式大小颜色等,详细参考之前对文本样式的介绍​。
文本格式
自定义小数点位数
使用场景:选择是否自定义小数点位数,如果不定义,则默认显示API中的数值​。
操作说明:选择勾选和不勾选,默认不勾选不自定义​。
小数位数
使用场景:设置自定义小数点位数​。
操作说明:直接输入数值,值要大于等于0​。
轴文间距
使用场景:Y轴和数值之间的距离​。
操作说明:直接输入数值,值要大于等于0​。
轴线、网格线、刻度线
具体见之前X轴配置介绍​。
自定义刻度
是否设置(无\自适应\自定义范围)
使用场景:
无:对Y轴的刻度无设置
自适应:对Y轴的刻度系统自适应
自定义范围:确认最大值和最小值来定义Y轴的数值显示(选择自定义范围后,下方的最大值和最小值设置才有效)
操作说明:直接点击筛选对应的Y轴设置​。
最大值
使用场景:当设置为自定义范围后,可输入最大值,代表Y轴显示的最大值为这个数值​。
操作说明:直接输入数值,值要大于0,且大于最小值​。
最小值
使用场景:当设置为自定义范围后,可输入最小值,代表Y轴显示的最小值为这个数值​。
操作说明:直接输入数值,值要大于0。
设置股分割段数
使用场景:设置Y轴分为多少段​。
操作说明:直接输入数值,值要大于0。

⑦图例#

图例是指对组件中颜色代表的含义进行文字说明,示意图和配置说明如下所示:
图片133.png
图片99.png
是否显示
使用场景:设置图例是否显示,一般一个柱形图可以不用显示,大于1个或一个以上需要用图例说明​。
操作说明:勾选是否显示即可​。
排列方式 水平排列\垂直排列
使用场景:
水平排列:图例排成一个横排;
垂直排列:图例垂直排列。
操作说明:点击选择即可​。
位置 水平距离(%)\垂直距离(%)
使用场景:
水平距离:距离整个组件水平距离的百分之多少,如50%则显示在水平的最中间;
垂直距离:距离整个组件垂直距离的百分之多少,如50%则显示在垂直的最中间。
操作说明:直接输入数值,这里的数值指的是占整个组件水平的百分之多少​。
间距
使用场景:这里是指图例与图例之间的间距。
操作说明:直接输入数值,这里的数值指的是图例和图例之间的距离,单位为像素。
文本样式
见之前文本样式中的介绍​。

⑧hover层#

Hover层是指大屏预览时,鼠标悬浮在组件上时显示的内容,如下图所示:
图片100.png
以基本柱图为例,配置说明如下所示:
触发动作 鼠标悬浮/点击
使用场景:在非编辑页面,如预览的时候,想要用哪种操作显示hover,一种是鼠标悬浮在柱形图的时候显示,一种是点击的时候显示​。
背景框样式
圆角值
使用场景:hover背景框的边角值设置。
填充色
使用场景:hover背景框的颜色设置。
边框色
使用场景:hover背景框的边框颜色设置。
边框粗细
使用场景:hover背景框的边框粗细设置。
文本样式
详情见本页第四节。
边距
使用场景:
上:hover背景框上边框与背景块值的距离。
下:hover背景框下边框与背景块值的距离​。
左:hover背景框左边框与背景块值的距离​。
右:hover背景框右边框与背景块值的距离。

(2)数据配置#

数据配置配置输入组件的数据,并设置引用字段,例如柱形图需要设置数据分组字段、数据维度字段和值字段,由此确定X轴和Y轴的类型和刻度。
图片101.png
大屏支持静态数据和API两种数据配置方式。静态数据需要用户将数据写成示例中JSON格式,API需要用户输入API地址,设定API参数、更新时间和过滤方式。
图片102.png
输入数据后,无论是静态数据还是API,都需要按照组件数据要求的格式选择字段,组件才能根据字段的值进行可视化呈现。
图片103.png

(3)交互配置#

大屏中的组件支持配置交互功能,配置交互后,数据点击即可完成交互。交互共分为弹窗、跳转、浮层、回调四种形式。
图片104.png

①弹窗#

设置弹窗交互后,用户点击大屏页面上的文字、图表,可触发弹窗页面。支持中心弹窗、固定位置两种弹窗形式;可选择系统内的大屏和外部链接地址,可调整宽高尺寸。
图片105.png

②跳转#

设置跳转交互后,用户点击大屏页面上的文字、图表,可触发跳转页面。组件支持当前标签页、新标签页两种跳转方式,可选择跳转系统内的大屏或外部链接。
图片106.png

③浮层#

设置浮层交互后,用户点击大屏页面上的文字、图表,可打开新页面悬浮在原大屏上。组件支持系统内的大屏或外部链接,并设置浮层大小。
图片107.png

④回调#

设置回调交互后,用户在点击组件时,向外层发送固定参数值,例如向嵌入大屏的3D EXE发送参数,以便EXE进行跳转等交互。
图片108.png

(4)通信配置#

数据通信,即点击图表数据发生变化的交互,是通过参数传递的方式来实现的。以表格为例,如果配置了下拉单选筛选器与表格互动,则可达到Excel表中数据筛选的效果,根据筛选器选项变化,表格展示的内容也会变化。
图片109.png
建立数据通信需要完成以下几个步骤:建立通信组,配置发布组和配置订阅组的通信配置。以下分别介绍通信组配置和通信配置。

①通信组#

在4.1.1.3大屏配置一节中,曾提到可对当前大屏的数据通信创建事件,目的是对组件之间的数据互动进行分组,以避免混淆。例如点击顶部时筛选器联动页面所有图表为一个事件,点击柱图查看明细数据为一个事件。
图片110.png
②通信配置
图片111.png
消息类型
大屏需要进行数据交互的组件,需要定义消息类型,消息类型共分为发布和订阅。勾选发布,即当前组件是发布参数给其他组件;勾选订阅,即当前组件是订阅其他组件发来的参数;勾选发布+订阅,即当前组件即发布参数又订阅参数,会将接收到的参数+自己的参数一同发送给订阅组件。
发布时清除
用于多级联动筛选使用,输入需要清除的参数名称即可。
发布组/订阅组设置
发布组事件和订阅组事件需为同一个事件,才能使组件进行关联。
事件可多选,如果发布事件多选,组件发布会同时向两个事件的订阅组发布参数,如果订阅事件多选,组件可接受多个发布事件的参数,但同时只接受一个发布事件的参数。
参数设置
通信组各组件间的数据交互是通过传递参数实现的,订阅组件需要设置接收参数,共支持4种传参方式。
(a)HTTP body(POST):指API的参数是放在HTTP body里的。如果API是通过后台创建的,且通信是当前屏进行通信,直接填写参数名即可;
(b)HTTP Headers参数(POST/GET)添加:指API的参数是放在HTTP Headers里的;
(c)链接参数(POST/GET):指API的参数是放在链接地址里的,如果API是第三方接口GET方式,或者当前屏的参数是从另外一个屏传递过来的,参数需要写在这个位置。
(d)API地址带参:指当前组件的API地址是带参数的,API地址写法为“/v2/api/public/:type”,type为参数名,接收到对应的参数,组件会获取对应的API地址,如“/v2/api/public/a”。
填写参数时,输入参数名,选择发送对应参数的组件即可,如果参数没有对应组件,或多个参数都来自同一个组件,需要填写参数对应的字段名称。
图片112.png

重点组件#

(1)堆积柱图#

堆积柱状图通过将多个柱形叠加,展示了同一数据集中不同类别的数值大小。它不仅能够直观地展现每个类别的数值,还能反映出所有类别加起来的总和。
堆积柱状图适用于既需要展示数据总量,同时又需要看到数据内部组成情况的场景。例如销售公司统计全年销售数据,需要看到销售额随时间变化的趋势和数量,也需要看到其中几大产品线销售额的数值与变化情况,此时适合用堆积柱图进行数据可视化。
图片113.png
快速任务
利用堆积柱图对某公司本年度产品A、B、C的12个月销售额总量与构成进行展示。
操作指引
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“堆积柱图演示数据”。
图片114.png
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
图片115.png
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
图片116.png
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
图片117.png
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
图片118.png
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的图表组件,将堆积柱图拖拽到大屏上。
图片119.png
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将维度(X轴)设定为字段“时间”,值(Y轴)设定为“销售额”,将分组(数据内部结构)设定为“产品类型”。
图片120.png
9
操作九
输入完成后,收起数据配置,打开全局样式,依次调整字体、边距、柱子样式。所有数值输入后即刻生效。
字体:调整整个组件的字体。直接写字体名称就可以,电脑里有这个字体就按这个字体显示,可以写多个,写多个的意思是如果当前电脑里没有第一个字体就找第二个字体;
边距:调整组件和上下左右边框之间的距离;
柱子样式:调整柱形的宽度和边框的弧度。
图片121.png
10
操作十
收起全局样式,打开数据样式。此处可分别对不同分组的柱形颜色进行调整,例如使用的演示数据中分组为产品类型,一共有三种产品,则会分为3组,即三个项目。每个项目展开后可以对该项目控制的柱形调整填充色、边框色和边框线条的粗细。
图片122.png
11
操作十一
收起数据样式,打开数值。数值调整的事是堆积柱图上方悬浮的数值,即本案例中的销售额,只有勾选显示为“全部”后才会显示。勾选后,用户可在文本样式、数值格式、背景中分别调整数值的字号、颜色、粗细阴影,数值的缩写方式、显示格式、小数位数、数值间距,并设置数值的文本框背景间距、填充色和阴影。
图片123.png
12
操作十二
收起数值,打开X轴。此处可以对X轴是否显示、文本样式、轴线格式、网格线、刻度线、缩略轴、滚动条进行调整,本例中的X轴即为显示月份时间的轴线。详细配置说明可参考4.1.2.1组件通用配置说明一节。
图片124.png
13
操作十三
收起X轴,打开Y轴。此处可以对Y轴是否显示、文本样式、文本格式、轴线、网格线、刻度线、自定义刻度、轴文间距进行调整,本例中的Y轴即为显示销售额大小的轴线。详细配置说明可参考4.1.2.1组件通用配置说明一节。
图片125.png
14
操作十四
收起Y轴,打开图例。图例可以配置是否显示图例,并调整图例位置(即在组件中水平距离(左右)和垂直距离(上下))、图例排列方式、各图例之间的间距、图例说明的文本样式。
图片126.png
15
操作十五
收起图例,打开hover层。此处可设置组件预览时,如果鼠标悬停在图表柱形上时,显示文字的格式,包括触发动作,边距、背景框样式和文本样式。组件配置时,无法查看hover层悬浮效果,只有进入预览才可以查看。
图片127.png
图片128.png
16
操作十六
设置完成后,点击“预览”,查看组件配置效果。
图片129.png

(2)带标线折线图#

带标线折线图是折线图中的一种,只能展示单一维度同一类型值,但是配置有标线,适用于预警类的可视化组件。
图片1.png
标线配置与X轴、Y轴配置相似,可配置标线、标线文字、标线背景及标线边框是否显示,也可调整标线颜色及粗细,标线背景及边框颜色等。
图片2.png
快速任务
使用带标线折线图对企业本周资金流出变化进行展示,并设置资金流出预警线。
操作指引
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“带标线折线图演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的图表组件,将代标线折线图拖拽到大屏上。
图片3.png
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将维度(X轴)设定为字段“交易时间”,值设定为“金额”,将标线设定为“预警线”。
图片4.png
9
操作九
调整组件全局样式、文本样式、数值、X轴、Y轴、图例、Hover层等通用设置。
10
操作十
展开标线,这里设置的是带标线折线图特有的设置,可对标线进行配置。标线文字是系统根据数值单位自动带出的,调整标线样式时,主要对标线的颜色、粗细、类型进行调整,对标线文字可调整期是否显示、颜色、文字填充的背景色和边框等。
图片5.png
11
操作十一
设置完成后,点击“预览”,查看组件配置效果。

(3)表格#

表格组件与电子表格功能相似,可结合数值进行更多样的可视化展示,适合展示信息丰富、维度多的内容,例如本年收款前二十客户排名等。
组件详细配置说明如下:

①全局样式#

此处可设置表格字体格式、分页、轮播和置顶内容,在数据量大时,可以选择开启分页和轮播来展示完整的表格内容。同时全局样式也可以设置表格列宽、换行和对齐方式等格式。
字体:调整表格全局字体样式,但不包括底下的分页行。
图片6.png
分页:设置表格行数太多时是否分页,每页展示行数,并对分页的页签进行格式设置,包括背景色、翻页按钮被选中和不选中时的颜色和自定义文字。
图片7.png
轮播:设置表格行数多时是否自动翻页展示内容,可设置翻页间隔时间和翻页方式。
图片8.png
置顶:可以置顶符合要求的数据。例如设置第六列中的未达标置顶显示,让异常情况排在前面更为显眼。
图片9.png
列宽:设置每一列的宽度,直接输入各列宽度数值即可,输入几个数值,组件即可自动带出多少列,并按照像素控制列表宽度。多个宽度之间用英文逗号相间隔。
图片10.png
是否换行:设置单元格内容过多时,是否换行展示,不设置换行时,则会用省略号代替因文字太长不能显示的内容。
图片11.png
对齐方式:设计表格内容对齐方式,包括居左、居中、居右、文字居左数字居右四种格式。
图片12.png

②表头#

可设置表头的高度(可直接输入数值,按照像素控制)、背景色、边框样式和文本样式;
图片13.png

③行配置#

可设置行高、背景色(可按奇偶数行配置)、边框样式和文本样式,还配置表格边框和内部横竖分割线的样式;
图片14.png

④列配置#

与行配置不一样,列配置可以分项目配置列的特殊内容,按照列数进行条件设置、文本样式、文本背景和单元格背景样式设置;
图片15.png

⑤合并列#

此处输入需要合并的列序号后,系统即可自动合并数值相同的列;
图片16.png
图片17.png

⑥表头排序#

通过设置排序参数,对字段进行后端排序;
图片18.png

⑦冻结列#

和电子表格的冻结首列效果相同,可以设置冻结后的颜色。当组件长度不足以显示表格全部时,拖动表格时即可触发冻结效果。
图片19.png

⑧进度条配置#

设置列配置后,可以根据需求设置相应的进度条,并对条件、进度条和光点等样式进行调整。例如下图所示,如果第六列状态类型为达标,则设置第5列的数值为进度条(第五条是百分比数值时才可正常生效),并对达标时进度条的高度、圆角值、颜色、光点样式和背景样式进行设置。
图片20.png

⑨超链接配置#

如果表格中有超链接,可以通过超链接配置将网址配置为可点击跳转的文本信息,效果如下图所示。
图片21.png
快速任务
使用表格组件展示某集团企业下属公司应收应付款项情况。
操作指引
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“表格演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的文字组件,将表格组件拖拽到大屏上。
图片22.png
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将第一列设置为“本方单位名称”,第二列设置为“客商名称”,第三列设置为“应收应付类”,第四列设置为“款项性质”,第五列设置为“应收余额原币”,第六列设置为“账龄”,第七列设置为“到期日期”。
图片23.png
9
操作九
调节列表全局样式、表头、行、列配置,配置完成后,点击预览。
图片24.png

(4)下拉单选筛选器#

下拉单选筛选器支持通过下拉菜单,可以快速筛选特定条件下的数据,展示不同类型数据可视化图形。
组件可灵活配置全局样式、筛选器样式和下拉框样式,具体功能需搭配组件通信才能正常使用,组件通信配置项目说明详见4.1.2.1组件通用配置说明一节。下拉多选筛选器、层级筛选器与其配置逻辑相似,可参考下拉单选筛选器介绍进行配置。

①全局样式#

可配置组件圆角值与字体格式,同时若勾选“是否显示‘全部’”,则默认筛选器初始状态是“全部”(即全选),也可以通过设置“默认选中”,修改初始选中为单个选项;

②筛选器样式#

可以对筛选器高度、边框、填充色和文字样子进行配置;

③下拉框样式#

配置下拉框的大小、边框、填充、文字和选中效果,同时还可设置hover层效果,适用于当筛选项名称过长无法显示完整的情景,配置完成后,鼠标移动上去即可显示完整的信息;

④搜索框#

搜索框适用于选项多、难以寻找目标选项的情况,可以灵活设置搜索方式、搜索框边距、边框、水印样式、输入样式和结果高亮效果。搜索方式分为前端搜索和API传参搜索两种方式,如果选择API传参搜索,则需要输入传参参数名。
图片25.png
快速任务
为表格设置下拉单选筛选器,使其可以通过筛选器分别查看应收账款和应付账款的信息。
操作指引
1
操作一
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,找到之前为表格演示数据创建的API,点击修改。
2
操作二
进入API配置页面后,点击“下一步”,打开API参数配置页。
图片26.png
3
操作三
在SQL语句下方添加语句:where (to_char(ZFSCOLUMN5) IN ({{.应收应付类}}) OR {{.应收应付类}} IS NULL)(所有符号均为英文符号)。(ZFSCOLUMN5是自动生成SQL中,应收应付类的字段名称)
图片27.png
4
操作四
点击右上角“参数”,切换到参数配置页面,将参数应收应付类的类型设置为string,然后点击“下一步”。
图片28.png
5
操作五
为参数输入值“应收账款”,点击“开始测试”,在右侧窗口查看返回数据。如返回数据无异常,正常读取到应收应付类为应收账款的数据,即可点击“完成”保存API数据。
图片29.png
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
打开之前创建表格组件的大屏,点击左侧组件区的高级组件,将下拉单选筛选器组件拖拽到表格上方。
图片30.png
8
操作八
选中筛选器组件,在组件配置区点击“数据配置”,选择“API”,粘贴与表格相同的API地址(即之前上传到数据网盘的表格演示数据的API地址),勾选“定时更新”,然后设定字段选择:发布值选择“应收应付类”,选项值选择“应收应付类”。
图片31.png
9
操作九
调整筛选器的全局样式、筛选器样式和下拉框样式。
10
操作十
点击“大屏设置”,找到通信组设置,点击“添加”,新增事件名称,并将其命名为“下拉单选筛选器”。
图片32.png
11
操作十一
点击筛选器组件,打开组件通信,勾选消息类型为“发布”,为发布组设置选择事件为“下拉单选筛选器”。
图片33.png
12
操作十二
点击表格组件,打开组件通信,勾选消息类型为“订阅”,为订阅组设置事件为“下拉单选筛选器”,在HTTP body参数(POST)处添加参数“应收应付类”,并选择组件为“下拉单选筛选器”(与筛选器名称相同)。
13
操作十三
点击预览,查看筛选器组件是否正常生效。
图片34.png

(5)单行文本#

平台提供了两类文本组件,分别是单行文本和多行文本,可展示文本信息。由于两类组件配置相似,因此此处主要以单行文本为例进行说明。
单行文本组件支持设置组件大小、高度、名称、风格、字体大小、字体颜色等信息,还可以对鼠标悬浮在文本上时显示的图形进行设置。由于文本内容通常不变,无需更新,因此可在数值配置处利用静态数据设置。
图片35.png
快速任务
利用单行文本组件为大屏添加标题。
操作指引
1
操作一
打开之前创建组件的大屏,点击左侧组件区的文本组件,将单行文本组件拖拽到大屏上。
图片36.png
2
操作二
点击单行文本组件,打开数据配置,选择“静态数据”,修改引号内文本内容为“某企业数字化大屏”。
图片37.png
3
操作三
修改完成后,拉长文本框直至所有文字正常显示。展开文本样式,对文本进行样式调整。
4
操作四
点击预览,查看组件配置效果。
图片38.png

(6)数字图#

数字图组件可以用来显示数字信息,例如数量、金额、股价等信息。数字图组件由三部分组成:前缀、数字、后缀,前、后缀均可手动输入文字或数字信息展示。

①全局样式#

设置全局文本字体,并设置文本对齐方式;

②数字样式#

此处可以设置数字组件核心数字的文本样式和数值格式;

③前缀样式#

设置数字前文本的内容和文本样式;

④后缀样式#

设置数字后文本的内容和文本样式;
图片39.png

⑤动画#

设置是否开启数字更新动画,动画是否定时播放,动画播放时长以及播放周期。
快速任务
利用数字组件展示集团企业本年销售额。
操作指引
1
操作一
打开之前创建组件的大屏,点击左侧组件区的文本组件,将单行文本组件拖拽到大屏上。
图片40.png
2
操作二
点击单行文本组件,打开数据配置,此处即可使用API引入数据,也可直接使用静态数据输入数据。选择静态数据,将数字修改为693900000。
图片41.png
3
操作三
修改完成后,拉长组件,直至所有数字文本都正常显示。展开数字样式,对数字进行样式调整,将缩写方式修改为“中国缩写(万/亿)”。
4
操作四
点击前缀样式,将前缀内容修改为“营业额”,并调整文本样式。
5
操作五
点击后缀样式,将后缀内容输入为“元”,并调整文本样式。
6
操作六
点击预览,查看组件配置效果。
图片42.png

(7)轮播列表#

轮播列表组件可滚动展示信息条,适合展示新闻信息、排名信息或风险提示信息等。

①全局样式#

设置字体格式,组件布局,是否轮播、轮播间隔和轮播形式,设置每页行数,还可以设置在数据条数较多时,点击翻页的指示器格式;
图片43.png

②列配置#

按照列进行分组,控制文本样式;
图片44.png
快速任务
使用轮播列表组件展示客商近期失信风险信息。
操作指引
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“轮播列表演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的文字组件,将轮播列表组件拖拽到大屏上。
图片45.png
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将ID设置为“披露时间”,第一列设置为“客商名称”,第二列设置为“失信风险详情”。
图片46.png
9
操作九
调整组件的全局样式和列配置,配置完成后,点击预览,查看组件效果。
图片47.png

(8)正负指标图#

正负指标图组件可显示代表增长或减少趋势的指标信息,适合展示销售额增加比例、成本增长比例等以百分比计数的指标。正负指标图组件可对环的样式、数值样式、文字样式、动画等进行设置。

①全局样式#

可以设置是否显示百分比环、是否显示文字、是否显示箭头、是否显示正负号、是否按百分数显示数值,同时对百分比环和文字的比例进行排版;
图片48.png

②环样式#

如果选择显示环图表,此处可对环大小、颜色、描边进行样式调整;

③数值#

可以调整数值的样式和格式,并增加前后缀;

④文字#

如果选择显示文字,可以调整文字样式。
图片49.png
快速任务
使用正负指标图组件展示某企业今年新增长客户数。
操作指引
1
操作一
创建大屏,点击左侧文本内容组件,将正负指标图拖拽到大屏上。
2
操作二
点击“数据配置”,此处即可使用API引入数据,也可直接使用静态数据输入数据。选择“静态数据”,输入同比增长信息:NAME后输入文字信息,VALUE后输入数值信息。
示例:
"NAME": "本年新增客户"
"VALUE": "132"
3
操作三
打开全局样式,去除环和百分比,将增加颜色设置为绿色,减少颜色设置为红色。
4
操作四
打开数值,去除前缀,设置后缀为“个”。
5
操作五
调整组件图形样式,配置完成后点击预览,查看组件配置效果。
图片50.png

(9)2D中国地图#

2D中国地图组件可以将数据在地图上进行展示,支持按照行政区划的指标数值,通过点位大小/颜色填充,展示数据,并可以对目标位置进行打点展示。此外,还可以通过飞线代表点位之间的关系,如:仓储物流发出位置与接收目标位置。
图片51.png
其详细配置说明如下:

①全局样式#

可以对组件全局使用的字体格式、大小以及组件边距进行设置,同时可以开启“联动时地图变更”“显示返回按钮”“显示区域名称”几个功能选项;
字体:控制组件全部字体格式;
联动时地图变更:控制地图是否可以点击穿透;
仅点击数据(点、线)进行组件交互,点击非数据区域进行地图下钻:点击数据打点和飞线可以进行组件交互,点击非数据区域可以进行地图下钻。
显示返回按钮:如果设置地图下钻,勾选此选项后,预览大屏时可通过返回按钮返回一级地图。
显示区域名称:显示地图上各地区的名称。
文本样式:如勾选显示区域名称,可通过此处对文本样式进行控制。
边距:调整地图上下左右的边距(如填充图片,调整此项可能会导致图片和地图偏移)。
图片52.png

②默认地图样式#

此处可设置地图的填充颜色、边界线颜色与宽度,以及替换或清除背景填充图片。此外,组件还可以设置地图初次加载时显示的地图区域,以及地图下钻路径,字段数据来源于静态数据;(设置图片填充时,可能会影响下钻显示效果)

③地图样式#

该部分功能与默认地图样式相似,可通过新建项目,对地图组件点击穿透的小地图进行个性化样式设置;
图片53.png

④气泡#

气泡主要用于突出显示地图组件内的省市数据,组件支持灵活调整气泡大小、颜色、填充图及动画功能和周期,修改文本和数值样式,同时设置文本布局方式与间距。
是否显示:是否显示气泡;
样式:根据类别不同,设置气泡不同的样式,支持设置填充色或上传图片;
文本样式:设置气泡上显示的文字格式,包括字号、颜色、阴影等;
数值:设置气泡上显示的数值格式,包括是否显示、文本样式、数值格式等;
文本布局方式:调整文本行数,例如文字和数值是否在同一行;
文本间距:调整文本间的间距,例如文本和数值的间距;
气泡最大尺寸、气泡最小尺寸:调整气泡尺寸;
动画周期:可调整气泡动画周期。
图片54.png

⑤卡片#

卡片主要用于悬浮展示各组省市的明细数据,只有在数据配置处配置了相应卡片字段,此处才会带出数值;
是否显示:是否显示卡片;
卡片样式:上传图片设置卡片样式;
卡片宽度、高度:设置卡片大小;
文字左边距:设置卡片文本距离卡片左边框的距离;
卡片与气泡距离:如果设置了气泡和卡片,可用此处调整二者距离;
文本样式:卡片上展示多少行文字,由项目控制。每个项目展示一个字段的值,设置多少个卡片字段,此处则会有多少个项目。
(a)项目行距离:每行文字的行距;
(b)项目设置:设置字段名称(此处字段名称非用户导入组件的数据表字段名,而是组件数据配置出字段选择处规定死的字段名),并对文本样式进行设置。
卡片标题名称:设置卡片上每行文本最开头的前缀;
设置图片:如果为组件导入了图片数据,此处可设置是否显示图片,以及图片大小、图文间距;
显示方式:可设置卡片的显示方式,支持自动轮播、hover显示、点击显示三种方式;
卡片轮播时长:如果设置卡片显示方式为自动轮播,此处设置轮播时长,即每张卡片展示的时间。

⑥飞线#

飞线设置的是省市间的连线及流动方向。勾选“是否显示”后,可以对飞线的速率、颜色、粗细等格式进行配置;

⑦渐变填充和区间填充#

这两类填充功能会突出显示省市数据对应的地图区域,如果和气泡、卡片搭配使用会影响可视化效果,因此不推荐同时配置。组件支持对填充颜色、渐变梯度等内容进行设置。
图片55.png
图片56.png

⑧数据配置#

字段选择说明如下。
省份名称用于设置突出显示的地市名称,可配置气泡显示;
经纬度和目标经纬度用于设置地市位置和飞线方向,目标经纬度可不配置;
值是各地市对应的数值,可不配置;
卡片图片、卡片字段和卡片备选字段用于配置卡片显示内容及卡片显示图片;
类别则对应了气泡的项目,可根据不同类别进行可视化区分。
快速任务
使用2D中国地图组件展示某企业下属子公司的情况。
操作指引
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“2D中国地图演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的地图组件,将2D中国地图拖拽到大屏上。
图片57.png
8
操作八
选中地图组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:省份名称选择“企业名称”,经度选择“经度范围”,纬度选择“维度范围”,目标经度、目标纬度不选,值选择为“本年营业额”,卡片图片不选,卡片字段1选择“公司人数”,卡片字段2选择“公司地址”,卡片字段3选择“注册资本”,类别选择“公司类别”,其他备选字段不选。
图片58.png
9
操作九
打开气泡,勾选“是否显示”,展开项目1,输入类别名称为“参股子公司”,项目2类别名称输入为“控股子公司”,项目3类别名称输入为“全资子公司”。调整文本和数值样式,并将数值缩写调整为“中国缩写(万/亿)”,文本布局方式选择“多行”。
10
操作十
打开卡片,调整卡片大小、文本样式,将卡片标题名称修改为“员工人数,分公司地址,注册资本”设置为轮播,轮播时间间隔为5s。
11
操作十一
点击预览,查看地图配置效果。
图片59.png

(10)TAB外链#

TAB是指信息展示控件,TAB外链可以通过设置多个TAB来轮播显示多个组件,将组件当做一个页面,从而展示更多信息。用户可以利用TAB外链将数张不同的大屏放在同一张大屏内,以容纳更多的可视化图表。
图片126.png
TAB外链不仅可以连接平台内部制作的大屏,还可以输入外部链接和第三方网址。TAB大屏、iframe组件配置逻辑与TAB外链相同。
组件详细配置说明如下:

①全局设置#

此处可配置多TAB外链时是否自动轮播,是否开启翻页效果(左右翻页),是否tab按顺序自动加载;

②TAB区域设置#

可以设置TAB选项的位置和样式,包括设置区域位置,背景填充,对齐方式,多级TAB时的布局方式、多选项超出显示范围是否轮播以及选项间距等;
图片60.png

③内容区域设置#

可以设置TAB连接的组件或大屏的显示位置;
图片61.png

④TAB列表#

一个TAB可连接一个大屏或组件,TAB外链要连接多少个大屏,就需要添加多少个项目,按照项目增加TAB。配置TAB列表时,可灵活设置TAB显示的名称、连接组件/大屏的地址、TAB大小和圆角值、页面锚点、轮播时长等等;
图片62.png

⑤TAB样式和二级TAB样式#

可以设置选中TAB和非选中TAB的样式,让选中的颜色和不选中的颜色设置不一致,突出显示被选中的TAB名称。
图片63.png
快速任务
利用模板新增两个大屏,并利用TAB外链将这两张大屏放在同一张大屏内。
操作指引
1
操作一
进入大屏,点击“新建大屏”,选择有组件的模板,创建两个大屏。
图片64.png
2
操作二
创建完成后,返回大屏管理页面,找到新建大屏,展开管理菜单,依次点击“链接分享”“无口令分享”“复制链接”,复制两个大屏链接。
图片65.png
3
操作三
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的高级组件,将TAB外链拖拽到大屏上。
图片66.png
4
操作四
点击全局设置,勾选“是否自动轮播”,“是否开启翻页效果”,“tab按顺序自动加载”。
5
操作五
调整TAB区域大小和内容区域设置。
6
操作六
点击TAB列表,分别打开项目1和项目2,粘贴刚才新建的两个大屏分享链接,并修改TAB名称。
图片67.png
7
操作七
点击TAB样式,对TAB被选中和未选中时的样式进行调整。
8
操作八
设置完成后,点击预览,查看TAB外链配置效果。
图片68.png

基本组件#

基本组件包含:基本柱图、彩色柱图、基本条图、彩色条图、堆积条图、斑马柱图、正负条图、对比条图、双轴图、折线图、带标线折线图、散点图、气泡图、单轴气泡图、填充气泡图、进度条图、进度环图、水球图、环图、饼图、玫瑰图、玉玦图、雷达图、仪表盘、词云、立方体、3D圆柱。
image.png
image.png

(1)柱状图组件#

柱状图组件一共有四类,分别是基本柱图、彩色柱图、堆积柱图和斑马柱图。

①基本柱图&彩色柱图#

柱状图是以宽度相等的条形高度或长度的差异来显示统计指标数值多少或大小的一种图表。柱状图简明、醒目,常用于显示一段时间内的数据变化或显示各项之间的比较情况。基本柱图中,用户可以对数据进行分组,按照维度进行数值展示。彩色柱图不支持分组,只可以在单一组内按照维度进行数值展示,但是色彩选择更加多样。
图片73.png
图片74.png
快速任务
利用基本柱图对两家企业近6月成交合同数量进行展示。
参考数据:
企业名称1月2月3月4月5月6月
A公司192939814720
B公司1223351006336
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将基本柱图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴及分组值。
示例:
"年份": "1月"
"合同数": "19"
"公司名称": "A公司"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“年份”,值为“合同数”,分组为“公司名称”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

②斑马柱图#

斑马柱图是柱状图的一种,与基本柱图相比,斑马柱状图中的柱子是由不连续的可配置的线条组成,能够更加智能、美观地展示多维的数据差异,在可视化看板中应用较多。
图片75.png
快速任务
利用斑马柱图对某公司上半年某产品销量变化进行展示。
参考数据:
指标1月2月3月4月5月6月
产品销量600068005900400079005600
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将斑马柱图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴对应的值。
示例:
"月份": "1月"
"产品销量": "6000"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“月份”,值为“产品销量”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

(2)条形图组件#

条形图组件共有五类,分别是基本条图、彩色条图、堆积条图、正负条图、对比条图。

①基本条图&彩色条图#

条形图是一种表示分类数据的图形或图表,其中矩形条的高度或长度与其所代表的值成比例。基本条形图中,用户可以对数据进行分组,按照维度进行数值展示。彩色条形图不支持分组,只可以在单一组内按照维度进行数值展示,但是色彩选择更加多样。
图片76.png
图片77.png
快速任务
利用基本条图对两家企业近三年营业收入进行展示。
参考数据:
企业名称2021年营业收入2022年营业收入2023年营业收入
建筑企业A2100万2200万2350万
建筑企业B2000万2400万2200万
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将基本条图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴及分组值。
示例:
"年份": "2021年"
"营业收入": 21000000
"企业名称": "建筑企业A"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“年份”,值为“营业收入”,分组为“企业名称”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

②堆积条图#

堆叠条形图是用于分解整体、比较各部分的图表。与条形图类似,堆叠条形图常被用于比较不同类别的数值,每一类数值内部又被划分为多个子类别,子类别用不同的颜色来表示。相较主要用于比较总量的条形图,堆叠条形图可以同时反映总量与结构。
图片78.png
快速任务
利用堆积条图对某公司旗下两家分公司本年度销售额、费用与利润进行展示。
参考数据:
企业名称销售额费用利润
北京分公司1200万800万400万
广州分公司800万400万400万
上海分公司1400万900万500万
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将堆积图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴及分组值。
示例:
"分公司名称": "北京分公司"
"金额": 10000000
"类型": "销售额"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“分公司名称”,值为“金额”,分组为“类型”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

③正负条图#

正负条图是以条形图为基础,是使用正向和反向的柱子显示类别之间的数值比较的图表。其中分类轴表示需要对比的分类维度,连续轴代表相应的数值。
图片79.png
快速任务
利用正负条图对某企业五年来营业收入增长率变动进行展示。
参考数据:
指标20192020202120222023
营业收入增长率10.91%-6.73%-3.21%-4.22%5.24%
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将正负图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴对应的值。
示例:
"年份": "2019"
"增长率": "0.1091"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“年份”,值为“增长率”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

④对比条图#

对比条图是以条形图为基础,可展示同一维度下不同数量对比的图表。使用对比条图,可以在同一维度内对相同量级数据差异进行直观查看及分析。
图片80.png
快速任务
利用对比条图对三家企业同一类型项目的收入与成本进行对比。
参考数据:
企业名称项目收入项目成本
建筑企业A100万70万
建筑企业B120万85万
建筑企业C90万50万
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将对比条图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴及分组值。
示例:
"项目收入": 1000000
"项目成本": 700000
"企业名称": "建筑企业A"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“企业名称”,对比值1为“项目收入”,对比值2为“项目成本”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

(3)折线图组件#

折线图组件共有三类,分别是折线图、带标线折线图和双轴图。

①折线图#

折线图通过线条的形式展示数据随时间或其他连续变量的变化,适用于显示数据在相等时间间隔下的趋势。其中类别数据通常沿水平轴均匀分布,而所有值数据沿垂直轴均匀分布。
图片81.png
快速任务
使用折线图对某企业三类产品上半年销量变化进行展示。
参考数据:
产品类型1月2月3月4月5月6月
产品A10000230001200080001300015000
产品B6000150001100040001200013000
产品C4000130001000030001000010000
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将折线图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴和分组对应的值。
示例:
"月份": "1月"
"销量": "10000"
"产品类别": "产品A"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“月份”,值为“销量”,分组为“产品类别”。
4
操作四
调整组件全局样式、文本样式及数值样式,配置完成。

②双轴图#

双轴图是指数据共用一个X轴和多个Y轴的图表,是柱状图+折线图的结合。这类图表能够更加直观地展示数据的对比关系,有助于加深用户理解,促进用户精准决策。
图片82.png
快速任务
使用双轴图对某公司AB两类产品第一季度销量及总销量同比、环比增长率进行展示。
参考数据:
月份1月2月3月
A类产品销量346440664
B类产品销量378399568
总销量同比增长率0.40.30.7
总销量环比增长率0.20.60.8
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将双轴图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴及分组值。
示例:
"值": "346"
"分组": "A类销量"
"维度": "1月"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“维度”,值为“值”,分组为“分组”​。
4
操作四
调整组件全局样式、文本样式及数值样式,配置完成。

(4)散点图组件#

散点图将所有的数据以点的形式展现在坐标系上,展示变量之间的相互影响程度,点的位置由变量的数值决定。
图片83.png
快速任务
使用散点图对不同类别产品价值波动趋势进行展示。(参考数据使用图例自带静态数据)
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将散点图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的X轴、Y轴及分组值。
3
操作三
输入完成后,下拉找到字段选择区域,将分组选为“name”,值1为“value”,值2为“value1”。
4
操作四
调整组件全局样式、文本样式及数值样式,配置完成。

(5)气泡图组件#

气泡图组件共有三类,分别是气泡图、单轴气泡图、填充气泡图。

①气泡图#

气泡图是一种多变量的图表,用于展示三个变量之间的关系。它在原有的以横纵坐标为变量的基础上,引入多个变量,用气泡的大小、阴影、颜色等形式来表示。
气泡图常用于比较不同类别数据之间的关系,将它们的区别与关系通过气泡的位置以及面积大小来进行较为直观地展示。
图片84.png
快速任务
使用气泡图对三家建筑企业员工人数、资产总值及本年营业收入进行展示与对比。
参考数据:
公司名称员工个数(个)资产总值(百万)本年营业收入(百万)
建筑企业A20699560708.6
建筑企业B3520118301179.2
建筑企业C15827168340.1
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将气泡图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据的类别、大小、X轴与Y轴所对应的值。
示例:
"公司名称": "建筑企业A"
"员工人数": 2069
"资产总值": 9560
"本年营业收入": 708.6
3
操作三
输入完成后,下拉找到字段选择区域,将分组选为“公司名称”,大小为“员工人数”,值1为“资产总值”,值2为“本年营业收入”。
4
操作四
调整组件全局、文本、数值等样式,配置完成。

②单轴气泡图#

单轴气泡图相较气泡图更加单一,只支持选用一个维度来展示不同项目值的大小,气泡大小与值大小成比例。虽然维度少,但单轴气泡图更为简洁美观,在可视化应用中也较为多见。气泡样式可以在全局样式下进行调整,可灵活选择气泡最大及最小尺寸。
图片85.png
快速任务
使用单轴气泡图对某公司五款产品价格进行展示与对比。
参考数据:
产品类别产品A产品B产品C产品D产品E
产品单价300400500250550
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将单轴气泡图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的维度与值。
示例:
"产品类别": "产品A"
"产品单价": "300"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“产品类别”,值为“产品单价”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

③填充气泡图#

填充气泡图可以在气泡中显示数据,通过维度定义各个气泡,通过值定义各个圆的大小比例。填充气泡图在单轴气泡图的基础上进一步省去坐标轴,更加简洁美观,应用较广。
图片86.png
快速任务
使用填充气泡图对某公司五款产品价格进行展示与对比。
参考数据:
产品类别产品A产品B产品C产品D产品E
产品单价300400500250550
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将填充气泡图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的维度与值。
示例:
"产品类别": "产品A"
"产品单价": "300"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“产品类别”,值为“产品单价”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

(6)进度条组件#

进度条组件有三类,分别是进度条图、进度环图和水球图。由于三类图形配置相似,因此此处仅以进度条图配置为例进行说明。
进度图组件可以直观地表现出某个指标的执行进度,展示一组数据的百分比值,常用于对任务进度或完成效率的可视化表达。
图片87.png
快速任务
使用进度条图为某公司行政部预算执行进度进行展示。
参考数据:目前执行进度为60%,超过80%时进行预警。
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将进度条图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的实际值、目标值、预警值和进度。
示例:
"实际值": "0.6"
"目标值": "1"
"预警值": "0.8"
"名称": "进度"
3
操作三
输入完成后,下拉找到字段选择区域,将实际值、目标值、预警值、名称与数据内容一一匹配。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

(7)饼状图组件#

饼状图组件有四类,分别是饼图、环图、玫瑰图和玉玦图。由于四类图形配置相似,因此此处仅以饼图配置为例进行说明。
饼状图组件是一类圆形统计图表,通常由一个圆形和若干个扇形组成,每个扇形代表一个数据类别,其大小与该类别所占比例成正比。它们可以直观地展示各个部分在整体中所占的比例,适用于描述量、频率或百分比之间的相对关系。
图片88.png
快速任务
使用饼图对某公司不同类别产品销量比进行展示。
参考数据:
产品类别产品A产品B产品C产品D
产品销量10000600040004000
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将饼图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的维度与值。
示例:
"产品类别": "产品A",
"产品销量": "10000"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“产品类别”,值为“产品销量”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

(8)雷达图组件#

雷达图是以一个中心点为起点,从中心点向外延伸出多条射线的可视化图表。每条射线代表一个特定的变量或指标,射线上的点或线段表示该变量在不同维度上的取值或得分。雷达图常用于企业经营评价或绩效打分等。
组件配置中,图表大小可以在全局样式中的半径处设计,圆形辅助线可以在分割线处配置。
图片89.png
快速任务
使用雷达图对两家企业负债、盈利、营运和发展四方面能力评分进行展示。
参考数据:
指标名称偿债能力盈利能力营运能力发展能力
公司A1.662.771.453.45
公司B1.231.62.62.45
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将折线图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的维度、值与分组。
示例:
"指标": "偿债能力"
"分值": 1.66
"公司名称": "公司A"
3
操作三
输入完成后,下拉找到字段选择区域,将维度选为“指标”,值为“分值”,分组为“公司名称”。
4
操作四
调整组件全局、文本及数值等样式,配置完成。

(9)仪表盘组件#

仪表盘组件与进度条组件相似,可用于显示执行进度,并设置预警界限,分界线可在“预警处”进行设置,支持选择“大于”或者“小于”两类条件。
图片90.png
快速任务
使用进度条图为某公司资产负债比进行展示,负债超过60%时进行预警。
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将仪表盘组件拖拽到大屏上。
2
操作二
点击“预警”,选择条件为“大于”,并配置颜色为红色。
3
操作三
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的实际值和预警值。
示例:
"资产负债比": "0.66"
"预警值": "0.6"
4
操作四
输入完成后,下拉找到字段选择区域,将实际值选为“资产负债比”,预警值为“预警值”。
5
操作五
调整组件全局、文本及数值等样式,配置完成。

(10)词云组件#

词云是主要由词汇组成类似云朵的彩色图形的可视化组件,用于展示大量文本数据。每个词的重要性通常以字体大小或颜色显示,使观众能够快速感知最突出的文字,了解文字的重要程度。词组的大小可在配置区进行调整,并在“颜色”内通过项目数来区分不同比例词组的颜色。
图片91.png
快速任务
使用词云组件对13个城市参赛人数比例大小进行可视化展示。
参考数据:
城市名称成都郑州南宁乌鲁木齐哈尔滨
参赛人数876946349255300
城市名称北京上海广州深圳杭州
参赛人数3567250019231346946
城市名称沈阳石家庄大连//
参赛人数142377400//
操作指引
1
操作一
创建大屏,点击左侧组件区的图表组件,将词云图拖拽到大屏上。
2
操作二
设置词云最小字号和最大字号,并调整“颜色”设置内各个项目的颜色。
3
操作三
点击“数据配置”,选择“静态数据”,以一组数据为单位,分别输入数据对应的维度与值。
示例:
"地区": "成都"
"参赛人数": "876
4
操作四
输入完成后,下拉找到字段选择区域,将维度选为“地区”,值为“参赛人数”,配置完成。

(11)3D组件#

基本组件中提供两类3D可视化组件,分别是立方体和3D圆柱。这两类组件功能与进度条组件相似,通过立方体容积和盛放内容物体积比例展示百分比,可直观展现目标完成度或任务执行进度。由于两类组件配置相似,因此此处主要以立方体组件为例进行说明。
立方体组件支持设置组件大小、高度和显示方式,显示方式可选择垂直和水平两种,同时可对外层和内层样式分别设置,以凸显比例关系。
图片92.png
快速任务
使用立方体组件对某公司库存商品储存占比进行展示。
操作指引
1
操作一
创建大屏,点击左侧图表组件,将进度条图拖拽到大屏上。
2
操作二
点击“数据配置”,选择“静态数据”,输入总进度值与当前进度。
示例:
"仓储上限": 100
"占用存储量": 50
3
操作三
输入完成后,下拉找到字段选择区域,将总进度选为“仓储上限”,占用仓储量为“占用存储量”。
4
操作四
调整组件图形样式,配置完成。

地图组件#

地图组件是一种用于展示地理数据的可视化组件。它可以显示全国、各省市和各城市的地图,并支持自定义地图展示。地图组件提供了丰富的配置项,包括地图等,可以满足不同类型的可视化需求的数据可视化展示。地图组件可以最直观地表达出数据之间的空间关系,因此在数据分析场景中被广泛应用。
平台提供以下几类地图组件:2D中国地图、2D中国地图(地市)、2D世界地图、自定义地图、3D地图、GIS 2D地图、GIS 3D地图、3D地球、2D图文世界地图、2D世界地图(中国居中)、地球、百度3D地图、T-GIS地图。
image.png
由于配置逻辑相似,本手册会以2D中国地图为例,先介绍地图组件共用配置功能,再进行静态数据配置说明。

(1)组件配置#

以2D地图组件为例,其组件配置包括如下几项:全局样式、默认地图样式、气泡、卡片、飞线、渐变填充、区间填充。
图片93.png

①全局样式#

可以对组件全局使用的字体格式、大小以及组件边距进行设置,同时可以开启“联动时地图变更”“显示返回按钮”“显示区域名称”几个功能选项;

②默认地图样式#

此处可设置地图的填充颜色、边界线颜色与宽度,以及替换或清除背景填充图片。此外,组件还可以设置地图初次加载时显示的地图区域,以及地图下钻路径,字段数据来源于静态数据;

③地图样式#

该部分功能与默认地图样式相似,可通过新建项目,对地图组件点击穿透的小地图进行个性化样式设置;

④气泡#

气泡主要用于突出显示地图组件内的省市数据,组件支持灵活调整气泡大小、颜色、填充图及动画功能和周期,修改文本和数值样式,同时设置文本布局方式与间距。

⑤卡片#

卡片主要用于展示各组省市对应的明细数据,数据来源于静态数据配置。此处勾选“是否显示”后,可对卡片的填充图片进行替换和清除,设置卡片大小、布局和显示方式与轮播时长,同时配置文本样式和标题名称,标题名称需要与静态数据输入的字段名匹配;

⑥飞线#

飞线设置的是省市间的连线及流动方向。勾选“是否显示”后,可以对飞线的速率、颜色、粗细等格式进行配置;

⑦渐变填充和区间填充#

这两类填充功能会突出显示省市数据对应的地图区域,如果和气泡、卡片搭配使用会影响可视化效果,因此不推荐同时配置。组件支持对填充颜色、渐变梯度等内容进行设置。

(2)静态数据配置#

以2D地图组件为例,地图组件需要输入省份名称、经纬度、目标经纬度、值、卡片图片与字段、类别等数据。
其中:
省份名称用于设置突出显示的地市名称,可配置气泡显示;
经纬度和目标经纬度用于设置地市位置和飞线方向,目标经纬度可不配置;
值是各地市对应的数值,可不配置;
卡片图片、卡片字段和卡片备选字段用于配置卡片显示内容及卡片显示图片;
类别则对应了气泡的项目,可根据不同类别进行可视化区分。

高级组件#

高级组件是功能性组件,包括:下拉单选筛选器、下拉多选筛选器、按钮单选筛选器、层级筛选器、多组按钮式筛选器、位置可调筛选器、TAB外链、按钮、导出excel、导出word、输入框、多级菜单、iframe、状态图片、状态卡片列表、高级列表、3D图片墙、图文排行榜、状态回传组件、设备状态监控、组织架构、关系网络、时间轴、内嵌大屏TAB、日期时间筛选器、视频通话、多人视频通话、三维柱状图、多状态气泡图、三维散点图、BIM模型、截图导出PNG。
image.png
image.png
高级组件种类较多,可满足多样可视化及功能需求。手册将对以下几类常用组件进行介绍,分别是:下拉单选筛选器、按钮单选筛选器、位置可调筛选器、TAB外链、多级菜单、关系网络、时间轴和截图导出PNG。

(1)按钮单选筛选器#

按钮单选筛选器与下拉单选筛选器相似,区别在于将下拉选项变成罗列、可点击的按钮。可以较为直观地看出筛选项信息,且可以进行轮播展示并设置不同的轮播时长。
由于组件数据和组件通信配置相似,因此此处仅介绍按钮单选筛选器的样式设置功能。多组按钮式筛选器和位置可调筛选器配置可参考此部分进行配置。

①全局样式#

可以设置按钮布局、大小、样式以及组件字体格式;

②选中样式和非选中样式#

由于组件通过点选按钮筛选数据,进行可视化展示,因此需对按钮选中和不选中两类状态分别设置文本及按钮样式,包括文本大小、颜色等,以及按钮填充、边框颜色等;

③轮播设置#

勾选“是否自动轮播”后,选项会自动跳转,展示每个选项下对应的数据可视化图表,并可设置不同轮播间隔时间。
图片94.png

(2)位置可调筛选器#

位置可调筛选器允许在筛选器中输入数据,并进行轮播展示。筛选器可以覆盖在地图或其他组件之上,通过自动在各个筛选器之间切换显示,动态切换数据展示,提升可视化效果。
组件选中样式、非选中样式及轮播设置与按钮单选筛选器相似,因此此处主要介绍该组件其他配置功能:

①全局样式#

此处主要对组件字体,按钮样式进行设置,并可配置默认选中筛选器和是否显示“全部”的特殊筛选器;

②数值格式#

此处可以分项目对筛选器上显示的字段名称和数值格式进行设置,字段设置完成后,静态数据配置需与字段名一一匹配;

③单块位置#

可对不同筛选器位置进行布局调整;

④数据配置说明#

选项值对应筛选器类型名称,数值个数与数值格式配置的项目数一致,有多个项目时需要输入多个数值。
图片95.png

(3)多级菜单#

如果tab选项太多,显示不全,可以用多级菜单将选项用多级方式呈现,既可以展示菜单和菜单之间的关系,又可以同时切换多张大屏,优化展板布局。每个菜单名称即可对应一个大屏页面。
除了基本大小配置外,组件还支持分别配置全局样式、菜单区布局、内容区域布局、菜单列表、筛选框样式和下拉框样式等。
详细配置说明如下:

①全局样式#

可修改组件字体的格式和组件圆角值;

②菜单区布局和内容区域布局#

可以修改菜单区上下左右间距和内容区域的上下左右间距,修改菜单区和内容区域显示的位置;

③筛选框样式#

可对筛选框大小、筛选框固定显示的内容、上下级菜单间隔的符号、文字样式、背景填充以及边框样式进行设置;

④下拉框样式#

可对下拉框的文字样式、背景填充、边框样式、选项选中后的样式和hover样式进行配置。hover设置完成后,若筛选项名称过长,无法显示完整时,将鼠标移动上去即可用悬浮框显示完整的信息;

⑤菜单列表#

此处可以设置菜单等级和个数,项目和子项均可以设置链接地址、名称和轮播时长,地址可以是平台内部大屏地址,也可以设置第三方地址。
图片96.png

(4)关系网络#

关系网络是以点线的形式表现事物之间关系的组件,以点线的形式展示复杂的网络关系,适用于将客户关系、人际网络等有关联的数据进行可视化展示。
组件配置说明如下:

①标签样式#

此处可以配置组件文本的字体格式、颜色和阴影效果;

②连接线样式#

配置各个标签之间的连接关系,可设置线的颜色、粗细等格式;

③圆点样式#

可通过分项目设置不同的标签,对标签的颜色、背景填充、边框和阴影效果进行单独设置;

④数据配置说明#

“名称”字段对应标签名称,“当前ID”字段对应连线起点,“目标ID”对应连线终点。
图片119.png

(5)时间轴#

时间轴组件主要用来动态展现计划或任务实施进度和当前所处节点。
该组件配置说明如下:

①全局样式#

可设置时间轴文本格式,也可调整轴的背景色与填充色;

②节点#

可以设置节点的大小和时间是否到达该节点时节点显示的样式;

③节点标签#

可以调节标签位置和时间是否到达该节点时文字显示的样式;

④动画#

设置时间轴动画轮播功能和时长;

⑤数据配置说明#

“名称”字段设置节点对应的时间点,“值”字段设置达到该节点的时间界限,“说明(可选)”字段设置对该节点事件的说明。
图片97.png

(6)截图导出PNG#

截图导出PNG主要用于对大屏进行截图,并以PNG图片格式进行导出。组件设置好后,可进入大屏预览界面点击该组件,对大屏进行截图及导出。
组件主要配置内容包括文本和按钮样式两类,配置说明如下:

①文本#

可以设置组件显示的文本内容及文本格式,并对文本的样式如颜色、阴影等效果进行调整;

②按钮样式#

可设置按钮填充颜色或背景图,以及设定按钮发光效果和阴影效果。
图片98.png

文本内容#

文本内容组件用于为大屏添加文本类内容,组件主要包括:单行文本、多行文本、多值过滤文本、数字图、表格、打卡进度表、轮播列表、轮播列表条、TOP列表、正负指标图、状态文本、通知组件、状态灯、日期时间、跑马灯、视频、图片跑马灯、LOGO墙、参数展示、FLV视频等。
image.png
图片99.png

(1)日期时间#

日期时间组件可显示当下日期信息。日期时间组件可分别对年月日、时分秒、星期三个维度是否显示、格式、文本样式等进行设置。
图片100.png

(2)跑马灯#

跑马灯组件可循环滚动显示文本信息。组件可分别对文本方向、文本速度、文本样式、外观形状、填充色、边框、发光等进行设置,文本内容在数据配置处输入。
图片101.png

辅助图形#

辅助图形用于为大屏插入图片或图形组件进行装饰,包括以下几类组件:图片、背景块、圆形组件、边框、装饰线、轮播图、基本线、粒子动画、SVG画布等。本手册主要对常用辅助图形组件进行介绍。
图片102.png

(1)图片#

图片组件可为大屏插入图片,并设置动画。
该组件配置说明如下:
(1)图片选择器:点击图片选择器即可选择本地图片上传,图片缩放方式有自适应平铺和等比例缩放两种;
(2)旋转动画:开启此功能后,可设置图片旋转动画的方向和速度。
图片103.png

(2)图形组件#

图形组件包括五类,分别是背景块、圆形组件、边框、装饰线和基本线。这些组件无须设置数据内容,只用于装饰大屏。组件配置主要为组件背景色、边框色等内容的设置。
图片104.png

资源收藏#

资源收藏主要用于收纳个人已配置好的组件,并设置是个人可见还是所有人可见,通过“个人资源”和“公开资源”两个页签进行区分。用户可以选中需收藏的组件,点击鼠标右键,选择“收藏”,即可将组件收藏至个人资源或公开资源。
图片105.png
图片106.png
上一页
大屏管理
下一页
数据管理
Built with