1.前期调研
2.功能解剖
通过前期调研,大概梳理了一个简单的数据大屏可视化编辑所需要的功能包括如下几点
3.工具推荐
3.1 Antv
Antv的产品线很多,我主要用的是G2Plot
开箱即用的图表库,简单易用,而且蚂蚁金服家的ChartCube
图表魔方也用的是G2Plot
,主要借Antv来在线制作图,并快速生成code ChartCube官方链接
3.2 Codemirror
也有开发者在原先基础上封装了vue和react版本的
如果是配置json数据源还可以用
-
jsoneditor
:文档链接
3.3 Vue.Draggable(Sortable.js)
如果你不想用工具库,你也可以直接在H5的Drag
和Drop
API基础上开发,直接在要拖拽的元素上将draggable属性设置为true即可 文档链接
3.4 vue-draggable-resizable
3.5 vue-grid-layout
3.6 html2canvas
3.7 vcolorpicker
不过还是建议使用第三方组件库的颜色选择器,比如element组件库的ColorPicker,用户体验更佳
3.8 vue-form-maker
好了,今天的分享就到这里,如果你是一个正准备学习前端或者正在学习前端的小伙伴,有什么问题可以免费私信我,我这里也还有一些学习资料也可以免费分享给大家,点赞关注私信我即可,也可以加入我的前端学习交流群(109029339),希望分享的所有内容能让你们喜欢。码字不易,方便的话请点赞转发,你的转发和点赞将是我继续分享的动力......