网站留言 | 网站推荐 工具123导航,共收录全网5888个工具
当前位置:网站首页 > 常用工具 > 正文
datav工具(datav怎么生成图)

datav工具(datav怎么生成图)

  • 网站名称:datav工具(datav怎么生成图)
  • 网站分类:常用工具
  • 收录时间:2021-10-21
  • 网站地址:

进入网站 查询SEO

“datav工具(datav怎么生成图)” 网站介绍

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

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

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

DataV到底能做什么?

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

怎么获取账号?

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

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

datav工具(datav怎么生成图)

使用方法简介

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

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

datav工具(datav怎么生成图)

1.工作区

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

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

2.图层列表

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

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

datav工具(datav怎么生成图)

3.组件列表

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

datav工具(datav怎么生成图)

4.组件配置区

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

datav工具(datav怎么生成图)

举个例子

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

datav工具(datav怎么生成图)

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

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

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

datav工具(datav怎么生成图)

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

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

DataV还有哪些不足,或者说有哪些不够方便的地方?

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

datav工具(datav怎么生成图)

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

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

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

③图形组件匮乏

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

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

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

datav工具(datav怎么生成图)

取消回复欢迎 发表评论: