推荐几个数据大屏可视化开发工具

  • 2020-09-23
  • 0
  • 0

一个简单的数据大屏可视化编辑所需要的功能包括如下几点:

Alvin

工具推荐

针对功能解剖后,拆解涉及的功能模块,不同模块中涉及到比如图表、拖拽、拉伸收缩、代码编辑器、图片导出、grid布局、动态表单等功能,一般当我们的前端团队比较小时,无法独立去开发涉及到的这些功能模块,可以通过使用社区现有的成熟的开源工具来解决这些问题,避免重复造轮子。

Antv

官方介绍:AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。官网链接 数据大屏开发中,可用于做组件控件区如饼图、环型图等的渲染。

Antv 的产品线很多,我主要用的是 G2Plot 开箱即用的图表库,简单易用,而且蚂蚁金服家的 ChartCube 图表魔方也用的是G2Plot,主要借Antv来在线制作图,并快速生成 code。 ChartCube官方链接

Codemirror

Codemirror是一个在线代码编辑器工具,能够实时在线代码高亮显示,而且许多社区很火的在线代码编辑器也是基于Codemirror开发的,数据大屏开发中,可用于做数据源的管理,支持在线编辑代码 官网链接

也有开发者在原先基础上封装了vue和react版本的:

如果是配置json数据源还可以用:

Vue.Draggable(Sortable.js)

官方介绍:Vue.Draggable 是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图同步,基于并提供 Sortable.js 的所有功能,数据大屏开发中,可用于做控件拖拉功能,将不同控件的拖拉到画布中形成大屏。文档链接

如果你不想用工具库,你也可以直接在H5的 Drag Drop API基础上开发,直接在要拖拽的元素上将draggable属性设置为true即可 文档链接

vue-draggable-resizable

vue-draggable-resizable 组件用于可调整大小和可拖动的元素,且没有第三方库依赖。数据大屏开发中,可用于做画布中组件大小的调整。 文档链接

vue-grid-layout

官方介绍:vue-grid-layout 是一个类似于Gridster的栅格布局系统, 适用于Vue.js。 灵感源自于 React-Grid-Layout,简单说就是一个vue栅格拖动布局的组件,用来实现可以拖拽的vue布局。数据大屏开发中,可用于画布中组件的布局。文档链接

Demo

html2canvas

html2canvas 可以轻松地帮你将HTML代码转换成Canvas,数据大屏开发中,可用于做大屏的图片生成,通过静态图片生成来分享数据。文档链接

vcolorpicker

vcolorpicker 是vue颜色选择器组件,是仿照Angular的color-picker插件开发的 在数据大屏开发中,可用于做背景色等进行颜色选择 文档链接

不过还是建议使用第三方组件库的颜色选择器,比如element组件库的 ColorPicker,用户体验更佳

vue-form-maker

vue-form-maker 是Vue动态生成表单组件,可以根据数据配置表单,不过使用的UI库是iView,当然你可以根据你使用的组件库进行修改。数据大屏开发中,可用于组件区的基本属性等表单的动态生成。文档链接

评论

还没有任何评论,你来说两句吧