dataV实现扇形图轮播

2019年3月11日

项目要求用dataV做一个大屏。
其中扇形图需要实现自动轮播的效果。举个例子:先播放A酒店的评论,2秒后播放B酒店的数据,再过2秒播放C酒店的数据。见下图:
dataV实现扇形图轮播
初次使用datav的我一筹莫展。后来看了官方文档介绍了回调参数id,知道了怎么用回调参数id来实现自动轮播的效果。具体见下面分析:
1.首先往画板中添加一个叫时间轴的组件。
dataV实现扇形图轮播
在画板中长这个样子:
dataV实现扇形图轮播
在右侧的数据设置中这样设置:
dataV实现扇形图轮播
注意在交互中设置好回调参数的名字,这里设置的是income:
dataV实现扇形图轮播
2.往画板中添加扇形统计图。
dataV实现扇形图轮播
在右侧数据设置菜单中选择数据源类型为数据库,写好SQL语句。我的数据库有4个字段:id、h、z、c。注意需要添加数据过滤器处理数据库返回的数据,如下:
dataV实现扇形图轮播
3.隐藏时间轴组件,预览效果(先出现第一张图、2秒后出现第二张图、4秒后出现第三张图):
dataV实现扇形图轮播
dataV实现扇形图轮播
dataV实现扇形图轮播