向金牌出发 | 用 DataV 打造你自己的奖牌榜!

简介: 向金牌出发 | 用 DataV 打造你自己的奖牌榜!

刚刚结束的巴黎奥运会,大家肯定都被各种奖牌排行榜刷屏了。“排行榜”作为数据可视化最常见最有用的一种形式,让我们来用 DataV 个人版(只要69.3元/年)拿捏一下!


一个好的🏆排行榜可视化看板有哪些特点?


🌸 好看,必须好看!可以展示图片、配置各种颜色和动效。


🤳🏻 移动端友好!排行榜是最核心的数据之一,随时随地会看,最适合移动端。

数据接入简单!业务部门也能轻松使用。


如何用 DataV 制作一个排行榜?


创建移动看板 - 进入DataV工作台,选择“创建移动端看板”,即可进入移动端编辑器。


搭建排行榜看板 - 与PC端看板编辑器不同,DataV 移动端编辑器提供了专门针对移动端场景多列容器/格子系统,方便各类可视化图表进行排版布局。同时针对移动端设备的特点,DataV 移动端组件进行了性能/视觉优化,在移动端获得更流畅体验。选择“轮播列表”组件,支持丰富的样式外观设置,满足“排行榜”定制化样式需求:


接入数据源 - 搭建完排行榜静态应用之后,接入已经上传的 CSV 数据,并将轮播列表各类字段对应于 CSV 数据源:


动效设置 - 如果排行榜数据很多,为了避免用户翻屏操作疲劳,可以设置自动滚屏效果:


发布测试 - “排行榜”完成样式和数据设置之后,可以预览调试,并测试不同移动设备的展示效果:


至此,一个DataV移动端的“排行榜”应用就开发完成了。除了排行数据展示,DataV 还有更多的数据地图、交互编排、AIGC 等功能,快来试试吧!个人版购买点击「阅读原文」直达

相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
9月前
|
人工智能 数据可视化 JavaScript
上新 | DataV AI 助手已在线
上新 | DataV AI 助手已在线
269 5
|
Linux API 数据安全/隐私保护
一文搞懂:【零基础】易盛9.0API入门二:登陆
一文搞懂:【零基础】易盛9.0API入门二:登陆
313 1
|
SQL 数据采集 BI
SQL CASE WHEN语句详解
SQL CASE WHEN语句详解
|
Web App开发 数据采集 Docker
docker 安装python3.8环境镜像并导入局域网
docker 安装python3.8环境镜像并导入局域网
1134 7
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
2043 1
|
存储 人工智能 移动开发
7zip 命令/编程使用手册
7zip 命令/编程使用手册
1098 0
|
JavaScript 前端开发
如何在 TypeScript 中使用 async/await?
如何在 TypeScript 中使用 async/await?
527 0
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
1184 0
|
数据安全/隐私保护 Unix 芯片
wpa_cli和wpa_supplicant使用,配置无线AP名和密码,静态ip地址
配置静态ip方法分享:通过串口命令行输入如下命令:     1. 添加无线网络接入点(AP) 及其 密码:# wpa_cli -p /data/misc/wpa_supplicantwpa_cli v0.
2546 0
|
缓存 物联网 定位技术
Android引入.so文件的正确姿势以及加载指定CPU架构的so库(android is 32-bit instead of 64-bit)
Android引入.so文件的正确姿势以及加载指定CPU架构的so库(android is 32-bit instead of 64-bit)