dataV实现扇形图轮播

2019年3月11日

项目要求用dataV做一个大屏。
其中扇形图需要实现自动轮播的效果。举个例子：先播放A酒店的评论，2秒后播放B酒店的数据，再过2秒播放C酒店的数据。见下图：

初次使用datav的我一筹莫展。后来看了官方文档介绍了回调参数id,知道了怎么用回调参数id来实现自动轮播的效果。具体见下面分析：
1.首先往画板中添加一个叫时间轴的组件。

在画板中长这个样子：

在右侧的数据设置中这样设置：

注意在交互中设置好回调参数的名字，这里设置的是income：

2.往画板中添加扇形统计图。

在右侧数据设置菜单中选择数据源类型为数据库，写好SQL语句。我的数据库有4个字段：id、h、z、c。注意需要添加数据过滤器处理数据库返回的数据，如下:

3.隐藏时间轴组件，预览效果（先出现第一张图、2秒后出现第二张图、4秒后出现第三张图）：

dataV实现扇形图轮播相关推荐

bxSlider——一个精悍的拥有一大波焦点图轮播滑动特效的Js程序
打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网:http://bxslider.com/ ****** ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
js之焦点图轮播特效
js之焦点图轮播特效一.原理介绍焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
CSS3动画实现背景图轮播
CSS3动画实现背景图轮播利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
allinone rotator演示40种不同的焦点图轮播
[img]http://www.sucaihuo.com/jquery/2/249/big.jpg[/img] allinone 有15种类型,16 种过渡效果.支持文字左右上下四个方向的动画效果.支 ...
jQuery焦点图轮播特效插件bxslider，使用说明及免费下载四川智汇蓝图整理带bxslider免费下载地址
这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...
android画廊效果的轮播图,轮播图（3d画廊效果）
首先需要将轮播图的依赖导入 implementation 'com.github.xiaohaibin:XBanner:1.6.1' 接下来就是在项目目录下bulidgradle中导入(allproj ...
php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...
qt 动画顺序轮播图轮播图
Show time! 简单来说,就是一个轮播图. 切换的时候是有动画的. 点击下面的按钮可以切换动画. 图片可以是很多张很多张的,但显示在窗口上的只有三张,但它们的顺序是不会变的. 如果能直接有qml ...

dataV实现扇形图轮播

dataV实现扇形图轮播相关推荐

最新文章

热门文章