向金牌出发 | 用 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 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
12月前
|
人工智能 固态存储 iOS开发
5分钟搞定Photoshop 2025安装:官方下载+许可证激活避坑指南
Adobe Photoshop 2025 是 Adobe 公司推出的最新图像处理软件,广泛应用于平面设计、摄影后期和 UI 设计等领域。其核心功能包括智能 AI 工具(一键抠图、生成填充等)、高效工作流(优化图层管理与色彩调整)、跨平台兼容(支持 Windows 11 和 macOS 15)以及云协作功能(与 Adobe Creative Cloud 集成)。本文详细介绍软件的安装流程、系统要求、正版激活方法及常见问题解决方案,并提供扩展学习资源,帮助用户更好地掌握这款强大工具。
39810 3
|
6月前
|
人工智能 API 开发者
图文教程:阿里云百炼API-KEY获取方法,亲测全流程
本文详细介绍了如何获取阿里云百炼API-KEY,包含完整流程与截图指引。需先开通百炼平台及大模型服务,再通过控制台创建并复制API-KEY。目前平台提供千万tokens免费额度,适合开发者快速上手使用。
5410 5
|
前端开发
Vue3 大屏数字滚动效果
Vue3 大屏数字滚动效果
657 0
|
SQL JSON 数据可视化
基于 DIFY 的自动化数据分析实战
本文介绍如何使用DIFY搭建数据分析自动化流程,实现从输入需求到查询数据库、LLM分析再到可视化输出的全流程。基于经典的employees数据集和DIFY云端环境,通过LLM-SQL解析、SQL执行、LLM数据分析及ECharts可视化等模块,高效完成数据分析任务。此方案适用于人力资源分析、薪酬管理等数据密集型业务,显著提升效率并降低成本。
15686 16
|
Web App开发 数据可视化
如何轮播 DataV 大屏
如何轮播 DataV 大屏 当你使用 DataV 制作了足够多的大屏时,一定会冒出一个需求:轮流播放大屏页面,不要怕,一分钟就可以搞定 安装 Chrome 插件 TabCarousel 首先安装神器插件 TabCarousel 使用 安装完成之后,地址栏右侧会出现这么个小图标 。
19700 154
如何轮播 DataV 大屏
|
SQL 数据采集 BI
SQL CASE WHEN语句详解
SQL CASE WHEN语句详解
|
资源调度 JavaScript
布局:px to vw、vh
布局:px to vw、vh
418 0
布局:px to vw、vh
|
Shell 开发工具 git
上传文件到gitee(小白都能学会)
上传文件到gitee(小白都能学会)
5552 13
|
小程序
uni-app微信小程序隐藏左上角返回按钮
uni-app微信小程序隐藏左上角返回按钮
1913 1
|
JavaScript 前端开发
如何在 TypeScript 中使用 async/await?
如何在 TypeScript 中使用 async/await?
629 0