维图可视化工具用户手册

维图可视化工具

用户手册

天目数据

2020年10月

目录

1、维图可视化工具简介..........................................错误!未定义书签。

2、系统使用基本要求............................................错误!未定义书签。

3、系统整体页面介绍............................................错误!未定义书签。

3.1、维图大屏管理中心.......................................错误!未定义书签。

3.2、维图可视化画板.........................................错误!未定义书签。

4、系统常用功能................................................错误!未定义书签。

4.1、系统登录...............................................错误!未定义书签。

4.2、维图大屏管理中心.......................................错误!未定义书签。

4.3、维图可视化画板.........................................错误!未定义书签。

4.4、系统注销...............................................错误!未定义书签。

5、业务功能操作说明............................................错误!未定义书签。

5.1、功能清单...............................................错误!未定义书签。

5.2、功能说明...............................................错误!未定义书签。

521、可视化大屏管理...................................错误!未定义书签。

根据模板创建可视化项目......................错误!未定义书签。

编辑可视化项目..............................错误!未定义书签。

重命名可视化项目............................错误!未定义书签。

删除可视化项目..............................错误!未定义书签。

5.2.2、画布管理........................................错误!未定义书签。

图层管理...................................................16

组件列表....................................错误!未定义书签。

工具栏......................................错误!未定义书签。

页面设置....................................错误!未定义书签。

523、数据源管理........................................错误!未定义书签。

添加MySQL数据源..........................错误!未定义书签。

添加Oracle数据源............................错误!未定义书签。

添加SQLServer数据源.......................错误!未定义书签。

添加CSV文件...............................错误!未定义书签。

添力口Excel文件..............................................31

添加API数据源..............................错误!未定义书签。

修改己添加数据源............................错误!未定义书签。

删除已添加数据源............................错误!未定义书签。

5.23.9数据源映射关系配置.........................错误!未定义书签。

5.2.4、组件管理.........................................错误!未定义书签。

添加组件....................................错误!未定义书签。

删除组件....................................错误!未定义书签。

收藏组件....................................错误!未定义书签。

复制组件....................................错误!未定义书签。

添加组件数据源..............................错误!未定义书签。

5.2.5、组件指南.........................................错误!未定义书签。

图表.........................................错误!未定义书签。

地图........................................错误!未定义书签。

场景........................................错误!未定义书签。

5.254图谱错误!未定义书签。

指标错误!未定义书签。

文本错误!未定义书签。

媒体错误!未定义书签。

文档信息

编写者编写日期

审核者审核日期

批准人批准日期

・历史变更信息

版本号日期变更描述批准

1、维图可视化工具简介

相比于传统图表与数据仪表盘，如今的数据可视化致力于用更生动、友好的

形式，即时呈现隐藏在瞬息万变且庞杂数据背后的业务洞察。无论在零售、物流、

电力、水利、环保、还是交通领域，通过交互式实时数据可视化应用来帮助业务

人员发现并诊断业务问题，越来越成为大数据解决方案中不可或缺的一环。

维图可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。帮助非

专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，满足您会议展

览、业务监控、风险预警、地理信息分析等多种业务的展示需求。

2、系统使用基本要求

本系统操作并不复杂，只要能使用和掌握基本的windows操作技能，即可灵

活的应用这套软件。由于本系统采用B/S模式，以GoogleChrome浏览器（版本

必须在63.0.3239.132（含）以上）客户端使用工具，因此需要使用者具备基本

的网上操作技能。

3、系统整体页面介绍

系统整体布局划分为维图大屏管理中心、以及维图可视化画板区域。

3.1、维图大屏管理中心

U1缰图大屏・理中心B可设化*鹿通用时能

大摩名称：南除人大

+

点击创建大展

3.2、维图可视化画板

4、系统常用功能

4.1、系统登录

目前系统只支持以下浏览器:

1、GoogleChrome浏览器，版本必须在63.0.3239.132（含）以上;

