全部产品
Search
文档中心

DataV数据可视化:空白画布搭建可视化应用

更新时间:Jun 18, 2025

本章节以搭建WebSite Data Dashboard为例,为您演示如何使用DataV空白模板来开发可视化应用项目。

背景信息

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

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

效果展示

按照本文提供的配置完成后,将生成如下效果的数据看板。

image

说明

可视化应用涉及的配置较多,不同配置最终生成的样式存在差异,本示例仅用于了解相关功能及操作流程,实际效果请以您的操作为准。

组件信息

下图展示了示例所使用的组件清单,包含各组件名称及对应数量。

image

操作步骤

您可通过如下操作,完成空白画布搭建可视化应用,快速体验DataV-Board的相关功能。

步骤一:创建可视化应用

  1. 登录DataV控制台

  2. 我的可视化页面中,单击PC端创建。在页面中选择空白画板并单击创建项目

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

    应用创建成功后会跳转到应用编辑器页面。您可按需接入数据源并配置画布信息。

    说明

    画布尺寸默认为1920*1080,您可在画布编辑器右侧的页面配置区域按需调整。

步骤二:添加并配置组件

说明
  • 多选操作:在Windows系统下按住Ctrl键(Mac系统下按住Command键)并单击组件,可进行多选。

  • 移动组件:通过画布拖拽或在配置面板中修改坐标位置,可调整组件在画布中的位置。

  • 图层调整:在左侧图层栏中拖动组件上移或下移,可改变组件的图层层级。图层移动时,当两个组件重叠,位置靠前的组件会覆盖位置靠后的。

业务指标趋势

  1. 在画布左侧全部资产栏,单击信息 > 业务指标趋势,将组件添加到画布中。

  2. 单击组件,在可视化应用右侧的配置面板中,根据效果图配置底层面板中的标题图标数值image

  3. 重复上述步骤,完成所有业务指标趋势组件的配置。

通用标题

  1. 在画布左侧全部资产栏,单击信息 > 通用标题,将通用标题组件添加到画布中。

  2. 单击组件,在可视化应用右侧的配置面板中,配置通用标题的样式。通用标题-样式

  3. 通用标题配置面板中,修改标题名。image

  4. 重复以上操作,继续添加其他的通用标题组件。

数字翻牌器

  1. 在画布左侧全部资产栏,单击信息 > 数字翻牌器组件。

  2. 单击组件,在可视化应用右侧的配置面板中,配置数字翻牌器的样式。

    数字翻牌器-样式

  3. 数字翻牌器数据面板,将value值改成您需要显示的数据。

    配置数字翻牌器组件数据

  4. 重复以上操作,继续添加其他的数字翻牌器组件。

时间器

  1. 在画布左侧全部资产栏,单击信息 > 时间器组件。

  2. 配置时间器的样式,修改图标样式时间器等配置。image

自定义背景块

  1. 在画布左侧全部资产栏,单击媒体 > 自定义背景块组件。

  2. 配置自定义背景块的样式,修改图表尺寸背景色

    image

仪表盘

  1. 在画布左侧全部资产栏,单击图表 > 饼环图 > 仪表盘组件。

  2. 配置仪表盘的样式,修改系列下的仪表盘指针等字段。

    image

  3. 根据所需,修改数据项JSON文件。image

标注气泡柱状图

  1. 在画布左侧全部资产栏,单击图表 > 柱状图 > 标注气泡柱状图组件。

  2. 配置标注气泡柱状图的样式,修改系列下的元素样式并修改数据源等配置。

    imageimage

区域图

  1. 在画布左侧全部资产栏,单击图表 > 区域图组件。

  2. 配置区域图的样式,修改折线样式设置数据源

    imageimage

  3. 重复以上操作,继续添加其他的区域图组件。

单张图片

  1. 在画布左侧全部资产栏,单击媒体 > 单张图片组件。

  2. 根据所需,修改单张图片的背景图image

  3. 重复以上操作,继续添加其他的单张图片组件。

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

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

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

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

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

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

    说明

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

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

相关文档