这个几个DataV小技巧,教你如何避坑。

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 现在越来越多项目使用datav了,但是datav坑点有点多,而刚刚接触datav的你可能并不知道,一些隐藏的功能特性。如果了解了这些特性,可以让你避开很多坑点,节省开发时间。

现在越来越多项目使用datav了,但是datav坑点有点多,而刚刚接触datav的你可能并不知道,一些隐藏的功能特性。如果了解了这些特性,可以让你避开很多坑点,节省开发时间。

(PS)成组:成组时datav的一个功能,是把多个组件或组,成组。相当于模块化,达到统一控制和管理的效果。图标是一个文件夹的图标;
蓝图:类似节点编程。

1、隐藏特性一:新增组件在成组的图表位置区域内就入成组不会打乱成组的图表尺寸和图表位置
我觉得很多同学刚接触datav时,都会遇到很糟心的事情。那就是当你在编辑大屏,已经基本完成了一个模块时,突然来了新需求需要往里面新增组件。可是无论你左侧的图层和组件层怎么选中怎么操作,新增的组件并不会直接在你的成组里加,而是直接在图层的最外层(最上层)。好,这时候你觉得没关系,把新增的组件拖拽进成组里就好了。

但是这时候不好的事情发生了,组和组里面的组件位置和尺寸全变了,这并不是你想要的,你被迫去全部修改了一遍,是不是觉得很糟心。其实,你只要记住一点就可以避免这样的事情发生。那就是在你每次拖拽新组件进入组里前,先把新增的组件挪到组所在的区域范围内再拖拽进组,组和组里的组件位置和尺寸就不会发生变化。

2、隐藏特性二:删除不可回退,回撤不好用
马有失蹄,人有失足。人总有出错的时候。当你不小心操作失误的时候,你下意识的按下CTRL+Z,还好,回退了。你误以为datav原来还有回退功能啊。其实不然。当你再按下一次CTRL+Z时,你就会发现。组件只会在这两个步骤发生改变,并且只是位置和尺寸的变化。
这只是小事情。如果你经历过一天中发生过4次需求变更,你删除的组件回不来了。那你绝对会痛苦哀嚎甚至怒而拍案口吐芬芳,想死的心都有了。所以,删除组件是高危操作,需要慎重,特别是大模块删除。

3、隐藏特性三:快照版本只记录发布的版本
当你看到上面那一段话,你会发出疑问:难道datav没有版本管理吗?有,但是并不完善。datav有一个快照管理功能,会记录你发布的节点,你可以选择覆盖新节点,也可以选择成为最新的节点。你可以选择任何一个快照版本成为当前的发布版本。但是,你不知道的是,快照版本只是发布的版本。而你编辑的状态永远只会记录你最新的状态。删除了就没有了,你不能像git一样切到某个历史版本进行编辑。意思就是你不能去到某个快照版本进行编辑。

4、隐藏特性四:右键蓝图空白处,可以选择取消所有的打印日志
在蓝图编辑中,避免不了需要对某个交互进行调试预览,输出事件的日志。而你可能会在调试完后忘记取消,跟你写代码总是忘记删除调试语句console.log和System.out.print一个道理。在这密密麻麻的蓝图里看着这么密集的线你都要头晕了,你早已经不记得在哪根线上使用了日志输出,界面上也没有任何记录和提示。别慌,这时你只要右键空白处就可以选择全部取消蓝图节点的打印日志了。不会吧?不会吧?你不会真的一根线一根线的去找吧?

5、隐藏特性五:执行蓝图之前,必然先执行数据过滤器,如果你有设置了数据过滤器的话
有时候,你做的datav项目里只有前端和数据组同学,是的,没有后端,没有API接口。不要惊讶,datav的数据源其实可以是静态的csv文件还可以是数据库,没有后端和API并不惊奇。但是总会有得有失,节省了人力,数据格式化工作少不了就压在前端身上了。一个SQL有时候并不能直接给你能用的数据格式,跟组件所需的格式完全匹配不上。这时,你需要写数据过滤器,进行数据转化。在复杂的交互中,你需要在跟组件交互后获得某个效果,但是需要给另一个组件导入不同的数据格式。这时候,你会发现你交互得到数据的数据源都是经过数据过滤器格式化过的。这时候,你该头疼考虑新的实现方案了。

