数据可视化,是每个前端开发人员都需要面临的技术。可视化的方式有很多种,有简单的、便捷的,还有复杂的。在实现可视化的同时,开发人员还需要面临很多的技术问题,比如,如何适配所有屏幕分辨率,现有的插件对于实现由特效的数据工具不全。这是一个比较常见,但是解决起来又很麻烦的问题。
但是,有了DataV技术之后,不仅帮助前端开发人员可以快速的实现一些复杂效果的展示,还可以让一些没有前端开发经验的程序员轻松的实现大量数据的完美展示。
DataV中有很多可以直接使用的模板,如果创建的可视化项目与模板中的一些项目大体相同的话,可以直接套用模板创建我们的项目,然后再进行一些细节的修改。可以将不需要的组件删除,拖拽需要的组件,添加到项目中。
DataV中实现数据可视化大屏的步骤:
首先,需要创建一个画布,然后在画布上拖拽项目所需的组件。将组件拖拽到画布上之后,然后调整组件的大小、顺序、颜色、以及距离等细节后,即可完美匹配项目需求。
当把组件在画布上组合完成后,就可以去处理我们所需要的数据文件了。一些简单的数据,可以直接点击配置数据源,输入需要的数据源即可。还有一些复杂的大量的数据模式,可以通过多种方式导入。比如,直接使用excel中的csv文件、或者通过api配置动态数据源。数据源的格式需要调整为DataV中可以识别并匹配的格式,每种组件的格式标准不同,需要将不同组件的数据源调整为他所需的格式。
如果项目中需要有一些交互动作,可以使用节点编程功能,去写要实现的交互效果、动作等。 节点编程即通过可视化连线的方式,定义图层与图层之间的交互行为。帮助您自由管理大屏中多个组件之间的交互关系。在开始配置节点编程之前,需要先准备好组件的交互需求,并将需要交互的组件在大屏编辑器中搭建完成。然后就可以进行配置连线了,定义鼠标如何操作,完成某个效果展示。
完成大屏项目的搭建后,即实现了数据可视化的展示,开发人员不需要去写大量的代码,样式效果的编辑,以及一些特殊效果的实现。这给开发人员带来便捷的开发流程,并让非前端开发人员也可以实现数据可视化的编程。
下图即为在DataV中实现的大屏效果:
简单、快速、便捷的完成项目。