计算机需要安装有以上版本的浏览器，在浏览器界面下键入系统地址:

用户输入账号名、密码、手机号、验证码注册账号。

输入账号名与密码登录系统。

点击登录进入维图大屏管理中心

|B,缰图大屏管理中心,,可及化.建试用时3

大屏名称：慵■人大孱一弊|一.：.■!|

+

点击创建大展

4.2、维图大屏管理中心

B缰由大屏・里中心

添加可视化大屏X

xnaw：|■■入/mgr|匚

大UI■人大♦名郦

鱼注：Sit入务注

+

点击创超大质

在可视化项目页面，您可以完成以下操作：

1、查看所有已经创建好的可视化应用，不同版本，创建可视化的数量会不同。

2、按名称搜索可视化应用项目。

5缰册大屏・理中心0可横依・磔am»?M

大屏名H：]■,入Kuga

+QffKutaa

+

点击创收大屏

单击菜单栏中的项目，可切换至对应页面，管理可视化应用和数据源。

5缰用大屏■理中心

BIAS美SI7B««W：|”人0富名嫌

在可视化数据源页面，您可以完成以下操作:

1、添加数据源

2、删除数据源

3、导出数据源

4、搜索数据源

4.3、维图可视化画板

境阴故・可视化平台£□Q1920x1060v

大解设宣

大国标题：

天白网*“废可丹化率自

KBBM：®OFir

1M当前曾面：

es

地明>VITO

nk

S9

西景堰充类型：

nta

«■

*ma色：

向

x色风格：|^H

AM*

画

文本

左部为组件栏，右部为设置栏，上部为操作栏，中部为画板区域。

4.4、系统注销

B靖BB大屏"理中心

1个人中<*

大・名球：［・・人大.名B||•■■■

+

点击创娥大牌

系统主页面中右上角点击''退出登录"按钮

维图数据可视化平台

CopyrpntO2016-2020lm«|AURight*Reserved

点击后，退回到系统登录界面，完成“注销”操作

5、业务功能操作说明

5.1、功能清单

一级功能二级功能

可视化大屏管理-

图层管理

组件列表

画布管理

工具栏

页面设置

添加MySQL数据源

添加Oracle数据源

数据源管理

添加SQLServer数据源

添加CSV文件

添加Excel文件

数据源管理添加API数据源

修改已添加数据源

删除已添加数据源

数据源映射关系配置

添加组件

删除组件

组件管理收藏组件

复制组件

添加组件数据源

图表

地图

容器

组件指南

场景

图谱

指标

5.2、功能说明

5.2.1、可视化大屏管理

使用维图可视化平台创建出的基于数据生成的看板，即为可视化应用项目。维图

可视化平台能将数据由单一的数字转化为各种动态的可视化图表，从而实时地将

数据展示给用户。

根据模板创建可视化项目

1.业务描述

维图可视化平台提供丰富的行业模板，用户可以根据需要选择对应的行业模

板一键生产酷炫大屏。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化项目页面，单击点击创建空白画板

在可视化项目页面，可以查看所创建的所有可视化应用，以及还可以创建的

可视化应用的数量。

3）在创建数据大屏对话框中，输入数据大屏名称，单击创建。

创建成功后，系统会跳转到可视化应用编辑器页面。

添加可视化项目

项目名称：谪输入项目名称

雷注：请输入备注

取消

4）在模板列表中，选择一个模版，单击确定

点击确定后即可生产模板大屏。

编辑可视化项目

1.业务描述

用户根据需要对可视化项目进行编辑。帮助用户快速修改可视化应用的内容

和配置。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化项目页面中，选择一个可视化应用，单击设计图标。

test未发布

2020-10-2110:09:08

设计

3)在可视化项目编辑页面，修改组件的布局和配置，或者添加、删除组件,

完成可视化应用的编辑。编辑完成后，可预览或发布可视化应用，查看

效果。

