数据可视化越来越盛行，常见的就是一些大屏展示，将数据进行以图表的形式进行展示，简单直观，清晰明了，更好的能体现出数据的价值。

今天讨论不是怎么设计出这样的大屏，今天我们看看怎样实现这样的大屏设计器，先推荐一波现有的给钱就能用的大屏设计器。

大厂的大屏设计器

阿里的Datav

地址：
https://www.aliyun.com/product/bigdata/datav

我个人版使用过期了，图片就贴了张官网的，感兴趣有计划的可以去看看，一个账号只有一次的免费30天试用机会，在此期间可以创建大屏应用，保存预览查看。

京东云数据大屏

地址：
https://login.jdcloud.com/oauth/wechat/login?returnUrl=https%3A%2F%2Fultrav-console.jdcloud.com%2F&eid=4BRTMKVEDQU6U7LTI5LFQKU6P4H3JI2ZGRT7VI6JNHS5GFWGM2XT77KOOHEXJ3X2LWLJ7GXP7O2YET7NZMXXLERLQM

目前测试阶段免费，40个大屏应用，具体啥时候收费，这个就不知道了。

腾讯云图

登录 腾讯云控制台，在顶部导航云产品中，选择大数据可视化服务下的腾讯云图，进入腾讯云图控制台。

百度数据可视化Sugar

地址： https://cloud.baidu.com/product/sugar.html

一个账号只有一次免费30天的试用机会

袋鼠云Easy[V]数据可视化平台

地址： https://easyv.dtstack.com/

试用需要测试，面向企业

我们怎么做呢

从以上几个中我们大体可以看出，可视化图片大体突出功能就是图表拖拽，数据填充，样式修改，边框底色处理。具体他们用的图表是开源的还是他们自己写了，看看我们可以采用的图表。

百度Echarts

地址： https://echarts.apache.org/zh/index.html

蚂蚁金服AntV

地址： https://antv.vision/

Chart.js

地址： http://chartjs.cn/

以上几个都是开源免费的，可以用于商业开发，图库我们可以采用这些开源的图表库然后进行封装动态配置

拖拽图表可以用开源的插件vue-draggable-resizable 来实现，插件地址如下：

插件： vue-draggable-resizable

地址： https://github.com/mauricius/vue-draggable-resizable

数据配置这个时候MVVM框架的数据双向绑定就用起来很爽了，根据选择的框架可以选择响应的拖拽缩放库，本人用vue了也就放上了基于vue封装的拖拽缩放库。

图表边框及一些装饰库可以采用开源的插件库DataV,挺不错的不但有边框和装饰库，还有一些基础图谱和地图去使用。

插件： DataV

地址： http://datav.jiaminghi.com/

个人写的这个暂时还没有开源，一方面是没有完善另一方面我觉得定位有问题，我写的图表配置库中几乎实现了echarts 的完全配置，但很多的东西及名词业务人员完全不知，这个东西做出来肯定不会是让程序员去操作，所以最简单最直接的展示出这个业务想要的效果就好了，所以我打算删减掉一些配置，提取出重要的属性，或者组件拆分。

说明：以上图片有些是我自己截图，有些是从官网上截图而来，如有有侵权，请及时通知我删除！如果对数据可视化有啥好的想法或者有啥建议，我们可以一起讨论，或者你们有知道大厂的那些是如何实现的也可以告诉我，感谢！