实践DataV大屏开发中遇到的问题

DataV是实现数据可视化的应用,通过图形化的界面轻松搭建专业水准的可视化应用,但是再好的应用在使用过程中不免也会出现一些小问题,对前端开发的精准性有着一些影响,如果需要用到的组件没有的样式或者没有想要的组件可能就会影响页面开发效果,这时就需要使用一些小技巧,方便前端人员实现设计稿中的样式,我在前一段时间大屏开发中遇到了很多问题,同时也有了一些心得和解决问题的小技巧,例如:

1.tab列表在DataV中是不能设置圆角和边框的,这样可能会影响样式的美观程度,而且无法完全满足设计稿样式,要想使tab列表外面有边框和圆角可以考虑在tab列表外部加上装饰框,装饰框本身是可以设置圆角的,这可以解决tab列表不能设置圆角的问题,而使用大框套小框的方式即可以让tab列表轻松拥有边框。

实践DataV大屏开发中遇到的问题

1.1 tab列表边框圆角组成

实践DataV大屏开发中遇到的问题

1.2 tab列表样式

2.交互操作:DataV中主要有两种交互方式,

1)在画布中回调id

 步骤:1.tab列表中点击上方第三个按钮 2.勾选启用栏 3.id字段绑定到变量,给变量赋一个值 4.在需要通过tab切换的组件中使用该变量

实践DataV大屏开发中遇到的问题

2.1 tab列表操作

实践DataV大屏开发中遇到的问题

2.2 变量在sql中写法

2)在蓝图编辑器里操作,通过这两种方式可以实现tab列表和单选框等的交互切换操作,点击单选框选项使得样式来回切换,这可以在蓝图编辑器中进行(在DataV中的交互操作都是在蓝图编辑器中操作),两个选项的时候只需串行数据处理连接样式切换显隐即可(如:

省市地图,全国地图的切换),而选项多的时候可以序列执行节点,首先是所有样式隐藏,然后连接多路判断写出每个选项对应的判断语句,最后当点击某一选项的时候该选项对应的样式显示(如:点击选项时对应的选项外边框样式的变化,点击不同tab列表或单选框时不同样式的切换)。

实践DataV大屏开发中遇到的问题

2.3 蓝图中切换显隐

3.使用画布编辑器时要注意层级关系,该置底的置底,该隐藏的隐藏,刚开始玩DataV的时候经常遇到本来样式好好的,一到预览页面就不能用了,比如:我在使用地图自带的交互时,明明在画布编辑器已经打开了,但是预览的时候又不能拖拽地图了,结果苦恼了半天才发现页面边框的样式是个单张图片被我放在中间,而地图被我放在了最底层。

4.写大屏的时候一定好划分模块,而且模块里的组件应该逐层包裹,这样调整模块内部样式的时候不至于牵一发而动全身,只想调一个小样式,结果导致模块整体样式推翻,多推翻几次就长记性了,别问我怎么知道的。

5.做大屏的时候,最重要的还是效果,各种动效都是必不可少的,只有组件都动起来才会有超好超酷超炫的视觉效果,比如:翻牌器实时数据更新,地图柱形图定时轮播,轮播图轮播列表的使用,tab列表轮播切换等,这些全都一起动起来时,我们想要的酷炫大屏就基本完成了。

6.业务趋势组件,如果不想在下降时value是负数,可以使得base大于value值,也可以使符号是下降的而值是正数。

以上算是我在应用DataV开发时的一些浅薄的经验总结吧,之后可能有更加深入的实践经验总结时再进一步的谈谈数据切换交互等问题。

上一篇:工业通信网络领域推荐性国家标准发布


下一篇:FotoVision学习手记(2)