3.工具推荐
针对功能解剖后，拆解涉及的功能模块，不同模块中涉及到比如图表、拖拽、拉伸收缩、代码编辑器、图片导出、grid布局、动态表单等功能，如果你的前端团队比较小，无法独立去开发涉及到的这些功能模块，可以通过使用社区现有的成熟的开源工具来解决这些问题，避免重复造轮子
3.1 Antv
官方介绍：
AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。官网链接 数据大屏开发中，可用于做组件控件区如饼图、环型图等的渲染
image
Antv的产品线很多，我主要用的是G2Plot 开箱即用的图表库，简单易用，而且蚂蚁金服家的ChartCube 图表魔方也用的是G2Plot，主要借Antv来在线制作图，并快速生成code ChartCube官方链接
image
3.2 Codemirror
Codemirror是一个在线代码编辑器工具，能够实时在线代码高亮显示，而且许多社区很火的在线代码编辑器也是基于Codemirror开发的，数据大屏开发中，可用于做数据源的管理，支持在线编辑代码 官网链接
也有开发者在原先基础上封装了vue和react版本的
-
vue-codemirror：文档链接 -
react-codemirror：文档链接
如果是配置json数据源还可以用
-
jsoneditor:文档链接
3.3 Vue.Draggable(Sortable.js)
官方介绍：
Vue.Draggable是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图同步，基于并提供 Sortable.js 的所有功能，数据大屏开发中，可用于做控件拖拉功能，将不同控件的拖拉到画布中形成大屏。文档链接
image
如果你不想用工具库，你也可以直接在H5的Drag和Drop API基础上开发，直接在要拖拽的元素上将draggable属性设置为true即可 文档链接
3.4 vue-draggable-resizable
vue-draggable-resizable组件用于可调整大小和可拖动的元素，且没有第三方库依赖。数据大屏开发中，可用于做画布中组件大小的调整。 文档链接
image
3.5 vue-grid-layout
官方介绍：
vue-grid-layout是一个类似于Gridster的栅格布局系统, 适用于Vue.js。 灵感源自于 React-Grid-Layout，简单说就是一个vue栅格拖动布局的组件，用来实现可以拖拽的vue布局。数据大屏开发中，可用于画布中组件的布局。文档链接
image
3.6 html2canvas
html2canvas可以轻松地帮你将HTML代码转换成Canvas，数据大屏开发中，可用于做大屏的图片生成，通过静态图片生成来分享数据。文档链接
image
3.7 vcolorpicker
vcolorpicker是vue颜色选择器组件，是仿照Angular的color-picker插件开发的 在数据大屏开发中，可用于做背景色等进行颜色选择 文档链接
不过还是建议使用第三方组件库的颜色选择器，比如element组件库的ColorPicker，用户体验更佳
3.8 vue-form-maker
vue-form-maker是Vue动态生成表单组件,可以根据数据配置表单，不过使用的UI库是iView，当然你可以根据你使用的组件库进行修改。数据大屏开发中，可用于组件区的基本属性等表单的动态生成文档链接
好了，今天的分享就到这里，如果你是一个正准备学习前端或者正在学习前端的小伙伴，有什么问题可以免费私信我，我这里也还有一些学习资料也可以免费分享给大家，点赞关注私信我即可，也可以加入我的前端学习交流群（109029339），希望分享的所有内容能让你们喜欢。码字不易，方便的话请点赞转发，你的转发和点赞将是我继续分享的动力……
