模板搭建可视化应用

本文以搭建11狂欢节可视化应用为例,为您演示如何使用DataV提供的模板来开发可视化应用项目。

背景信息

  • 示例使用静态数据源,因此可以直接在组件的数据配置区域粘贴准备好的数据。如果您的数据源为CSV文件数据库等其他类型,需要先添加数据源

  • 如果您需要使用API数据源,可直接在数据配置栏输入API地址。具体配置时,如需启用服务器代理请求等操作,请参见配置跨域数据

效果展示

image

操作流程

您可通过如下操作,完成对模板可视化应用的创建,快速体验DataV-Board的相关功能。

  1. 步骤一:创建可视化应用

  2. 步骤二:配置组件样式

  3. 步骤三:适配组件数据

  4. 步骤四:预览并发布可视化应用

步骤一:创建可视化应用

  1. 登录DataV控制台

  2. 我的可视化页面中,单击PC端创建。选择一个合适的模板,此处以选择201711狂欢节模板为例,单击创建项目

  3. 创建数据大屏对话框中,输入可视化应用名称并选择项目分组,未创建分组时可选择未分组

  4. 单击创建

    应用创建成功后跳转到画布编辑器页面,可以看到一款满足展示企业新零售业务相关数据且设计精良的模板。image

步骤二:配置组件样式

可视化应用创建完成后,您可以通过以下方式修改组件样式。

  1. 在左侧图层栏中单击选中组件后,可通过右侧样式面板调整其样式配置。image

    说明

    您可以双击画布编辑器图层侧的组件名称,重命名当前组件。

  2. 根据需求,使用同样的方式调整其他组件的配置。

步骤三:适配组件数据

您可以根据实际需要通过以下方式修改组件数据内容。

  1. 在左侧图层栏中,单击选中某一组件。例如:双十一气泡图。

  2. 在右侧样式面板中选择数据页签,单击配置数据源。在设置数据源对话框中,数据源类型选择静态数据

  3. 在下方的数据配置区域内,按照您的需求修改模板已有的数据,或粘贴准备好的JSON格式的数据。

    说明

    添加数据时的字段名要和系统设置保持一致。

  4. 数据配置完成后,您可以在设置数据源页面单击数据响应结果后的刷新图标刷新数据响应结果。

    数据响应成功后,在数据页面会显示配置完成匹配成功

  5. 使用同样的方式,配置可视化应用中所有组件的数据。

步骤四:预览并发布可视化应用

组件的样式和数据源都配置完成后,您可以预览并发布可视化应用,实现看板的在线播放和演示。本步骤为您介绍预览并发布可视化应用的方法。

  1. 单击画布编辑器右上角的{FA4AF138-6B6B-4DF3-AA90-521D2359AFB3}图标,跳转至新页面预览可视化应用。

    预览成功后,可按照以下步骤发布可视化应用。

  2. 单击画布编辑器右上角的{F18FCB2F-9D3E-4A35-9995-D9A7EFEA0EF6}图标,在弹出的对话框中单击发布大屏以打开发布页面。

  3. 在发布页面中单击分享链接右侧的image.png图标复制链接。

    说明

    在发布页面中,可以按需进行发布信息和快照管理

  4. 打开浏览器,将复制的链接粘贴到地址栏中,即可在线观看发布成功的可视化应用。