重命名可视化项目

1.业务描述

用户根据需要对可视化项目进行重命名，帮助用户快速修改可视化应用的名

称，便于搜索与管理。

2.操作说明

1)登录维图大屏管理中心。

2)在可视化项目页面中，选择一个可视化应用，单击编辑图标，进入编辑

状态，输入新的名称。

test未发布

2020-10-2110:09:08

设计

修改可视化项目X

项目名称：test

预览桎接：预览链接

备注：谪输入备注

确定I取消

3）单击确定键，即可完成可视化应用名称的修改。

可视化项目名称修改成功后，用户就可以完成使用名称搜索可视化应用等操

作。

5.2.1.4删除可视化项目

1.业务描述

用户根据需要删除可视化项目，及时删除不需要的可视化应用，可以释放可视化

应用的空间与配额。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化项目页面中，选择一个可视化应用，单击删除图标，删除当前

应用。

test未发布

2020-10-2110:09:08

5.2.2、画布管理

了解画布编辑器的结构和功能，帮助用户快速使用画布编辑器开发可视化应用项

目。进入到画布编辑页面后，用户可以使用系统提供的画布配置和组件配置工具,

管理画布和各个组件。

图层管理

1.业务描述

在图层列表中，可以看到画布中各个组件的图层位置，您可以根据可视化应

用需要，手动调整每个组件图层的上下位置关系。

2.操作说明

在大屏中，单击选中一个，拖拽移动组件的图层位置。

已添加组件:

大屏

舞T徵蚊字-丽耐

地图T普通文字-项目价值指标

®吆折线图-

场景O环形图-

Q

§

数据T普通文字-库存指标

组件列表

在组件列表中，可以查看各种类型的组件，可以将组件拖动到画布中进行配

置，完成可视化应用项目的开发。

1）组件拖拽

1.业务描述

通过拖拽组件，帮助用户更加方便快捷地在可视化应用中对组件进行布局。

2.操作说明

选中一个组件，按住鼠标左键进行拖拽。

爆图数据可视化平台Q□□1220x1080|admin.

属慢设置

IS裳标底

招件。量：

色

・

纲件尺寸：

XS-300KS-2SO

n«*»：9i3BS

示例散得■•

smtoa：eanTxj

排序方式：不建序

殴・展示数■供计7家）

MV

XMAS：XI

X・■位：

□开6X.文字«却

2）组件缩放

1）业务描述

通过缩放组件，帮助用户更加方便快捷地在可视化应用中对组件进行布局。

2）操作说明

单选后，将鼠标移动到组件的边界框线附近。出现缩放图标后，按住鼠标左

键拖拽。

工具栏

1）模板

1.业务描述

用户根据自身需要，选择各种行业模板。

2.操作说明

1）点击工具栏上模板按钮。

器▼圜回N|只admin▼

2）选择模板后点击确定生产对应模板大屏。

维图H智可视化平台□□1S20X10W

2）导出模板

1.业务描述

通过导出模板功能，将画板内容保存为模板保存在本地，方便下次使用。

2.操作说明

点击导出模板按钮，即可生成模板文件并下载到本地。

器▼圜向《|Aadmin▼

导入横板

导出模板

3）导入模板

1.业务描述

通过导出模板功能，将画板内容保存为模板保存在本地，方便下次使用。

2.操作说明

点击导出模板按钮，即可生成模板文件并下载到本地。

4）保存

1.业务描述

通过保存功能，实时保存已编辑好的画板内容。

2.操作说明

点击保存按钮，即可保存画板内容。

圜回口只admin▼

5）预览

1.业务描述

通过预览功能，及时查看开发完成的可视化应用效果，便于可视化应用的修

改和完善。

2.操作说明

点击预览图标，即可跳转至预览页面

▼O回MI只admin▼

6）发布

1.业务描述

通过发布功能，可以将已经开发完成的可视化项目发布到线上环境，供其他人员

在线观看。

