可视化组件是用来将数据以图形方式呈现的视觉化组件,是构成数字化大屏的基本要素。平台提供的组件可分为六类,包括基本组件、地图组件、高级组件、辅助图形、文本内容和资源收藏。本节会先介绍组件的通用配置,并介绍几种常用的重点组件,其后再按照组件类型对各类型组件进行介绍。组件通用配置说明#
将组件拖拽至设计区后,便可以对组件进行进一步优化,各类组件通用配置通常包括样式配置、数据配置、交互配置、通信配置四项,不同的组件交互配置、通信配置大致相同,样式配置和数据配置会有所差异。本节会对组件通用样式配置、数据配置、交互配置和通信配置进行说明,其他个性化配置 需查看各个组件的详细介绍。(1)样式配置#
①全局样式#
全局样式是指对组件全局的样式(包括字体、组件边距等)进行调整。此处以基本柱图组件为例进行讲解,具体配置说明如下:字体操作说明:
默认:Arial,苹方,微软雅黑。
用法:直接写字体名称就可以,电脑里有这个字体就按这个字体显示,可以写多个,写多个的意思是如果当前电脑里没有第一个字体就找第二个字体。多个字体间使用英文逗号间隔。
边距使用场景:
上:调整组件最高柱子和上边框之间的距离。
下:调整组件X轴和下边框之间的距离。
左:调整组件Y轴和左边框之间的距离。
右:调整组件右边和左边框之间的距离。
操作说明:直接输入距离,范围大于0,单位为像素,如100,默认为10。
柱子样式宽度占比操作说明:直接输入数值,范围大于0,输入的数值是指每个柱子的宽度占X轴一段的百分比。
主体间占比使用场景: 组件如果大于两个柱子,调整两个柱子之间的距离。
操作说明:直接输入数值,范围大于0,输入的数值是指柱子之间的宽度占X轴一段的百分比。
圆角值操作说明:直接输入数值,范围大于0,输入的数值是指柱子边框的弧度。
②数据样式#
数据样式是指对数据在组件内的呈现形式进行调整,例如数据在基本柱图中呈现的形式是柱形,则使用数据样式可对柱形的填充色、边框色和边框粗细进行调整。如果存在多个类别,例如输入两类产品6个月的销售情况,以时间做X轴,销量做Y轴,则为区分开两类产品,系统会自动将其按照项目进行分组,用户对不同项目配置数据样式即可。项目一填充色使用场景:调整柱子1的框内颜色:有两个颜色选择,第一个颜色是指柱子下半边的颜色,第二个颜色是指柱子上半边的颜色,中间呈现渐变的效果。
使用场景:调整柱子1的边框颜色,两个渐变色效果如填充色描述。
操作说明:点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。设置颜色有三种方式:
滑动颜色调的位置,调整颜色
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可
选择下方的颜色框,常用的颜色都有显示。 边框粗细操作说明:直接输入数值,值要大于0,值越大,边框越粗。
项目二使用场景:多个维度做对比,可以增加第多个柱子来对比。
③文本样式#
文本样式是设置不同地方的文本显示方式,一个组件内可能会出现多个针对不同部分的文本样式设置,例如在基本柱图里,数值、X轴、Y轴、图例和hover层中都有文本样式的设置,虽然设置的对象不同,但是设置的内容都相差不远。字号操作说明:可以直接输入\鼠标移动到字号编辑栏,显示箭头,点击箭头调整数值。
颜色操作说明:点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。设置颜色有三种方式:
滑动颜色调的位置,调整颜色;
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可;
选择下方的颜色框,常用的颜色都有显示。
④数值#
数值是指对 图形组件中数值显示进行样式设置,例如数值格式、小数位数、数值间距等。显示使用场景:在柱形图上不显示数值的时候选择无,默认显示为全部。
数值格式缩写方式 无缩写/国际缩写/中国缩写
使用场景:选择数值显示单位,10000举例
无缩写(千位分隔符):直接显示为10,000,有千位符
国际缩写(K/M/B):10K
中国缩写(万/亿):1万
小数位数使用场景:数值显示的小数点位数,如2,则数值会显示两位小数点。
背景边距使用场景:
上:是指数值背景往上的大小。
下:是指数值背景往下的大小。
左:是指数值背景往左的大小。
右:是指数值背景往右的大小。
背景颜色使用场景:背景快显示的颜色,前提是边距距离可以形成一个矩形,如果边距距离都为0,则无矩形显示,设置颜色无载体。
操作说明: 点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。设置颜色有三种方式:
滑动颜色调的位置,调整颜色;
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可;
选择下方的颜色框,常用的颜色都有显示。
阴影大小使用场景:设置背景块阴影的模糊程度,越大则越模糊。
⑤X轴#
如果组件是柱状图、折线图等拥有X轴和Y轴的组件,用户可对两轴样式进行设置,设置内容包括文本样式、是否显示X轴、轴线样式、网格线、刻度线、缩略周、滚动条、标签方向和轴文间距等。文本样式
参考之前介绍。
是否显示使用场景:是否需要显示X轴,如果不需要显示,勾选一下即可,默认为显示。
轴线是否显示使用场景:是否需要显示X轴的线,如果不显示,勾选一下即可,默认为显示。
颜色操作说明:点击颜色的圆圈,弹出颜色设置框,里面可以设置颜色,透明度。设置颜色有三种方式:
滑动颜色调的位置,调整颜色
直接输入HEX值,可以用吸色器吸住想要的颜色,然后输入值即可
选择下方的颜色框,常用的颜色都有显示
粗细操作说明:直接输入数值,值要大于等于0,值越大,边框越粗。
网格线是否显示使用场景:是否显示X轴的参考线,以此来做空间间隔。
粗细操作说明:直接输入数值,值要大于等于0,值越大,边框越粗。
类型操作说明:点击筛选框可选择需要的类型,目前有三种类型可供选择。
刻度线是否显示使用场景:是否显示X轴的刻度线,以此来做空间间隔。
粗细操作说明:直接输入数值,值要大于等于0,值越大,边框越粗。
长度操作说明:直接输入数值,值要大于等于0,单位为像素。
缩略轴是否显示使用场景:
缩略轴:是指通过调整缩略轴的位置,可以调整对应位置显示的柱形图。
一般用在X轴太长,位置有限,只能先显示一部分,在查看详情的时候,可以通过调整缩略轴,查看全貌。
开始位置(%)操作说明:直接输入大于等于0的数值,这里的数值是指开始位置在整个X轴的百分之多少。
结束位置操作说明:直接输入大于等于0的数值,这里的数值是指结束位置在整个X轴的百分之多少。
滚动条是否设置使用场景:一般用在X轴太长,位置有限,只能先显示一部分,在查看详情的时候,可以通过调整滚动条进行查看。
单列宽度使用场景:这里的宽度是指X轴维度的宽度,如一月占的宽度,二月占的宽度。
标签方向使用场景:当X轴数值较长,无法显示全,则设置方向,可以按照倾斜度数显示。
操作说明:直接输入大于等于0的数值,这里的单位为度。
轴文间距操作说明:直接输入大于等于0的数值,这里的单位为度。
⑥Y轴#
如果组件是柱状图、折线图等拥有X轴和Y轴的组件,用户可对两轴样式进行设置,设置内容包括文本样式、是否显示Y轴、轴线样式、网格线、刻度线、缩略周、滚动条、标签方向和轴 文间距等。是否显示使用场景:选择是否显示Y轴,勾选则显示,不勾选则不显示。
文本样式
可以设置Y轴的字的格式大小颜色等,详细参考之前对文本样式的介绍。
文本格式自定义小数点位数使用场景:选择是否自定义小数点位数,如果不定义,则默认显示API中的数值。
操作说明:选择勾选和不勾选,默认不勾选不自定义。
轴线、网格线、刻度线
具体见之前X轴配置介绍。
自定义刻度是否设置(无\自适应\自定义范围)使用场景:
无:对Y轴的刻度无设置
自适应:对Y轴的刻度系统自适应
自定义范围:确认最大值和最小值来定义Y轴的数值显示(选择自定义范围后,下方的最大值和最小值设置才有效)
最大值使用场景:当设置为自定义范围后,可输入最大值,代表Y轴显示的最大值为这个数值。
操作说明:直接输入数值,值要大于0,且大于最小值。
最小值使用场景:当设置为自定义范围后,可输入最小值,代表Y轴显示的最小值为这个数值。
⑦图例#
图例是指对组件中颜色代表的含义进行文字说明,示意图和配置说明如下所示:是否显示使用场景:设置图例是否显示,一般一个柱形图可以不用显示,大于1个或一个以上需要用图例说明。
排列方式 水平排列\垂直排列
使用场景:
水平排列:图例排成一个横排;
垂直排列:图例垂直排列。
位置 水平距离(%)\垂直距离(%)
使用场景:
水平距离:距离整个组件水平距离的百分之多少,如50%则显示在水平的最中间;
垂直距离:距离整个组件垂直距离的百分之多少,如50%则显示在垂直的最中间。
操作说明:直接输入数值,这里的数值指的是占整个组件水平的百分之多少。
间距操作说明:直接输入数值,这里的数值指的是图例和图例之间的距离,单位为像素。
文本样式
见之前文本样式中的介绍。
⑧hover层#
Hover层是指大屏预览时,鼠标悬浮在组件上时显示的内容,如下图所示:触发动作 鼠标悬浮/点击
使用场景:在非编辑页面,如预览的时候,想要用哪种操作显示hover,一种是鼠标悬浮在柱形图的时候显示,一种是点击的时候显示。
文本样式
详情见本页第四节。
边距使用场景:
上:hover背景框上边框与背景块值的距离。
下:hover背景框下边框与背景块值的距离。
左:hover背景框左边框与背景块值的距离。
右:hover背景框右边框与背景块值的距离。
(2)数据配置#
数据配置配置输入组件的数据,并设置引用字段,例如柱形图需要设置数据分组字段、数据维度字段和值字段,由此确定X轴和Y轴的类型和刻度。大屏支持静态数据和API两种数据配置方式。静态数据需要用户将数据写成示例中JSON格式,API需要用户输入API地址,设定API参数、更新时间和过滤方式。输入数据后,无论是静态数据还是API,都需要按照组件数据要求的格式选择字段,组件才能根据字段的值进行可视化呈现。(3)交互配置#
大屏中的组件支持配置交互功能,配置交互后,数据点击即可完成交互。交互共分为弹窗、跳转、浮层、回调四种形式。①弹窗#
设置弹窗交互后,用户点击大屏页面上的文字、图表,可触发弹窗页面。支持中心弹窗、固定位置两种弹窗形式;可选择系统内的大屏和外部链接地址,可调整宽高尺寸。②跳转#
设置跳转交互后,用户点击大屏页面上的文字、图表,可触发跳转页面。组件支持当前标签页、新标签页两种跳转方式,可选择跳转系统内的大屏或外部链接。③浮层#
设置浮层交互后,用户点击大屏页面上的文字、图表,可打开新页面悬浮在原大屏上。组件支持系统内的大屏或外部链接,并设置浮层大小。④回调#
设置回调交互后,用户在点击组件时,向外层发送固定参数值,例如向嵌入大屏的3D EXE发送参数,以便EXE进行跳转等交互。(4)通信配置#
数据通信,即点击图表数据发生变化的交互,是通过参数传递的方式来实现的。以表格为例,如果配置了下拉单选筛选器与表格互动,则可达到Excel表中数据筛选的效果,根据筛选器选项变化,表格展示的内容也会变化。建立数据通信需要完成以下几个步骤:建立通信组,配置发布组和配置订阅组的通信配置。以下分别介绍通信组配置和通信配置。①通信组#
在4.1.1.3大屏配置一节中 ,曾提到可对当前大屏的数据通信创建事件,目的是对组件之间的数据互动进行分组,以避免混淆。例如点击顶部时筛选器联动页面所有图表为一个事件,点击柱图查看明细数据为一个事件。消息类型
大屏需要进行数据交互的组件,需要定义消息类型,消息类型共分为发布和订阅。勾选发布,即当前组件是发布参数给其他组件;勾选订阅,即当前组件是订阅其他组件发来的参数;勾选发布+订阅,即当前组件即发布参数又订阅参数,会将接收到的参数+自己的参数一同发送给订阅组件。
发布时清除
用于多级联动筛选使用,输入需要清除的参数名称即可。
发布组/订阅组设置
发布组事件和订阅组事件需为同一个事件,才能使组件进行关联。
事件可多选,如果发布事件多选,组件发布会同时向两个事件的订阅组发布参数,如果订阅事件多选,组件可接受多个发布事件的参数,但同时只接受一个发布事件的参数。
参数设置
通信组各组件间的数据交互是通过传递参数实现的,订阅组件需要设置接收参数,共支持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”。
填写参数时,输入参数名,选择发送对应参数的组件即可,如果参数没有对应组件,或多个参数都来自同一个组件,需要填写参数对应的字段名称。重点组件#
(1)堆积柱图#
堆积柱状图通过将多个柱形叠加,展示了同一数据集中不同类别的数值大小。它不仅能够直观地展现每个类别的数值,还能反映出所有类别加起来的总和。堆积柱状图适用于既需要展示数据总量,同时又需要看到数据内部组成情况的场景。例如销售公司统计全年销售数据,需要看到销售额随时间变化的趋势和数量,也需要看到其中几大产品线销售额的数值与变化情况,此时适合用堆积柱图进行数据可视化。利用堆积柱图对某公司本年度产品A、B、C的12个月销售额总量与构成进行展示。
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“堆积柱图演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的图表组件,将堆积柱图拖拽到大屏上。
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将维度(X轴)设定为字段“时间”,值(Y轴)设定为“销售额”,将分组(数据内 部结构)设定为“产品类型”。
9
操作九
输入完成后,收起数据配置,打开全局样式,依次调整字体、边距、柱子样式。所有数值输入后即刻生效。
字体:调整整个组件的字体。直接写字体名称就可以,电脑里有这个字体就按这个字体显示,可以写多个,写多个的意思是如果当前电脑里没有第一个字体就找第二个字体;
10
操作十
收起全局样式,打开数据样式。此处可分别对不同分组的柱形颜色进行调整,例如使用的演示数据中分组为产品类 型,一共有三种产品,则会分为3组,即三个项目。每个项目展开后可以对该项目控制的柱形调整填充色、边框色和边框线条的粗细。
11
操作十一
收起数据样式,打开数值。数值调整的事是堆积柱图上方悬浮的数值,即本案例中的销售额,只有勾选显示为“全部”后才会显示。勾选后,用户可在文本样式、数值格式、背景中分别调整数值的字号、颜色、粗细阴影,数值的缩写方式、显示格式、小数位数、数值间距,并设置数值的文本框背景间距、填充色和阴影。
12
操作十二
收起数值,打开X轴。此处可以对X轴是否显示、文本样式、轴线格式、网格线、刻度线、缩略轴、滚动条进行调整,本例中的X轴即为显示月份时间的轴线。详细配置说明可参考4.1.2.1组件通用配置说明一节。
13
操作十三
收起X轴,打开Y轴。此处可以对Y轴是否显示、文本样式、文本格式、轴线、网格线、刻度线、自定义刻度、轴文间距进行调整,本例中的Y轴即为显示销售额大小的轴线。详细配置说明可参考4.1.2.1组件通用配置说明一节。
14
操作十四
收起Y轴,打开图例。图例可以配置是否显示图例,并调整图例位置(即在组件中水平距离(左右)和垂直距离(上下))、图例排列方式、各图例之间的间距、图例说明的文本样式。
15
操作十五
收起图例,打开hover层。此处可设置组件预览时,如果鼠标悬停在图表柱形上时,显示文字的格式,包括触发动作,边距、背景框样式和文本样式。组件配置时,无法查看hover层悬浮效果,只有进入预览才可以查看。
(2)带标线折线图#
带标线折线图是折线图中的一种,只能展示单一维度同一类型值,但是配置有标线,适用于预警类的可视化组件。标线配置与X轴、Y轴配置相似,可配置标线、标线文字、标线背景及标线边框是否显示,也可调整标线颜色及粗细,标线背景及边框颜色等。使用带标线折线图对企业本周资金流出变化进行展示,并设置资金流出预警线。
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“带标线折线图演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”, 在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的图表组件,将代标线折线图拖拽到大屏上。
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将维度(X轴)设定为字段“交易时间”,值设定为“金额”,将标线设定为“预警线”。
9
操作九
调整组件全局样式、文本样式、数值、X轴、Y轴、图例、Hover层等通用设置。
10
操作十
展开标线,这里设置的是带标线折线图特有的设置,可对标线进行配置。标线文字是系统根据数值单位自动带出的,调整标线样式时,主要对标线的颜色、粗细、类型进行调整,对标线文字可调整期是否显示、颜色、文字填充的背景色和边框等。
(3)表格#
表格组件与电子表格功能相似,可结合数值进行更多样的可视化展示,适合展示信息丰富、维度多的内容,例如本年收款前二十客户排名等。①全局样式#
此处可设置表格字体格式、分页、轮播和置顶内容,在数据量大时,可以选择开启分页和轮播来展示完整的表格内容。同时全局样式也可以设置表格列宽、换行和对齐方式等格式。字体:调整表格全局字体样式,但不包括底下的分页行。
分页:设置表格行数太多时是否分页,每页展示行数,并对分页的页签进行格式设置,包括背景色、翻页按钮被选中和不选中时的颜色和自定义文字。
轮播:设置表格行数多时是否自动翻页展示内容,可设置翻页间隔时间和翻页方式。
置顶:可以置顶符合要求的数据。例如设置第六列中的未达标置顶显示,让异常情况排在前面更为显眼。
列宽:设置每一列的宽度,直接输入各列宽度数值即可,输入几个数值,组件即可自动带出多少列,并按照像素控制列表宽度。多个宽度之间用英文逗号相间隔。
是否换行:设置单元格内容过多时,是否换行展示,不设置换行时,则会用省略号代替因文字太长不能显示的内容。
对齐方式:设计表格内容对齐方式,包括居左、居中、居右、文字居左数字居右四种格式。
②表头#
可设置表头的高度(可直接输入数值,按照像素控制)、背景色、边框样式和文本样式;③行配置#
可设置行高、背景色(可按奇偶数行配置)、边框样式和文本样式,还配置表格边框和内部横竖分割线的样式;④列配置#
与行配置不一样,列配置可以分项目配置列的特殊内容,按照列数进行条件设置、文本样式、文本背景和单元格背景样式设置;⑤合并列#
此处输入需要合并的列序号后,系统即可自动合并数值相同的列;⑥表头排序#
⑦冻结列#
和电子表格的冻结首列效果相同,可以设置冻结后的颜色。当组件长度不足以显示表格全部时,拖动表格时即可触发冻结效果。⑧进度条配置#
设置列配置后,可以根据需求设置相应的进度条,并对条件、进度条和光点等样式进行调整。例如下图所示,如果第六列状态类型为达标,则设置第5列的数值为进度条(第五条是百分比数值时才可正常生效),并对达标时进度条的高度、圆角值、颜色、光点样式和背景样式进行设置。⑨超链接配置#
如果表格中有超链接,可以通过超链接配置将网址配置为可点击跳转的文本信息,效果如下图所示。使用表格组件展示某集团企业下属公司应收应付款项情况。
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“表格演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的文字组件,将表格组件拖拽到大屏上。
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将第一列设置为“本方单位名称”,第二列设置为“客商名称”,第三列设置为“应收应付类”,第四列设置为“款项性质”,第五列设置为“应收余额原币”,第六列设置为“账龄”,第七列设置为“到期日期”。
9
操作九
调节列表全局样式、表头、行、列配置,配置完成后,点击预览。
(4)下拉单选筛选器#
下拉单选筛选器支持通过下拉菜单,可以快速筛选特定条 件下的数据,展示不同类型数据可视化图形。组件可灵活配置全局样式、筛选器样式和下拉框样式,具体功能需搭配组件通信才能正常使用,组件通信配置项目说明详见4.1.2.1组件通用配置说明一节。下拉多选筛选器、层级筛选器与其配置逻辑相似,可参考下拉单选筛选器介绍进行配置。①全局样式#
可配置组件圆角值与字体格式,同时若勾选“是否显示‘全部’”,则默认筛选器初始状态是“全部”(即全选),也可以通过设置“默认选中”,修改初始选中为单个选项;②筛选器样式#
可以对筛选器高度、边框、填充色和文字样子进行配置;③下拉框样式#
配置下拉框的大小、边框、填充、文字和选中效果,同时还可设置hover层效果,适用于当筛选项名称过长无法显示完整的情景,配置完成后,鼠标移动上去即可显示完整的信息;④搜索框#
搜索框适用于选项多、难以寻找目标选项的情况,可以灵活设置搜索方式、搜索框边距、边框、水印样式、输入样式和结果高亮效果。搜索方式分为前端搜索和API传参搜索两种方式,如果选择API传参搜索,则需 要输入传参参数名。为表格设置下拉单选筛选器,使其可以通过筛选器分别查看应收账款和应付账款的信息。
1
操作一
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,找到之前为表格演示数据创建的API,点击修改。
2
操作二
进入API配置页面后,点击“下一步”,打开API参数配置页。
3
操作三
在SQL语句下方添加语句:where (to_char(ZFSCOLUMN5) IN ({{.应收应付类}}) OR {{.应收应付类}} IS NULL)(所有符号均为英文符号)。(ZFSCOLUMN5是自动生成SQL中,应收应付类的字段名称)
4
操作四
点击右上角“参数”,切换到参数配置页面,将参数应收应付类的类型设置为string,然后点击“下一步”。
5
操作五
为参数输入值“应收账款”,点击“开始测试”,在右侧窗口查看返回数据。如返回数据无异常,正常读取到应收应付类为应收账款的数据,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
打开之前创建表格组件的大屏,点击左侧组件区的高级组件,将下拉单选筛选器组件拖拽到表格上方。
8
操作八
选中筛选器组件,在组件配置区点击“数据配置”,选择“API”,粘贴与表格相同的API地址(即之前上传到数据网盘的表格演示数据的API地址),勾选“定时更新”,然后设定字段选择:发布值选择“应收应付类”,选项值选择“应收应付类”。
10
操作十
点击“大屏设置”,找到通信组设置,点击“添加”,新增事件名称,并将其命名为“下拉单选筛选器”。
11
操作十一
点击筛选器组件,打开组件通信,勾选消息类型为“发布”,为发布组设置选择事件为“下拉单选筛选器”。
12
操作十二
点击表格组件,打开组件通信,勾选消息类型为“订阅”,为订阅组设置事件为“下拉单选筛选器”,在HTTP body参数(POST)处添加参数“应收应付类”,并选择组件为“下拉单选筛选器”(与筛选器名称相同)。
(5)单行文本#
平台提供了两类文本组件,分别是单行文本和多行文本,可展示文本信息。由于两类组件配置相似,因此此处主要以单行文本为例进行说明。单行文本组件支持设置组件大小、高度、名称、风格、字体大小、字体颜色等信息,还可以对鼠标悬浮在文本上时显示的图形进行设置。由于文本内容通常不变,无需更新,因此可在数值配置处利用静态数据设置。1
操作一
打开之前创建组件的大屏,点击左侧组件区的文本组件,将单行文本组件拖拽到大屏上。
2
操作二
点击单行文本组件,打开数据配置,选择“静态数据”,修改引号内文本内容为“某企业数字化大屏”。
3
操作三
修改完成后,拉长文本框直至所有文字正常显示。展开文本样式,对文本进行样式调整。
(6)数字图#
数字图组件可以用来显示数字信息,例如数量、金额、股价等信息。数字图组件由三部分组成:前缀、数字、后缀,前、后缀均可手动输入文字或数字信息展示。①全局样式#
②数字样式#
此处可以设置数字组件核心数字的文本样式和数值格式;③前缀样式#
④后缀样式#
⑤动画#
设置是否开启数字更新动画,动画是否定时播放,动画播放时长以及播放周期。1
操作一
打开之前创建组件的大屏,点击左侧组件区的文本组件,将单行文本组件拖拽到大屏上。
2
操作二
点击单行文本组件,打开数据配置,此处即可使用API引入数据,也可直接使用静态数据输入数据。选择静态数据,将数字修改为693900000。
3
操作三
修改完成后,拉长组件,直至所有数字文本都正常显示。展开数字样式,对数字进行样式调整,将缩写方式修改为“中国缩写(万/亿)”。
4
操作四
点击前缀样式,将前缀内容修改为“营业额”,并调整文本样式。
5
操作五
点击后缀样式,将后缀内容输入为“元”,并调整文本样式。
(7)轮播列表#
轮播列表组件可滚动展示信息条,适合展示新闻信息、排名信息或风险提示信息等。①全局样式#
设置字体格式,组件布局,是否轮播、轮播间隔和轮播形式,设置每页行数,还可以设置在数据条数较多时,点击翻页的指示器格式;②列配置#
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“轮播列表演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的文字组件,将轮播列表组件拖拽到大屏上。
8
操作八
选中组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:将ID设置为“披露时间”,第一列设置为“客商名称”,第二列设置为“失信风险详情”。
9
操作九
调整组件的全局样式和列配置,配置完成后,点击预览,查看组件效果。
(8)正负指标图#
正负指标图组件可显示代表增长或减少趋势的指标信息,适合展示销售额增加比例、成本增长比例等以百分比计数的指标。正负指标图组件可对环的样式、数值样式、文字样式、动画等进行设置。①全局样式#
可以设置是否显示百分比环、是否显示文字、是否显示箭头、是否显示正负号、是否按百分数显示数值,同时对百分比环和文字的比例进行排版;②环样式#
如果选择显示环图表,此处可对环大小、颜色、描边进行样式调整;③数值#
④文字#
1
操作一
创建大屏,点击左侧文本内容组件,将正负指标图拖拽到大屏上。
2
操作二
点击“数据配置”,此处即可使用API引入数据,也可直接使用静态数据输入数据。选择“静态数据”,输入同比增长信息:NAME后输入文字信息,VALUE后输入数值信息。示例:
"NAME": "本年新增客户"
"VALUE": "132"
3
操作三
打开全局样式,去除环和百分比,将增加颜色设置为绿色,减少颜色设置为红色。
5
操作五
调整组件图形样式,配置完成后点击预览,查看组件配置效果。
(9)2D中国地图#
2D中国地图组件可以将数据在地图上进行展示,支持按照行政区划的指标数值,通过点位大小/颜色填充,展示数据,并可以对目标位置进行打点展示。此外,还可以通过飞线代表点位之间的关系,如:仓储物流发出位置与接收目标位置。①全局样式#
可以对组件全局使用的字体格式、大小以及组件边距进行设置,同时可以开启“联动时地图变更”“显示返回按钮”“显示区域名称”几个功能选项;仅点击数据(点、线)进行组件交互,点击非数据区域进行地图下钻:点击数据打点和飞线可以进行组件交互,点击非数据区域可以进行地图下钻。
显示返回按钮:如果设置地图下钻,勾选此选项后,预览大屏时可通过返回按钮返回一级地图。
文本样式:如勾选显示区域名称,可通过此处对文本样式进行控制。
边距:调整地图上下左右的边距(如填充图片,调整此项可能会导致图片和地图偏移)。
②默认地图样式#
此处可设置地图的填充颜色、边界线颜色与宽度,以及替换或清除背景填充图片。此外,组件还可以设置地图初次加载时显示的地图区域,以及地图下钻路径,字段数据来源于静态数据;(设置图片填充时,可能会影响下钻显示效果)③地图样式#
该部分功能与默认地图样式相似,可通过新建项目,对地图组件点击穿透的小地图进行个性化样式设置;④气泡#
气泡主要用于突出显示地图组件内的省市数据,组件支持灵活调整气泡大小、颜色、填充图及动画功能和周期,修改文本和数值样式,同时设置文本布局方式与间距。样式:根据类别不同,设置气泡不同的样式,支持设置填充色或上传图片;
文本样式:设置气泡上显示的文字格式,包括字号、颜色、阴影等;
数值:设置气泡上显示的数值格式,包括是否显示、文本样式、数值格式等;
文本布局方式:调整文本行数,例如文字和数值是否在同一行;
文本间距:调整文本间的间距,例如文本和数值的间距;
⑤卡片#
卡片主要用于悬浮展示各组省市的明细数据,只有在数据配置处配置了相应卡片字段,此处才会带出数值;卡片与气泡距离:如果设置了气泡和卡片,可用此处调整二者距离;
文本样式:卡片上展示多少行文字,由项目控制。每个项目展示一个字段的值,设置多少个卡片字段,此处则会有多少个项目。(a)项目行距离:每行文字的行距;
(b)项目设置:设置字段名称(此处字段名称非用户导入组件的数据表字段名,而是组件数据配置出字段选择处规定死的字段名),并对文本样式进行设置。
设置图片:如果为组件导入了图片数据,此处可设置是否显示图片,以及图片大小、图文间距;
显示方式:可设置卡片的显示方式,支持自动轮播、hover显示、点击显示三种方式;
卡片轮播时长:如果设置卡片显示方式为自动轮播,此处设置轮播时长,即每张卡片展示的时间。
⑥飞线#
飞线设置的是省市间的连线及流动方向。勾选“是否显示”后,可以对飞线的速率、颜色、粗细等格式进行配置;⑦渐变填充和区间填充#
这两类填充功能会突出显示省市数据对应的地图区域,如果和气泡、卡片搭配使用会影响可视化效果,因此不推荐同时配置。组件支持对填充颜色、渐变梯度等内容进行设置。⑧数据配置#
省份名称用于设置突出显示的地市名称,可配置气泡显示;
经纬度和目标经纬度用于设置地市位置和飞线方向,目标经纬度可不配置;
卡片图片、卡片字段和卡片备选字段用于配置卡片显示内容及卡片显示图片;
类别则对应了气泡的项目,可根据不同类别进行可视化区分。
使用2D中国地图组件展 示某企业下属子公司的情况。
1
操作一
进入数据网盘,依次点击“我的数据”“新增数据源”,上传附件“2D中国地图演示数据”。
2
操作二
进入可视化中心的大屏模块,依次点击“数据管理”“API”“创建API”“数据库数据”,创建API。
3
操作三
输入自定义的API名称和地址,请求方式选择“POST”,返回类型选择“JSON”,点击“下一步”。
4
操作四
点击第二步页面左上方“上传的文件”输入框,选择“智算网盘”,在下方列表中选择需要的数据表,并勾选全部字段,点击“添加带别名SQL”,生成SQL语句,点击“下一步”。
5
操作五
点击“开始测试”,在右侧窗口查看返回数据,返回数据无异常,即可点击“完成”保存API数据。
6
操作六
复制API地址,点击“大屏管理”,返回创建大屏页面。
7
操作七
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的地图组件,将2D中国地图拖拽到大屏上。
8
操作八
选中地图组件,在组件配置区点击“数据配置”,选择“API”,粘贴API地址,勾选“定时更新”,然后设定字段选择:省份名称选择“企业名称”,经度选择“经度范围”,纬度选择“维度范围”,目标经度、目标纬度不选,值选择为“本年营业额”,卡片图片不选,卡片字段1选择“公司人数”,卡片字段2选择“公司地址”,卡片字段3选择“注册资本”,类别选择“公司类别”,其他备选字段不选。
9
操作九
打开气泡,勾选“是否显示”,展开项目1,输入类别名称为“参股子公司”,项目2类别名称输入为“控股子公司”,项目3类别名称输入为“全资子公司”。调整文本和数值样式,并将数值缩写调整为“中国缩写(万/亿)”,文本布局方式选择“多行”。
10
操作十
打开卡片,调整卡片大小、文本样式,将卡片标题名称修改为“员工人数,分公司地址,注册资本”设置为轮播,轮播时间间隔为5s。
(10)TAB外链#
TAB是指信息展示控件,TAB外链可以通过设置多个TAB来轮播显示多个组件,将组件当做一个页面,从而展示更多信息。用户可以利用TAB外链将数张不同的大屏放在同一张大屏内,以容纳更多的可视化图表。TAB外链不仅可以连接平台内部制作的大屏,还可以输入外部链接和第三方网址。TAB大屏、iframe组件配置逻辑与TAB外链相同。①全局设置#
此处可配置多TAB 外链时是否自动轮播,是否开启翻页效果(左右翻页),是否tab按顺序自动加载;②TAB区域设置#
可以设置TAB选项的位置和样式,包括设置区域位置,背景填充,对齐方式,多级TAB时的布局方式、多选项超出显示范围是否轮播以及选项间距等;③内容区域设置#
④TAB列表#
一个TAB可连接一个大屏或组件,TAB外链要连接多少个大屏,就需要添加多少个项目,按照项目增加TAB。配置TAB列表时,可灵活设置TAB显示的名称、连接组件/大屏的地址、TAB大小和圆角值、页面锚点、轮播时长等等;⑤TAB样式和二级TAB样式#
可以设置选中TAB和非选中TAB的样式,让选中的颜色和不选中的颜色设置不一致,突出显示被选中的TAB名称。利用模板新增两个大屏,并利用TAB外链将这两张大屏放在同一张大屏内。
1
操作一
进入大屏,点击“新建大屏”,选择有组件的模板,创建两个大屏。
2
操作二
创建完成后,返回大屏管理页面,找到新建大屏,展开管理菜单,依次点击“链接分享”“无口令分享”“复制链接”,复制两个大屏链接。
3
操作三
点击“新建大屏”,选择通用模板创建大屏,点击左侧组件区的高级组件,将TAB外链拖拽到大屏上。
4
操作四
点击全局设置,勾选“是否自动轮播”,“是否开启翻页效果”,“tab按顺序自动加载”。
6
操作六
点击TAB列表,分别打开项目1和项目2,粘贴刚才新建的两个大屏分享链接,并修改TAB名称。
7
操作七
点击TAB样式,对TAB被选中和未选中时的样式进行调整。
基本组件#
基本组件包含:基本柱图、彩色柱图、基本条图、彩色条图、堆积条图、斑马柱图、正负条图、对比条图、双轴图、折线图、带标线折线图、散点图、气泡图、单轴气泡图、填充气泡图、进度条图、进度环图、水球图、环图、饼图、玫瑰图、玉玦图、雷达图、仪表盘、词云、立方体、3D圆柱。(1)柱状图组件#
柱状图组件一共有四类,分别是基本柱图、彩色柱图、堆积柱图和斑马柱图。①基本柱图&彩色柱图