实践开发DataV大屏遇到的动态效果

本文涉及的产品
数据可视化 DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 做大屏的时候,最重要的还是效果,各种动效都是必不可少的,动态效果美观才会有超好超酷超炫的视觉效果

制作大屏时免不了要做一些交互操作来实现动态效果,我遇到过的动态效果大概有以下几种

1.数字翻牌器动态效果,每隔设定的那一段时间自动回调更新数据。

1.png

1.1 数据翻牌器回调数据

     2.有一些组件就是自带动态效果的,如果有动态需要可以优先考虑这种组件,轮播饼图,轮播列表,轮播列表柱状图都是我们常用的轮播组件。

2.png

2.1轮播饼图

3.png

2.2 轮播列表

4.png

2.3 轮播列表柱状图

3.实现动态效果免不了的就是要使用定时器,例如:要求每隔几秒时间饼图的数据就要来回切换,就需要在蓝图编辑器中使用定时器来实现切换操作。

5.png

3.1 先显示

6.png

3.2 后显示

4.地图动态效果,例如:实现地图数据不断轮播操作

用一个小组件接收地图数据,再用另一个组件获取地图api(把数据库中地图数据转化成我们要的数据字段),再把获取到的数据导入到地图中的子组件里(下图中使用的地图子组件是柱形图和区域热力图),用来动态显示数据的轮播变化,导入数据的操作要在蓝图编辑器里进行。

7.png

4.1 地图动态轮播效果

 

5.弹框效果,有些组件有自带的hover或者点击弹框(例如:柱状图、折线图等),在蓝图编辑器中有些组件能通过hover或者点击触发某种事件,这样就可以通过触发导入数据控制弹窗组件的显隐,来实现弹框效果

8.png

5.1 自定义弹框效果

基本上大部分的动态效果都是在蓝图编辑器里实现的,所以玩转蓝图编辑器可以帮我们解决很多问题。

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
1月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
249 2
react+datav+echarts实现可视化数据大屏
|
1月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
392 1
|
1月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
209 0
|
1月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
155 0
|
10月前
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
603 0
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
990 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1573 0
使用阿里云dataV实现大屏自动轮播
|
JSON 编解码 监控
使用dataV还原销售实时监控大屏
使用dataV还原销售实时监控大屏
441 0
使用dataV还原销售实时监控大屏
|
数据可视化
宜搭&DataV在一起啦!宜搭大屏可视化正式全量上线
● 2021年10月,随着宜搭 3.0 的正式发布,为了让钉钉上的每一个企业数字化的工作方式被看见,在云栖大会上,宜搭在酷数据方面,正式“牵手”DataV,发布了宜搭大屏的能力; ● 2021年12月,宜搭 & DataV在产品侧充分融合无缝衔接,现,正式面向宜搭全量付费用户开放,真正让宜搭用户一键掌握专业炫酷的数据可视化表现力!
3622 1
|
JSON 监控 数据可视化
使用DataV模板搭建企业销售实时监控大屏
快速学习使用DataV模板搭建企业销售实时监控大屏
873 0
使用DataV模板搭建企业销售实时监控大屏