2.操作说明

点击发布图标，立即生成对应大屏分享链接。

▼圜回向I只admin▼

链接地址X

:2020A<ito/index.html?itemld=98&publisf'

直接跳转复制

7）设置屏幕分辨率

1.业务描述

根据不同的需要设置对应大屏尺寸

2.操作说明

点击不同的设备，选择不同的分辨率尺寸，单位为px。

□Q1920X1080/\

1920x1080

1600X900

1280X720

3360X1200

8）返回大屏管理中心

1.业务描述

从维图可视化画板返回至大屏管理中心，方便对项目进行管理。

2.操作说明

点击用户名旁箭头，弹出大屏管理中心按钮。点击按钮即可返回大屏管理中

心。

■■▼圜回/1只admin▼

1500|1600)1700hl项目管理中心

11

5.2.2.4页面设置

1）背景颜色

1.业务描述

通过设置背景颜色，改变整个画板背景色

2.操作说明

1）背景填充类型选择颜色填充

2）点击背景颜色条

3）通过色板选择改变背景色

4）通过RGB颜色值或16进制颜色吗改变背景色

5）通过系统推荐色改变背景色

背景填充类型:

颜色填充

背景颜色：

I

清空确定

2）背景图

业务描述

通过设置背景图片，修改整个页面的背景图

操作说明

1）背景填充类型选择图片填充

背景填充类型:

图片填充人

颜色填充

图片填充

2）点击点击更换按钮上传图片

背景填充类型:

图片填充

背景图片：点击更换

3）上传封面图片

1、业务描述

可通过获取截图或上传本地图片的方式设置大屏封面图片。

2、操作说明

1、选择【封面图片】-【截取封面】或选择【封面图片】-【上传封面】

2、保存项目即可保存封面

Q维图败■可视化平台=QQ1920xWHO|只Em.

大屏设置

天白依・图］视化早自

目00

RM

MISM：

埸候当用的■:

曲

vrro

§

SR

USHI充类型：

・色靖亮

K*na：

自

・色风格：

»«

闽

文本

5.2.3、数据源管理

用户可选择合适的数据源进行大屏项目的开发。进入维图大屏管理中心，单击可

视化数据，可以对接入的数据源进行统一管理。

添力口MySQL数据源

1.业务描述

通过添加MySQL数据库的数据源，用户可以使用MySQL数据库作为组件的数

据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）从类型列表中，选择MySQL。

4）填写数据库信息。

参数说明

数据名称数据源的显示名称，可以自由命名。

账号登录数据库的用户名。

密码登录数据库的密码。

链接地址连接数据库的地址。

sql语句数据库查询语句。

数据展示返回数据展示区。

映射关系字段映射表

5）数据库信息填写完成后，点击测试连接按钮，验证数据库是否能连通正常,

点击查询按钮获取返回数据，点击确定按钮完成添加。

5.23.2添加Oracle数据源

1.业务描述

通过添加Oracle数据库的数据源，用户可以使用Oracle数据库作为组件的数据

源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）从类型列表中，选择Oracle。

4）填写数据库信息。

添加可视假婚批息

cxade”

喀

/

/

/

转蝴触

X*£3B

s蝙Aft谢字段砌

|M||的迎|：.定|取消|

参数说明

数据名称数据源的显示名称，可以自由命名。

账号登录数据库的用户名。

密码登录数据库的密码。

链接地址连接数据库的地址。

sql语句数据库查询语句。

数据展示返回数据展示区。

映射关系字段映射表

5）数据库信息填写完成后，点击测试连接按钮，验证数据库是否能连通正常，

点击查询按钮获取返回数据，点击确定按钮完成添加。

5.2.33添加SQLServer数据源

I.业务描述

通过添加SQLServer数据库的数据源，用户可以使用SQLServer数据库作为组件

的数据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）从类型列表中，选择SQLServer。

4）填写数据库信息。

添加可视化数1蹒信息

