本章节以搭建WebSite Data Dashboard为例,为您演示如何使用DataV空白模板来开发可视化应用项目。
背景信息
效果展示
按照本文提供的配置完成后,将生成如下效果的数据看板。
可视化应用涉及的配置较多,不同配置最终生成的样式存在差异,本示例仅用于了解相关功能及操作流程,实际效果请以您的操作为准。
组件信息
下图展示了示例所使用的组件清单,包含各组件名称及对应数量。
操作步骤
您可通过如下操作,完成空白画布搭建可视化应用,快速体验DataV-Board的相关功能。
步骤一:创建可视化应用
步骤二:添加并配置组件
多选操作:在Windows系统下按住Ctrl键(Mac系统下按住Command键)并单击组件,可进行多选。
移动组件:通过画布拖拽或在配置面板中修改坐标位置,可调整组件在画布中的位置。
图层调整:在左侧图层栏中拖动组件上移或下移,可改变组件的图层层级。图层移动时,当两个组件重叠,位置靠前的组件会覆盖位置靠后的。
业务指标趋势
在画布左侧全部资产栏,单击
,将组件添加到画布中。单击组件,在可视化应用右侧的配置面板中,根据效果图配置底层面板中的标题、图标和数值。
重复上述步骤,完成所有业务指标趋势组件的配置。
通用标题
在画布左侧全部资产栏,单击
,将通用标题组件添加到画布中。单击组件,在可视化应用右侧的配置面板中,配置通用标题的样式。
在通用标题的配置面板中,修改标题名。
重复以上操作,继续添加其他的通用标题组件。
数字翻牌器
在画布左侧全部资产栏,单击
组件。单击组件,在可视化应用右侧的配置面板中,配置数字翻牌器的样式。
在数字翻牌器的数据面板,将value值改成您需要显示的数据。
重复以上操作,继续添加其他的数字翻牌器组件。
时间器
在画布左侧全部资产栏,单击
组件。配置时间器的样式,修改图标样式、时间器等配置。
自定义背景块
在画布左侧全部资产栏,单击
组件。配置自定义背景块的样式,修改图表尺寸和背景色。
仪表盘
在画布左侧全部资产栏,单击
组件。配置仪表盘的样式,修改系列下的仪表盘指针等字段。
根据所需,修改数据项JSON文件。
标注气泡柱状图
在画布左侧全部资产栏,单击
组件。配置标注气泡柱状图的样式,修改系列下的元素样式并修改数据源等配置。
区域图
在画布左侧全部资产栏,单击
组件。配置区域图的样式,修改折线样式并设置数据源。
重复以上操作,继续添加其他的区域图组件。
单张图片
在画布左侧全部资产栏,单击
组件。根据所需,修改单张图片的背景图。
重复以上操作,继续添加其他的单张图片组件。
步骤三:预览并发布可视化应用
组件的样式和数据源都配置完成后,您可以预览并发布可视化应用,实现看板的在线播放和演示。本步骤为您介绍预览并发布可视化应用的方法。
单击画布编辑器右上角的
图标,跳转至新页面预览可视化应用。
预览成功后,可按照以下步骤发布可视化应用。
单击画布编辑器右上角的
图标,在弹出的对话框中单击发布大屏以打开发布页面。
在发布页面中单击分享链接右侧的
图标复制链接。
说明在发布页面中,可以按需进行发布信息和快照管理。
打开浏览器,将复制的链接粘贴到地址栏中,即可在线观看发布成功的可视化应用。