¶ 快速入门
¶ 制作可视化应用场景
¶ 概述
本章节以搭建全国网络流量分析场景为例，为您演示如何使用DataColour DVP空白模板来开发可视化应用项目。
制作一个DataColour可视化场景，您需要完成以下几个步骤。
- 准备工作。
- 创建可视化场景。
- 添加并配置可视化组件。
- 创建模型及数据集。
- 数据集与可视化组件绑定。
- 保存、发布、预览可视化场景。
¶ 准备工作
在创建可视化应用场景前，您需要准备应用场景案例使用的图片和在线或者离线数据。
本示例中使用的静态数据，如果您使用的是其他数据源，在创建可视化场景前，需要先添加数据源、数据业务模型、数据集。
¶ 创建可视化场景
本文档为您介绍创建可视化场景的方法。
操作步骤：
-
登录可视化平台
-
在我的可视化页面中，单击新建项目，可视化平台资源是以项目为单体隔离。
-
选择新建项目，并单击创建可视化场景。
-
在创建可视化场景对话框中，输入可视化场景名称、分类名称。
-
单击“确定”按钮，
可视化场景创建成功后会跳转到场景编辑器页面。
¶ 添加并配置可视化组件
本文档为您介绍在空白画布中添加并配置可视化场景组件的方法。
¶ 添加图片组件
可视化场景设置背景效果
- 登录可视化平台。
- 在我的可视化页面中，打开一个项目，选择新建立可视化场景，单击即进入场景编辑页面，设计好场景页面像素及场景背景，本场景为1920x1080(单位：像素)。
- 设置顶部背景，在画布左侧部件列表栏，单击图片素材组件 ，将基础平面地图组件添加到画布中。
- 单击画布中的图片组件，点击工具栏左上角“属性”窗口，显示图片相关属性。
- 配置场景顶部效果，上传效果图、设置位置、大小。
¶ 添加场景顶部标题
- 在部件列表，单击lable标签组件，显示在画布中。
- 将lable标签组件，拖放到场景顶部中间位置,设置顶部标题的内容、字体大小、颜色等属性。
¶ 设计内容区域边界
内容区域可以使用图片或者div片段实现，本案例采用div+css实现边框效果。
- 在部件列表，单击Html代码片段组件，显示在画布中。
- 编写div代码\样式片段
HTML片段：
样式片段：<div class="frame-pannel-border"></div>.frame-pannel-border { width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #032C33; } - 参照效果图，划分内容布局
在工具栏上，点击克隆按钮，复制区域边框组件。
依据效果图，点击工具栏锁定按钮，锁定场景划分的区域
¶ 配置各区域副标题
- 在部件列表，单击图片素材、lable标签组件，显示在画布中，并配置标题图标、长度、字体大小。
- 在画布中,键盘按Ctrl+鼠标左键选中图片素材与lable标签组件，再单击工具栏克隆按钮，复制三份在画布中。
- 分别固定各区域标题位置及填写标题内容
¶ 添加地图组件
- 在部件列表，单击Echarts地图组件，显示在画布中。
- 在画布中，拖拽或者属性窗口来调整地图的尺寸、位置。
- 参照效果图调整Echarts地图Option的配置，场景设计器提供JSON编辑器或者属性窗口来设置，本场景地图以JSON编辑器方式配置,把提前准备好的地图Option配置直接覆盖之前的配置。
- 提交后地图效果，本场景地图各省流量分布数据直接在Option里配置
¶ 添加环形饼图组件
- 在部件列表，单击饼图系列的双环图组件，显示在画布中。
- 调整环形图大小，设置序列图形半径即可
- 配置图形颜色
- 隐藏图形标签文本显示
- 在画布中，选上已配置好的双环图，然后在工具栏上，点击克隆按钮，复制一个双环图组件，拖拽克隆的双环组件放到合适位置。
¶ 添加表格组件
- 在部件列表，单击饼图系列的双环图组件，显示在画布中。
- 调整表格的定位、尺寸以及隐藏表格记录总数
- 在画布中，选中表格组件，设置表头、数据行背景、字体等属性
¶ 创建模型及数据集
¶ 创建模型
创建省间流量分企业占比、各省份流量占比TOP5、各省流量列表三个模型。
- 创建省间流量分企业占比模型
- 创建各省份流量占比TOP5模型
- 创建各省流量列表模型
¶ 创建数据集
用不同静态JSON数据来分别创建省间流量分企业占比、各省份流量占比TOP5、各省流量列表三个数据集，本场景创建的数据源类型为静态JSON数据，实际项目中可以选择使用其它数据源类型。
- 创建省间流量分企业占比数据集
在模型管列表中，找到省间流量分企业占比模型，在操作列上，单击新增数据集，即可打开创建数据集窗口
- 创建各省份流量占比TOP5数据集
在模型管列表中，找到各省份流量占比TOP5模型，在操作列上，单击新增数据集，即可打开创建数据集窗口
- 创建各省流量列表数据集
在模型管列表中，找到各省流量列表模型，在操作列上，单击新增数据集，即可打开创建数据集窗口
¶ 数据集与可视化组件绑定
¶ 省间流量分企业占比
- 编辑可视化场景，在场景画布中选择省间流量分企业占比对应的可视化组件，再单击工具左上角数据属性窗口
- 在数据属性窗口中，为此场景选择需要的数据集
- 在页面归属的数据集中，选择当前可视化组件需要的数据集，对维度与度量列进行映射绑定，点击保存绑定即可
¶ 各省份流量占比TOP5
各省份流量占比TOP5数据绑定操作步骤与省间流量分企业占比数据绑定一样，此组件需要的数据集已经选好在场景归属的数据集列表中，直接选择数据集对维度与度量列进行映射绑定，点击保存绑定即可
¶ 各省份流量占比TOP5
各省流量列表数据绑定操作步骤与省间流量分企业占比数据绑定一样，此组件需要的数据集已经选好在场景归属的数据集列表中，直接选择数据集对维度与度量列进行映射绑定，表格列展示的顺序与选择数据列的顺序一致，点击保存绑定即可
¶ 保存、发布、预览可视化场景
可视化场景设计器提供两种方式保存场景操作，其中保存按钮为场景临时保存并不更新终端用户访问的场景，发布按钮将最新的场景展示给终端用户。
- 保存后的场景缩略图，左上角出现一个告警图标
- 发布后的场景缩略图
- 浏览场景
¶ 项目管理
¶ 项目管理概述
可视化平台以项目粒度方式组织模型、数据集与分析场景等资源管理，以科学方式的管理企业各项目。支持项目导入导出功能，方便各个项目资源更新，并保证了线下、线上安全实施及运行。
- 进入项目管理页面
登录系统后，直接进入项目管理页面
- 新建项目
在项目管理页面，单击工作区左上角的“+新建项目”，然后弹出窗体填写项目基本信息。
- 修改项目基本信息
鼠标移到需要编辑的项目上，单击编辑按钮，弹出项目修改窗
- 填写完成后，单击提交按钮
在项目管理列表中，显示新增的项目。
¶ 项目导入导出
- 导入\导出功能
数据可视化平台在生产、测试环境都是独立环境，考虑安全，可以先在测试环境下针对场景、模型、数据源、数据集、变量等数据的修改,然后测试环境中把项目导出，在生产环境下，执行项目导入即可。
¶ 业务管理
¶ 业务管理概述
根据DataColour可视化项目的管理理念，业务梳理是可视化项目的第一步。在与客户有效沟通后，可以通过DataColourDVP的业务管理功能来协助您进行业务建模并绘制业务草图，创建的业务模型可以直接关联至数据模型，再结合后续的数据集的制定，以完成整个模型的制定过程。
¶ 业务建模
可视化平台提供了便捷的业务建模功能，
- 左侧的工具栏区域提供了新增模型、视图缩放以及图片下载等常规操作按钮。
- 点击画布区域的模型图表，会在图表的右侧出现当前模型的管理按钮，包括做删除模型、新增维度列、新增度量列、彩色化模型以及保存模型等功能。
- 双击模型图表的文字区域，可以就地编辑模型的名称、编码、维度列名称以及度量列名称。
- 修改过的模型未保存状态，会在模型图表的右上角有红色的叹号提示。
¶ 业务草图
可视化平台同时提供了业务草图功能，让您可以快速绘制可视化大屏的信息架构与用户交流
¶ 数据源管理
¶ 数据源管理概述
目前DataColourDVP支持接入JSON静态数据、FILE数据源、JDBC数据源 和 API接口服务、SCRIPT数据源五类数据源。
- JSON静态数据：手动录入一些静态的数据建立数据集,通过数据集绑定到图表上，主要用来测试、演示、应急的场合。
- FILE数据源：上传Excel/CSV文件建立数据模型和数据集，然后对其中的数据进行可视化展现。
- JDBC数据源：和您的数据库之间建立连接，通过建立数据模型和数据集，通过数据集可将数据库中的数据绑定到可视化图表与其它可视化组件上进行可视化分析。支持MySQL、SQL Server、PostgreSQL、Oracle、Redis、MongoDB数据库类型。可视化平台支持JDBC数据源适配连接扩展，可通过数据字典功能添加JDBC数据源配置，能方便扩展多种数据源的适配。
- API接口服务：使用API接口的方式建立数据集，通过数据集将数据绑定到可视化图表与其它可视化组件。
- SCRIPT数据源:支持使用JavaScript或Python脚本抓取的处理的数据，将数据绑定到可视化图表与其它可视化组件。
¶ 添加JDBC数据源
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单，单击数据源管理菜单，进入数据源管理页面。
- 单击【新建】，默认创建JDBC数据源，在弹出框内选择需要新建的数据源驱动，添加数据源时，填写JDBC数据源名称，选择好JDBC数据源驱动并提供连接数据库必要的信息（JDBC源地址、JDBC用户名、JDBC密码）。
数据库信息填写完成后，单击测试按钮进行测试连接，验证数据库是否能够连通正常。 - 测试连接成功后，单击提交，完成数据源添加。
新添加的数据源会自动显示在数据源列表中。
¶ 添加FILE数据源
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单，单击数据源管理菜单，进入数据源管理页面。
- 在数据源列表右上角，选择FILE数据源,单击【新建】，在弹出框内填写FILE数据源名称，选择文件源并上传至平台文件服务器。
文件上传成功后，弹出页面下面将增加已上传文件提示，并且提供下载。
- 文件确认上传成功，单击提交，完成FILE数据源添加。
新添加的数据源会自动显示在FILE数据源列表中。
¶ API接口服务
DataColourDVP上的图表及其它可视化组件是经过与数据集进行绑定生效，数据集的数据可以由用户通过 API 的形式来提供。可视化平台会在后端通过 POST/GET的方式访问用户的API接口服务，并在请求的body中带上过滤条件、下钻参数、联动参数等当前图表推送数据时需要的信息，同时针对参数、请求头、请求参数、请求地址的值可通过变量替换，格式为${xxx}，请求内容支持Velocity模板引擎替换变量。
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型列表上，找到对应数据模型项上操作列，单击新建数据集，将弹出新建数据集页面，然后选择数据源类型为API接口服务，填写必要的API基础信息（请求地址、请求方式【post/get】、请求数据）
- 请求数据需要根据提供的API请求要求分别填写请求头、请求参数、请求body
- 请求头
- 请求参数
- 请求Body，直接用JSON数据格式编写键值参数
- API接口服务必要信息填写完成后，在数据转换功能右下角，单击调用按钮，将弹出数据预览页面，同时右上角将显示接口调用的日志信息。
¶ JSON静态数据
DataColourDVP上的图表及其它可视化组件是经过与数据集进行绑定生效，数据集的数据可以由JSON静态数据形式来提供。针对参数的值可通过变量替换，格式为${xxx}，请求内容支持Velocity模板引擎替换变量。使用静态 JSON静态数据的方式绑定图表的数据，这种方式可以方便您进行系统演示、调试和测试，在不需要连接数据源的情况，通过手动录入数据的方式就可以来快速搭建数据可视化效果。
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型列表上，找到对应数据模型项上操作列，单击新建数据集，将弹出新建数据集页面，然后选择数据源类型为JSON静态数据。
- 编辑JSON静态业务展示数据
- JSON静态数据编辑完成后，在关联变量功能右下角，单击解析按钮，将弹出数据预览页面，同时右上角将显示接口调用的日志信息。
¶ SCRIPT数据源
SCRIPT数据源当前支持JavaScrip、Python两种脚本方式处理数据源，DataColourDVP上的图表及其它可视化组件是经过与数据集进行绑定生效，数据集的数据可以由SCIIPT数据源形式来提供。针对参数的值可通过变量替换，格式为${xxx}，请求内容支持Velocity模板引擎替换变量。
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型列表上，找到对应数据模型项上操作列，单击新建数据集，将弹出新建数据集页面，然后选择数据源类型为SCRIPT数据源。
- 用户JavaScript/Python处理业务数据
- 用JavaScript/Python脚本处理数据完成后，在关联变量功能右下角，单击调用按钮，将弹出数据预览页面，同时右上角将显示接口调用的日志信息。
from cn.hutool.http import HttpUtil
from cn.hutool.json import JSONUtil
def parse():
response = HttpUtil.get("http://ip.jsontest.com/")
json = JSONUtil.parseObj(response)
return [{"a": 1, "b": json.get("ip") }]
¶ 数据模型管理
数据模型是定义业务分析的维度及度量结构，用于可视化组件与数据集做绑定的桥梁，模型与数据集的关系是一对多，一个模型下面可以挂多个数据集。
¶ 新建数据模型
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型列表左上角，点击标准创建按钮，弹出模型创建页面，填写必要的模型基础信息（模型编码、模型名称、模型描述）以及新建模型列。
- 新建模型列
模型列分为两种类型，分别为维度与度量。维度：分析数据时的粒度，度量：指标的聚合汇总值，聚合汇总的方式，如求和、均值、最大值、最小值。
在模型列功能项中，点击新增模型列按钮，创建模型列。
维度、度量通过在创建模型列时，选择列类型来区分，确定列类型，单击保存。
- 数据模型必要信息及模型列填写完成后，在弹出页面右下角，单击提交按钮，弹出页面将关闭，在数据模型管理列表中显示。
¶ 编辑数据模型
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型管理列表中，选择需要修改模型的操作列上，点击修改按钮，弹出模型修改页面，修改模型基础信息（模型编码、模型名称、模型描述）以及模型列。
- 数据模型修改完成后，在弹出页面右下角，单击提交按钮，弹出页面将关闭。
¶ 删除数据模型
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型管理列表中，选择需要修改模型的操作列上，点击删除按钮，弹出删除提示，单击确定按钮，将删除该数据模型。
- 删除模型后，数据模型管理列表中不在显示该数据模型。
¶ 数据集
数据集用于可视化组件承载数据展现的桥梁，以数据模型来管理数据集。数据集是用来定义获取业务数据和对接数据中心的数据规则及采集数据模板等功能，数据集创建时，提供多种数据集类型填充，类型有SQL方式、API方式、NOSQL方式、平面文件、静态数据；其中JDBC数据源支持SQL脚本编写以及预览数据，提供查看执行的脚本、日志，编写SQL脚本中还提供了Velocity引擎，能更方便编写数据采集、处理业务数据逻辑的Sql脚本；同时提供设置数据转换处理函数(JS)，方便对数据的二次处理，满足更好的数据展示效果。
¶ 新建数据集
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型管理列表中，选择需要创建数据集模型的操作列上，点击新建数据集按钮，弹出页面，填写必要的数据集基础信息（数据集名称、模型描述、数据源类型）以及模型映射。
- JDBC数据源方式创建数据集
- 在创建数据集页面中，选择JDBC数据源类型和数据源、推送频率（首次推送、正则表达式两种方式），然后编辑查询数据SQL语句，并提供了Velocity模板引擎及变量的引用，能更方便编写数据采集、处理业务数据逻辑的Sql脚本。
- 在数据转换功能项右下角，单击执行按钮，将弹出数据预览页面。
- 预览数据完后，针对模型列与查询数据列进行映射，确认填写无误，单击提交按钮。
- API接口服务方式创建数据集
- 在创建数据集页面中，选择API接口服务数据源类型和请求地址、推送频率（首次推送、正则表达式两种方式）、请求方法(Post/Get)，然后分别填写请求头、请求参数、请求Body，并提供了Velocity模板引擎及变量的引用，能更方便灵活出处理接口下发的参数传递。
- 在数据转换功能项右下角，单击调用按钮，将弹出数据预览页面。
- 预览数据完后，针对模型列与查询数据列进行映射，确认填写无误，单击提交按钮。
- FILE数据源方式创建数据集
- 在创建数据集页面中，选择FILE数据源类型和选择文件
- 单击加载按钮，将弹出数据预览页面。
- 预览数据完后，针对模型列与查询数据列进行映射，确认填写无误，单击提交按钮。
- JSON静态数据源方式创建数据集
- 在创建数据集页面中，选择JSON静态数据源类型和编写JSON数据
- 单击解析按钮，将弹出数据预览页面。
- 预览数据完后，针对模型列与查询数据列进行映射，确认填写无误，单击提交按钮。
- SCRIPT数据源方式创建数据集
- 在创建数据集页面中，选择SCRIPT数据源类型和脚本类型（Python、Javascript）,编写数据脚本代码
- 单击调用按钮，将弹出数据预览页面。
- 预览数据完后，针对模型列与查询数据列进行映射，确认填写无误，单击提交按钮。
¶ 编辑数据集
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型管理列表中，选择需要编辑数据集模型的操作列上，展开选中的数据模型，在数据集记录上点击修改按钮，弹出数据集修改页面，修改数据集相关信息（数据集名称、模型描述、数据源类型）以及模型映射。
- 数据集相关项修改完后，确认修改无误，单击提交按钮。
¶ 删除数据集
- 登录DataColourDVP平台，进入项目后，展开左边数据管理菜单,单击模型管理菜单，进入数据模型管理页面。
- 在数据模型管理列表中，选择需要创建数据集模型的操作列上，展开选中的数据模型，在数据集记录上点击删除按钮，弹出删除提示页面
- 确认需要删除此数据集，单击确定按钮
¶ 关联变量
变量支持JSON静态数据、JDBC数据源 和 API接口服务、SCRIPT数据源四种数据源类型的关联使用，SQL表达式、JSON数据、API（请求头、请求参数、请求Body)、Python/Javascript数据处理脚本都支持Velocity模板引擎替换变量。系统用户变量包括：USER_ID【用户ID】、DEPT_ID【部门ID】、TENANT_ID【租户ID】、ROLE_ID_LIST【角色ID数组】、ROLE_ID_STRING【角色列表串，格式为1,2,3】
- SQL表达式
SQL表达式采集数据脚本通过变量对数据源过滤、下钻查询。
示例:通过部门、开始时间、结束时间三个变量，支持数据动态过滤查询。
- API（请求地址、请求头、请求参数、请求Body)
API接口的请求地址、请求头、请求参数、请求Body通过变量给接口传递参数，实现数据动态查询。
- JSON数据
JSON数据通过Velocity模板引擎、变量替换返回不同的静态数据。
- Python/Javascript数据处理脚本
Python/Javascript数据处理脚本通过Velocity模板引擎、变量替换，将更便于数据的处理。
¶ 数据转换
数据转换功能支持JavaScript脚本语言编写，方便前端组件渲染对数据的二次处理，满足更好的数据展示效果。
¶ 模型预览
¶ 模型预览
模型浏览包含整个项目的数据模型、数据集、变量之间的关系，可全整个项目的数据业务逻辑关系。
登录DataColourDVP平台，进入项目后，展开左边数据管理菜单进入数据模型浏览页面。
¶ 变量管理
系统提供变量管理功能，在系统运行、场景内部交互、场景页面导航、跳转等过程中需要配置的变量参数传递数据，通过配置的方式减少开发的硬编码，提高移植的灵活性。
满足用户变量定义，变量可应用于数据集SQL编写，组件交互脚本JS等，同时可联合外部参数传入结合数据集定义，使业务数据权限可通过用户变量参数进行关联过滤。
¶ 新建变量
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边数据管理菜单，单击变量管理菜单，进入变量管理页面。
- 在变量管理列表左上角，单击新建按钮，弹出变量新增页面，填写必要的变量基础信息（变量名称、变量初始值、变量描述）
- 变量必要信息填写完成后，在弹出页面右下角，单击提交按钮，弹出页面将关闭，在变量管理列表中显示。
¶ 修改变量
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边数据管理菜单，单击变量管理菜单，进入变量管理页面。
- 在变量管理列表中，选择需要修改变量记录的操作列上，单击修改按钮，弹出变量修改页面，修改变量相关信息（变量名称、变量初始值、变量描述）。
- 变量必要信息修改!完成后，在弹出页面右下角，单击提交按钮，弹出页面将关闭，在变量管理列表中显示。
¶ 删除变量
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边数据管理菜单，单击变量管理菜单，进入变量管理页面。
- 在变量管理列表中，选择需要删除变量记录的操作列上，单击删除按钮，弹出删除提示页面。
- 确认需要删除此变量，单击确定按钮
¶ 场景管理
登录DataColourDVP可视化平台场景管理页面，对场景进行管理，包括新建场景、保存预览、发布预览、编辑场景、回滚发布、复制场景标识、修改场景基础信息、删除等操作。
¶ 新建场景
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理页面，单击工作区左上角的“+新建场景”，然后弹出窗体填写场景名称、选择场景分类，没有分类，可以此页面先新建立分类，再选择场景布局类型。
- 单击提交按钮进入新建场景编辑模式，将可以使用系统提供的画布配置和数据、组件配置工具，管理画布和各个组件。
- 场景画布编辑器概览
| 序号 | 名称 | 说明 |
|---|---|---|
| 1 | 工具栏 | 图层、数据、部件、属性窗口菜单，操作记录撤销与重做，场景组件锁定与解锁，组件克隆、删除，跨浏览器复制与粘贴，对齐方式选择，场景保存（草稿）和场景发布等操作 |
| 2 | 组层属性窗口 | 在组层列表中，可以看到画布中各个组件的图层位置，也可以根据可视化应用需要，手动调整每个组件图层划到一组图层关系。 |
| 3 | 组件列表窗口 | 在组件列表中，可以查看各种类型的组件，可以将组件拖动到画布中进行配置，完成可视化场景的开发。 |
| 4 | 数据绑定窗口 | 在数据绑定窗口中，可以查看整个项目数据集，可以为当前场景选择数据集，提供选定的组件与数据集进行绑定设置。 |
| 5 | 页面设置窗口 | 单击工具栏锁定或被锁定的组件，页面右侧会显示页面设置面板。在页面设置中，提供调整屏幕的分辨率大小、设置背景颜色和图片、选择屏幕适配缩放方式、页面标题。 |
| 6 | 状态栏 | 显示场景选中组件信息，对齐线、标尺、场景百分比设置、鹰眼效果 |
| 7 | 场景画布 | 在画布区，可以通过鼠标选中画布一个或者多个组件（按住Ctrl 键即可选中多个组件），对组件进行自由拖拽布局，并支持画布的拖拽、缩放、图层移位、对齐、组件删除等操作。 |
| 8 | 组件与数据集绑定 | 可对场景画布中选定的组件绑定对应的数据集 |
| 9 | 组件设置 | 单击场景画布中任意一个组件，页面右侧会自动弹出属性窗口，部件属性的定位、基础设置项是每个组件通用设置部分，其他定义的属性项设置都为各个组件自定义属性。 |
- 场景页面设置
大屏名称：提供修改大屏的名称。
宽度/高度：设置屏幕分辨率，默认为 1000 × 1000，单位为 px，依据实际展现需求，可以更改分辨率。
自适应模式：在不同分辨率的环境下浏览可视化场景，场景页面提供重算尺寸、宽度撑满、高度撑满、缩放尺寸四种自适应渲染模式。
1）重算尺寸：适合现场环境的分辨率有可能大于、小于实际场景配置分辨率，针对字体、图片等资源不希望放大、缩小或者拉伸的展示场合；
2）宽度撑满：适合现场环境的分辨率宽度有可能大于、小于实际场景配置分辨率，只针对场景宽度做适应的展示场合；
3）高度撑满：适合现场环境的分辨率高度有可能大于、小于实际场景配置分辨率，只针对场景高度做适应的展示场合；
4）缩放尺寸：适合现场环境的分辨率宽度有可能大于、小于实际场景配置分辨率，且与实际配置场景的分辨相差不太大的自适应展示场合，此模式会对字体、图片等资源放大、缩小或者拉伸的效果。
场景背景设置：提供设置场景的背景，可以上传图片、设置颜色、透明度等。 - 组件公共设置
对可视化组件的配置项进行了概括性说明，帮助快速了解各组件的公共配置和自定义的配置项，并参见对应的文档进行配置。在场景编辑器中，选中工具栏属性窗口，单击画布中的某一个可视化组件，画布右侧会出现配置项面板。包括可视化组件属性公共配置、自定义属性、属性代码配置和事件生命周期。
属性窗口公共配置
在公共属性中，可以调整组件的定位、尺寸、样式（CSS、Box）和隐藏\显示等设置。
定位：选择高度设置、宽度设置的不同设置，对左设置、右设置、上设置、下设置也会显示不同的设置，单位可选择像素(px)、百分比(%)设置。
尺寸：对高设置、宽设置项来设置组件的大小，单位可选择像素(px)、百分比(%)设置。
样式：在CSS、Box编写样式代码，可改变组件样式。
隐藏\显示：设置组件在场景浏览时，可以对组件隐藏/显示。 - 右键功能
场景编辑器支持鼠标右键功能，在某一可视化组件上单击鼠标右键，即可对组件进行选中、锁定、解锁、暂隐、删除、克隆、图层调整、配置、事件等操作。
锁定：可使组件在场景的位置固定，不能拖拽移动。
解锁：可使组件在场景里随处移动。
暂隐：场景编辑模式下，可以在场景中隐藏不显示，方便与其同一个位置的其它组件设置。
删除：可删除当前组件。
克隆：复制一个当前的组件。
图层调整：用于调整当前组件的图层位置。
配置：可打开当前组件的属性代码配置窗口。
事件：可打开当前组件的组件各生命周期事件编写窗口。 - 图表的多选和对齐
Windows 系统下，按住 Ctrl 键（Mac 系统下为 command 键），然后单击组件即可进行多选。选中多个可视化组件后，通过选择工具栏上的多种对齐设置按钮。
在多选状态下，也可以通过鼠标来整体拖动调整多个可视化的位置。 - 场景编辑器支持快捷
Ctrl + alt + s: 保存
Ctrl + alt + c: 复制
Ctrl + alt + V: 粘贴
Ctrl + alt + a: 全选
Ctrl + alt + z: 撤销
Ctrl + alt + y: 重做
Ctrl + delete: 删除
- 单击工具栏右边保存按钮，将当前配置的可视化场景以草稿方式保存，保存成功后，返回到场景列表，该场景缩略图左上出现最新保存标识。
- 单击工具栏右边发布按钮，将当前配置的可视化场景以发布方式保存，可提供生产环境浏览，发布成功后，返回到场景列表。
¶ 浏览场景
场景预览有以下两种方式：保存预览和发布预览
- 保存预览
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理列表中，鼠标悬停在对应的场景缩略，出现可选操作，单击保存预览图标进入场景预览页面，同时把浏览地址直接放进系统剪切板。
- 发布预览
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理列表中，鼠标悬停在对应的场景缩略，出现可选操作，单击发布预览图标进入场景预览页面，同时把浏览地址直接放进系统剪切板。
¶ 编辑场景
- 编辑场景设计
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理列表中，鼠标悬停在对应的场景缩略图上，直接单击场景缩略图，将直接进入编辑器编辑场景。
- 在场景修改完成后，可以通过场景编辑器工具栏右边的保存按钮、快捷键Ctrl+s对场景临时保存，同时也可以直接单击场景编辑器工具栏右边的发布按钮，直接发布。
¶ 回滚发布
回滚发布就是回滚到上一个场景发布版本。
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理列表中，鼠标悬停在对应的场景缩略图上，出现可选操作图标，单击回滚发布按钮图标，将弹出确认回滚提示框。
¶ 修改信息
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理列表中，鼠标悬停在对应的场景缩略图上，出现可选操作图标，单击修改场景按钮图标，将弹出修改场景基础信息页面，修改基础信息项有场景名称、场景分类、版本回滚，此处版本回滚可以按照时间轴刻度回滚，版本回滚后，只是针对编辑场景有效，后续再编辑场景为本次回滚的场景。
- 场景基础信息修改完后，确认修改无误，单击提交按钮，直接跳转到场景管理页面。
¶ 删除场景
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景管理菜单，进入场景管理页面。
- 在场景管理列表中，鼠标悬停在对应的场景缩略图上，出现可选操作图标，单击删除场景按钮图标，将弹出确认删除提示框。
- 确认需要删除此场景，单击确定按钮。
¶ 场景案例
¶ 场景案例
场景案例管理来源以往实施、网络资源的一些案例样本，方便用来做设计参考使用，每个案例都将是纯Html5/JavaScript/Css等编写而成，这些场景案例可用于学习人员参照模仿实施新场景。(PS：不定期更新)
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景案例菜单，进入场景案例页面。
- 在场景案例管理页面，案例缩略图右下角单击点击查看链接，然后显示案例浏览。
- 在案例管理列表右上角，单击全屏按钮，将可全屏显示案例。
¶ 场景设计
¶ 场景设计
场景设计管理提供以往实施、网络资源的一些案例效果图，方便用来做效果设计时参考，这些场景案例可用于学习人员参照模仿做新场景设计，可基于这些场景设计，冥想新的创意设计，促进学习人员的创意、思维能力。(PS：不定期更新)
- 登录DataColourDVP平台，进入项目后，单击顶部菜单我的可视化，然后展开左边场景管理菜单，单击场景设计菜单，进入场景设计管理页面。
- 在场景设计管理页面，单击效果图缩略图，将弹出放大当前点击的效果图，可通过效果图右上角左右按钮查看其它效果图。
- 在场景设计列表右上角，单击全屏按钮，将可全屏显示效果图列表。
¶ 监控管理
¶ 客户端连接监控
系统针对用户访问可视化场景进行实时监控，在能连接互联网的环境下，支持在线定位查询访问系统用户的IP归属地，便于监控访问客户端的合法性。
- 登录DataColourDVP平台，单击顶部菜单监控管理，然后展开左边连接管理菜单，单击客户端连接菜单，进入客户端连接管理页面。
- 单击IP定位连接，将打开IP归属地信息。
¶ 调度任务监控
系统针对用户访问可视化场景、场景数据推送任务进行实时监控，监控每个可视化场景数据集的数据推送状态，同时实时掌握数据调度任务运行情况。
- 登录DataColourDVP平台，单击顶部菜单监控管理，然后展开左边推送管理菜单，单击调度任务进入调度任务管理界面。
- 单击+，将展开此场景调用的数据集列表。
¶ 数据字典
数据字典管理主要针对系统常量持久化存储，系统当中往往包含一些比如下拉列表或系统参数等等常量数据，在规模较小的工程当中，设计者通常会使用当都类属性去定义。而大型项目当中则较倾向于使用数据库存储，外加提供数据字段配置管理功能，为系统使用者提供常量配置功能。
¶ 新建数据字典
- 登录DataColourDVP平台，单击顶部菜单系统管理，展开左边系统管理菜单，单击数据字典菜单，进入数据字典管理界面。
- 在数据字典记录列表左上角，单击【新建】，在弹出页面内填写必要的信息（字典编码、字典名称、字典类型、字典排序、字典值、字典描述）。
- 填写信息确认无误，单击提交，完成数据字典添加。
新添加的数据字典会自动显示在数据字典列表中。
¶ 修改数据字典
- 登录DataColourDVP平台，单击顶部菜单系统管理，展开左边系统管理菜单，单击数据字典菜单，进入数据字典管理界面。
- 在数据字典记录列表中，选择需要修改数据字典记录的操作列上，单击修改按钮，在弹出页面内修改数据字典信息（字典编码、字典名称、字典类型、字典排序、字典值、字典描述）。
- 修改内容确认无误，单击提交，完成数据字典的修改操作。
¶ 修改数据字典
- 登录DataColourDVP平台，单击顶部菜单系统管理，展开左边系统管理菜单，单击数据字典菜单，进入数据字典管理界面。
- 在数据字典记录列表中，选择需要删除数据字典记录的操作列上，单击删除按钮，在弹出删除提示框。
- 确认删除数据字典记录，单击确定，完成数据字典的删除操作。
在数据字典列表中，不显示被删除掉的数据字典项。
¶ 进阶技巧
¶ 场景切换
- 参与切换得场景，增加场景切换标签。
- 在标签点击事件中，添加切换导航脚本。
this.getApiPage().navigateStage("313724050717278208",[]);
navigateStage函数的详细说明，请参考二次开发规范的接口说明
3. 各标签脚本编写完成后，发布场景预览。
