天天看点

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

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

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

蓝图:类似节点编程。

1、隐藏特性一:新增组件在成组的图表位置区域内就入成组不会打乱成组的图表尺寸和图表位置

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

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

(拖拽前一)
           
这个几个DataV小技巧,教你如何避坑。
(拖拽前二)
           
这个几个DataV小技巧,教你如何避坑。
(拖拽进来)
           
这个几个DataV小技巧,教你如何避坑。
这个几个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的时候该行变红展示。那么你的过滤器可以这么写:

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

7、隐藏特性七:蓝图里导入数据接口动作不接收html

看完第六点你肯定大喜过望,以为datav其实还是很好用的嘛。那么接下来这点会把你打回原形,你还是太年轻了。假如产品经理,让你实现这个列表的同时还需要你在点击某行的时候,去跟另一个组件进行联动。在蓝图中,轮播列表组件确实带有点击行的这个事件方法,如图:

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

也确实在点击事件中拿到数据

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

好,连线另一个组件节点导入接口数据,预览测试。好,这时候你懵了,不是已经传数据过来了吗?为什么什么都不展示?是的,蓝图节点导入接口数据这个动作不接收html。这个时候你不得不吐槽:“什么玩意,啥也不是”。绕了半天又回到原点,相当于没实现。说实话datav由于局限性非常大非常多,所以非常能激发你发散思维,激发你的潜力。没事,办法总比困难多(官方吐槽:我差点信了)。其实你可以处理数据过滤器的时候,给对象加一个key, 把这行的原始数据赋值给它就行了。

那么,过滤器可以这么写:

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

然后,蓝图中点击事件通过串行数据处理取到数据data.dataSource。ok,问题解决。

到这里,不得不说,这全文让你看了都觉得一波三折,堪比小说情节跌宕起伏。 那么,我在这里一问,如果最后不是简单的导入数据接口就能实现,同样需要特殊样式处理怎么办?怎么办?怎么办?重要得事情要问三遍。到这里我都要爆粗口了:"卧槽"。

说实话我也不知道怎么办,我唯一想到得就是蓝图与hook相结合,有了蓝图,不代表就能完全舍弃hook。可是,轮播列表里"行"并不是子组件啊,它没有组件id, hook里没办法stage.get() 无法获取到Dom节点,麻烦事情来了。好了,口水干了,不说了。

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