实践DataV大屏开发中遇到的问题-阿里云开发者社区

开发者社区> 武汉-樊美杉> 正文

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

简介: DataV是实现数据可视化的应用,通过图形化的界面轻松搭建专业水准的可视化应用,但是再好的应用在使用过程中不免也会出现一些小问题,对前端开发的精准性有着一些影响,如果需要用到的组件没有的样式或者没有想要的组件可能就会影响页面开发效果,这时就需要使用一些小技巧,方便前端人员实现设计稿中的样式
+关注继续查看

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

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

1.png

1.1 tab列表边框圆角组成

2.png

1.2 tab列表样式

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

1)在画布中回调id

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

3.png

2.1 tab列表操作

4.png

2.2 变量在sql中写法

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

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

5.png

2.3 蓝图中切换显隐

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

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

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4620 0
DataWorks OpenAPI企业开发实战-运维监控大屏
本文将会介绍如何通过使用DataWorks OpenAPI、DataWorks开放元数据、DataWorks开放事件消息三大利器搭建企业自己的DataWorks运维大屏。其中DataWorks OpenAPI已经面向所有企业开放商业化,而DataWorks开放元数据、DataWorks开放事件消息还在邀测中。
1056 0
.net开发中自己遇到的问题自己解决的方法总结
     (1)、关于中取指定长度字符显示的方法      最近在用Lucene.net进行全站搜索内容时,对于repeater控件中用获取内容时,由于该取得的内容较长,所以自然而然的想到截取...
856 0
2
文章
0
问答
来源圈子
更多
阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载