6、隐藏特性六:数据过滤器可以写html
这一点好像在datav的文档上并没有提到。或许很多人误以为,过滤器只是请求到数据后,对数据进行处理的一个回调方法而已。其实,这里还是可以写html,意味着你可以写样式了。好处是什么呢?举个例子,当产品经理要你实现一个轮播列表,这个列表的某行或者某列要根据某个变量值展示不同的颜色,可是这个组件并没有提供这样的属性给你设置。怎么办呢?假设你的SQL或接口返回的数据是这样的:[{ name: '指标名称1', value: 0}, {name: '指标名称2', value: 1 }],你要实现当值为0的时候该行变红展示。那么你的过滤器可以这么写:
过滤器一.png
7、隐藏特性七:蓝图里导入数据接口动作不接收html
看完第六点你肯定大喜过望,以为datav其实还是很好用的嘛。那么接下来这点会把你打回原形,你还是太年轻了。假如产品经理,让你实现这个列表的同时还需要你在点击某行的时候,去跟另一个组件进行联动。在蓝图中,轮播列表组件确实带有点击行的这个事件方法,如图:
蓝图.png
也确实在点击事件中拿到数据
数据.png
好,连线另一个组件节点导入接口数据,预览测试。好,这时候你懵了,不是已经传数据过来了吗?为什么什么都不展示?是的,蓝图节点导入接口数据这个动作不接收html。这个时候你不得不吐槽:“什么玩意,啥也不是”。绕了半天又回到原点,相当于没实现。说实话datav由于局限性非常大非常多,所以非常能激发你发散思维,激发你的潜力。没事,办法总比困难多(官方吐槽:我差点信了)。其实你可以处理数据过滤器的时候,给对象加一个key, 把这行的原始数据赋值给它就行了。
那么,过滤器可以这么写:
过滤器二.png
然后,蓝图中点击事件通过串行数据处理取到数据data.dataSource。ok,问题解决。
到这里,不得不说,这全文让你看了都觉得一波三折,堪比小说情节跌宕起伏。 那么,我在这里一问,如果最后不是简单的导入数据接口就能实现,同样需要特殊样式处理怎么办?怎么办?怎么办?重要得事情要问三遍。到这里我都要爆粗口了:"卧槽"。
说实话我也不知道怎么办,我唯一想到得就是蓝图与hook相结合,有了蓝图,不代表就能完全舍弃hook。可是,轮播列表里"行"并不是子组件啊,它没有组件id, hook里没办法stage.get() 无法获取到Dom节点,麻烦事情来了。好了,口水干了,不说了。

如果你有方案记得戳我,互相学习共同进步。如果我说的不对,也请指正,谢谢。

相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
消息中间件 存储 NoSQL
一文读懂Kafka Connect核心概念
Kafka Connect 是一种用于在 Apache Kafka 和其他系统之间可扩展且可靠地流式传输数据的工具。 它使快速定义将大量数据移入和移出 Kafka 的连接器变得简单。 Kafka Connect 可以摄取整个数据库或从所有应用程序服务器收集指标到 Kafka 主题中,使数据可用于低延迟的流处理。 导出作业可以将数据从 Kafka 主题传送到二级存储和查询系统或批处理系统进行离线分析。
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
8883 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
11月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
6467 1
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
1435 2
Vue3使用echarts仪表盘(gauge)
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
1505 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
JavaScript 测试技术 API
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
|
消息中间件 存储 负载均衡
RocketMQ消费者消费消息核心原理(含长轮询机制)
这篇文章深入探讨了Apache RocketMQ消息队列中消费者消费消息的核心原理,特别是长轮询机制。文章从消费者和Broker的交互流程出发,详细分析了Push和Pull两种消费模式的内部实现,以及它们是如何通过长轮询机制来优化消息消费的效率。文章还对RocketMQ的消费者启动流程、消息拉取请求的发起、Broker端处理消息拉取请求的流程进行了深入的源码分析,并总结了RocketMQ在设计上的优点,如单一职责化和线程池的使用等。
RocketMQ消费者消费消息核心原理(含长轮询机制)
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
552 0
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
4620 0