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

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 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开发时的一些浅薄的经验总结吧,之后可能有更加深入的实践经验总结时再进一步的谈谈数据切换交互等问题。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
8月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
569 2
react+datav+echarts实现可视化数据大屏
|
8月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
964 1
|
8月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
591 0
|
8月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
324 0
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
750 0
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
1547 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1767 0
使用阿里云dataV实现大屏自动轮播
|
6月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
7月前
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
604 3
|
数据可视化 Windows
DataV 可视化演播厅,让汇报进入“一秒”时代
可视化演播厅是 DataV 7.0 版本中新增的重磅功能,带来全新的数据汇报演示体验。
DataV 可视化演播厅,让汇报进入“一秒”时代