83^!^sqkefverv

螭^fiA螭

/

sq|gQSfiAsqf^)

/

£»S^C®^SM

/

方喇触

xfiAuar^5^R

y^ES

s群

|—||海成睡|[•至|取消|

参数说明

数据名称数据源的显示名称，可以自由命名。

账号登录数据库的用户名。

密码登录数据库的密码。

链接地址连接数据库的地址。

sql语句数据库查询语句。

数据展示返回数据展示区。

映射关系字段映射表

5）数据库信息填写完成后，点击测试连接按钮，验证数据库是否能连通正常,

点击查询按钮获取返回数据，点击确定按钮完成添加。

5.2.3.4添力口CSV文件

1.业务描述

通过添加CSV文件的数据源，用可以使用CSV文件作为组件的数据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）从类型列表中，选择CSV。

4）上传csv文件

参数说明

数据名称数据源的显示名称，可以自由命名。

上传文件上传CSV文件

数据展示返回数据展示区。

映射关系字段映射表

5）文件上传完成后，点击查询按钮获取返回数据，点击确定按钮完成添加。

添力口Excel文件

1.业务描述

通过添加Excel文件的数据源，用可以使用Excel文件作为组件的数据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）从类型列表中，选择Excel。

4）上传Excel文件

添加可视传睡源信息X

excelV

|MO?”|

R.fLZ传不塞E1

/

蝴

X*2®

y

s丽

;I取消I

参数说明

数据名称数据源的显示名称，可以自由命名。

上传文件上传Excel文件

数据展示返回数据展示区。

映射关系字段映射表

5）文件上传完成后，点击查询按钮获取返回数据，点击确定按钮完成添加。

5.23.6添加API数据源

1.业务描述

通过添加API数据源，用户可以使用API作为组件的数据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）从类型列表中，选择API。

4）填写API信息。

参数说明

数据名称数据源的显示名称，可以自由命名。

链接地址连接数据库的地址。

请求方式支持Get、Post请求

响应格式支持JSON、XML格式

请求头根据接口需要添加请求头

数据展示返回数据展示区。

映射关系字段映射表

5)API信息填写完成后，点击查询按钮获取返回数据，点击确定按钮完成添加。

5.23.7修改已添加数据源

1.业务描述

用户根据需要，修改已添加数据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，选择一条已添加数据，单击修改按钮。

[mysql][T^sql-test][^20-09-171£，Y22]

3）在弹出框中对该数据源进行修改。

修改可祝化被掳灯（89

naiaa*wn

naaw•wi-te*

BW-mi

••……

ubc<nn*/n92_i4aQ2a

*<»m

flST

平AtMMICS

««6K

V»CK

*00

ir^i

4）信息修改完成后，点击查询按钮获取返回数据，点击确定按钮完成添加。

5.23.8删除已添加数据源

1.业务描述

用户根据需要，修改已添加数据源。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，选择一条已添加数据，单击删除按钮。

[mysql]。18乜22]0.

3）在弹出框中点击确定，即可删除该条数据。

壁土

育口Ay

o是否确认副除谚

I取消I确定

5.23.9数据源映射关系配置

1.业务描述

以直方图组件为例，使用映射关系配置，筛选出需要展示的数据。

2.操作说明

1）登录维图大屏管理中心。

2）在可视化数据页面中，单击添加数据。

3）在弹窗中，在数据源类型列表中选择APL并在数据源编辑框内填写源数据

的URL网址链接。（以API数据源为例，其他数据源也可使用同样方法配置）

4）输入headers（本次数据请求为跨域模式，需填写headers,可根据需要填写）。

5）单击查询，查看返回结果。

编辑数据源X

数据源类型：API〜

请求方式：getv

数据源名称：API-GET

MCJ9.5WWC8SESs9hpLlyQjgh8K2KIJGW4Y«h6

AHPiABTUbj_qvnj4rad63ToNlbR6j