前沿：最近有需求，开始接触数据可视化的开发。 调查并体验了国内几个比较大的数据可视化解决方案提供商。 然后，在开发中筛选了相关的工具。 大多数情况下，我们在社区中看到了关于合作伙伴反馈的需求。 借此机会分享我整理的工具，后期开发完成后，分享整个过程的心得
1 .前期调研开发前，参考国内现有优秀的数据大屏幕解决方案提供商，了解
Alibaba云(DataV )文档链接
网络包含到“数”(EasyScreen )文档的链接
腾讯云(腾讯云图)文档链接
但这些厂商都是付费版本，只有阿里云和网易几天就有15天的免费试用体验时间
2 .功能解剖通过前期调查，梳理了简单数据大屏幕可视化编辑所需的功能
3 .工具建议功能解剖后，与分解相关的功能模块。 不同的模块包括例如图表、拖动、缩放、代码编辑器、图像导出、网格布局和动态表单等功能。 如果前端团队太小，不能独立开发，可以通过使用社区现有成熟的开源工具解决这些问题来避免车轮重塑
3.1 Antv官方介绍： AntV是蚂蚁金服全新一代的数据可视化解决方案，致力于提供简单方便、专业可靠、无限可能的数据可视化最佳实践。 在官网链接数据的大屏幕开发中，可用于渲染饼图、圆环等组件控制区域
Antv的产品线有很多。 我主要使用的是G2Plot开箱即用的图表库。 简单易用。 另外，蚂蚁金服家ChartCube图表立方体也使用了G2Plot。 主要是借用Antv在线制图，快速生成code ChartCube的官方链接
3.2 Codemirror Codemirror是一个在线代码编辑器工具，可以实时高亮在线代码。 此外，许多社区的热门在线代码编辑器也基于Codemirror开发，可用于数据大屏幕开发中的数据源管理，支持在线编辑代码官网链接
也有开发者以vue和react的版本为基础封装的
vue-codemirror :文档链接
react-codemirror :文档的链接
如果要配置json数据源，请单击
jsoneditor:文档链接
3.3Vue.Draggable(Sortable.js )官方介绍： Vue.draggable是基于sortable.js的vue拖放的组件。 拖放&； 它允许放置和视图同步，并基于Sortable.js的所有功能提供。 在数据大屏幕开发中，可以作为控件拖动功能，使不同控件的拖动在画布上成为大屏幕。 文档链接
如果不想使用工具库，可以直接基于H5的Drag和Drop API开发，只需在拖动的元素中将draggable属性设置为true即可链接文档
3.4可缩放可缩放可缩放组件用于可以调整大小和拖动的元素，与第三方库无关。 在数据屏幕开发中，可用于调整画布中组件的大小。 文档链接
3.5 vue-grid-layout官方介绍： vue-grid-layout是一种类似于Gridster的网格布局系统，适用于Vue.js。 我从React-Grid-Layout那里得到了灵感。 简单来说，就是vue网格拖动布局以实现可拖动的vue布局的组件。 在数据大屏幕开发中，可用于画布中组件的布局。 文档链接
3.6 HTML2Canvas html2canvas可以轻松地将html代码转换为canvas。 在数据大屏幕开发中，可以用于大屏幕的图像生成、静态图像生成的数据共享。 文档链接
3.7 vcolorpicker vcolorpicker是一个vue颜色选择器组件，是模仿Angular的color-picker插件开发的。 在数据的大屏幕开发中，可以用于链接用于生成背景色等进行颜色选择的文档
但是，建议您使用第三方组件库的拾色器，如element组件库的ColorPicker
3.8 vue-form-maker vue-form-maker可以通过vue动态生成表单组件来根据数据组织表单。 但是，使用的UI库是iView。 当然，也可以根据使用的组件库进行更改。 大屏幕开发可用于为窗体生成动态文档链接，包括组件区域的基本属性
我可以参考前面吗？ 在源中从0到1开发动态表单
4 .文章蛋之前刚进入掘金lv4的时候，有朋友就跟小树开玩笑说：“小树，穿女装吧。” (啊，看看你有的好节奏)。 小树看起来不像我180岁的大xydsn女装。 还是不能污染社区这片净土。 于是我改变了文明点的形式，小树你一直喜欢音乐，平时唱歌吗？ 也是我生活中不可缺少的乐趣之一。 周杰伦的《我是如此相信》 (快手网络版)给了支持我的伙伴吗？