产品设计中，我们常常用可视化的大屏对系统各项数据进行呈现，这类产品往往都力求效果酷炫，在充分展示数据的同时要有较好的视觉效果，在设计师绞尽脑汁完成华丽效果之后，前端的实现就成了一大难题，如果中间穿插着频繁的需求调整，就更让人崩溃了。

最近公司面向企事业单位做了二十余个数据可视化产品，每次在接洽过程中客户都要求看到页面内的真实数据，这导致仅凭设计稿争取客户变得不现实，必须快速完成开发才能获得客户的信任，但可预见的是客户一定会频繁变更需求，因此我们需要提高开发速度，同时降低开发成本，阿里云提供的DataV工具很好的解决了这个互相矛盾的目的，搜了一下发现站内没有相关的文章，我想有必要向大家分享一波了。

本文对DataV的使用做简单地介绍，帮助大家了解这个工具，其所具备的丰富和强大的功能需要大家深入探索了。

DataV到底能做什么？

它能帮助产品经理或设计师快速的将设计稿高还原度的搬进网页，让客户通过浏览器进行访问，直观感受到成品效果，省去前端开发页面的大量时间。如果团队没有后端提供接口，可直接配置固定的模拟数据；如果团队有后端提供接口，则按DataV组件的数据格式给出接口后，就能让大屏展示真实数据。

怎么获取账号？

访问datav.aliyun.com，按提示注册账号开通就好了，顺便提一句，免费版的能创建的项目数量很少，功能也很少，收费版的500一个月，单个子账号也只能创建20个项目，还有更高费用版本的，具体费用大家还是自己看吧。

进去之后长这样，顺便提一句，每个项目的名称就是发布之后，打开链接浏览器显示的网页title，编辑的时候需要注意了。

使用方法简介

简单介绍一下这个工具的使用，具体的内容就由大家自己摸索吧（前期可能费点时间，但相信我，这东西上手确实很快的）。

下图是DataV的编辑页面，从左向右共四列，分别是图层、组件列表、工作区、组件配置区。

1.工作区

上图中间最大的区域就是工作区，相当于PS的画布，其尺寸在创建的时候进行设置，你的所有创作均在工作区进行（超出预设尺寸的内容，发布后页面不显示，上图中可以很明显的看出下面那些超出范围的内容）。

DataV的创作，实际上是使用其提供的组件拼装出你所需要的页面，对产品经理们来说，可以参考各类原型工具进行理解，尤其是“组件”的概念，非常相似。不同于PS通过工具绘制图形的方式，DataV中用户只能选择已经存在的组件，然后对组件进行样式的编辑，最后配置组件对应的数据，一言以蔽之，就是你在用各种各样的组件拼装你的页面。

2.图层列表

左侧第一列是组件图层列表，你在工作区用到的所有组件都在这个图层列表里，工作区选中某个组件，这个列表里也会对应的显示被选中的组件，列表里上下拖动改变顺序，可以控制工作区组件谁在上面谁在下面。

需要注意的是，由于一个大屏界面往往需要展示大量的数据，也必然会使用大量的组件，所以有必要在这里对组件进行命名和分组，这样能够帮助你很好的管理页面内各个区域的内容。图层列表上方的几个按钮（箭头所指的），是控制图层列表展示和隐藏的，隐藏后能够节省工作区的面积，方便创作。

3.组件列表

第二列是组件列表，这里包含了DataV提供的所有组件，你可以按需选用，包括丰富多样的图表、功能强大的地图、各种文本数字和轮播列表，还提供了第三方组件（另外订购的，我还没用过）。直接拖动组件到工作区你想放置的位置即可。

4.组件配置区

最右侧是单个组件的配置区，包括样式配置、数据配置、交互配置，这部分包含了强大的配置功能，是需要大家长时间认真摸索的。请留意下图中“Tab列表”后面的黄色小图标，点击之后可以进入该组件的说明文档，每个组件均有一个说明文档，能够给你提供相关的使用帮助。

举个例子

如下图，左侧的轮播列表，选中之后右侧出现对应的配置内容，包括图表尺寸设置、行数、列数、表头的背景色、文字大小和颜色、每列宽度占比、序号的样式，滚动方式等等，都能够进行配置，只要耐心点，你完全可以调整出和设计稿一样的效果。

样式调好了就要配置数据了，右侧配置信息切换到数据项之后，可以看到当前默认的示例数据，点击“配置数据源”，即可对数据进行配置。

如果没有后端同事提供接口，你可以使用静态数据，把示例中的静态输入修改为自己的模拟数据即可，需要注意的是，要严格按照示例修改，只改引号内的黄色文字，我们都知道代码是个严谨的东西，错了一个标点或者空格，都会导致轮播列表无法显示。

如果你有后端同事配合，可以选择“API”，让后端同事们按这个数据格式提供接口，同样的，接口返回的数据也一定要严格依照这个格式。当然，如果你们的数据库中的字段命名和这个不同，那没有关系，只要在上一步配置样式的时候，修改每一列对应的字段名称就好了。

对于系统组件确实实现不了的功能，可以使用iframe组件，嵌入自己开发的前端网页，展示相应的内容。

看到这里，你已经具备了使用DataV的入门知识，更多丰富的功能留待使用的时候探索吧，可以说DataV是设计师、产品经理、后端开发们的一件利器，如果你的项目有需要不妨试一试。此外，上文中只提到了其最简单的使用方法，DataV还支持本地部署等能力，功能强大。

DataV还有哪些不足，或者说有哪些不够方便的地方？

①每个独立组件需要单独的数据接口

你用到的每一个需要动态数据的组件，都需要单独提供接口，这意味着一个数据内容种类较多的页面需要数量巨大的接口，而采用传统前端开发的方式，很多数据可以通过一个接口给出来。例如：你要展示一个小区的用电情况，包括总的电表数、在线电表数、总用电量，自己前端开发的话，后端提供一个接口，包含这三个数据即可，但使用DataV开发，三个数据需要用三个组件，也必须分三个接口提供数据。

②交互方式少，不支持弹窗、菜单切换等交互

DataV的大部分组件是没有交互事件的，且支持交互的组件，其交互的创建也较为复杂，如果你需要的是一个需要深度交互的可视化界面，最好只用DataV做前期验证，最终还是选择自己团队前端开发吧。

③图形组件匮乏

如果你想像PPT或者Word一样插入图形，做些效果，那很抱歉没办法做到，即便是个简单地背景色都不行。当然这并不是什么大问题，一切花里胡哨的内容，全部切成图片放进去吧。顺便提一句，DataV的图片组件支持.gif格式，所以为了让页面更酷炫，大可以多用些.gif格式的动图（你也只能用动图了）

④不能设置页面加载时的背景图

使用DataV制作的页面发布后，打开链接的加载过程，默认是DataV的动图，且不支持更换，对于面向客户的产品，这可能是个问题。