【MVP月度主题分享】通过dataV制作实时数据大屏

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
数据可视化DataV,5个大屏 1个月
简介: 一个互金公司拼的就是时间,做晚了基本就败了,那么如何快速实现上图效果呢?今日教大家如何快速展示数据可视化。

项目概述

临近年底,出总结的时候又到了,在一个夜黑风高的夜晚,产品老大问了我几个问题

* 如何向用户展现咱们的技术实力?

* 如何跟其他用户一起互动?

* 之前的数据专题页面有什么可以提升的?

数据专题页的价值在于通过披露平台的用户数据、投资数据、兑付情况等数据实时向投资人披露平台的全方位情况。

定量化的向投资人展示平台的发展情况,增强投资人对我们的认知和信心。

但是现在我们可能更需要在数据表达的层面使用更多样化的形式为投资人展示数据。

包含但不限于图表、动效、地图等效果,让投资人更直观、清晰的从数据唯独了解平台的发展情况。


9c96670f6cf9894fc10291c5a2ef5b7f0cf2948b



e2b3dd9a8ab798d620c7e80f461778a7b68e3905


       目前传统的展示功能是客观的反映投资用户的总体数据和地域分布,而更新后的动态数据仪表盘,能够突出每个时间点的投 资人数、投资金额和地域分布,更好的显示出实时更新的数据,具备可观性和真实性。

       如今的数据可视化致力于用更生动、友好的形式,即时呈现隐藏在瞬息万变且庞杂数据背后的业务洞察。通过交互式实时数据可视化视屏墙来帮助业务人员发现、诊断业务问题,越来越成为大数据解决方案中不可或缺的一环。

      我们现在通过实时数据分析资金流向,运营指标,更能与用户建立紧密连接。



我们先后做了2个大屏一个与用户互动,展示实时数据,一个分析投资情况提供基础运营指标。


48d8075bf961a28b6102af55dc567858e8c7dc7a




项目实施

一个互金公司拼的就是时间,做晚了基本就败了,那么如何快速实现上图效果呢?今日教大家如何快速展示数据可视化。

首先进入熟悉的阿里管理控制台,在大数据(数加)栏目找到DataV数据可视化,

如图:de85820a2a04322fc98f08d8cd1ed8509e3cf082



该产品一共有3种报价:

  • 免费版
  • 基础版—51元/年
  • 企业版—5100元/年

记住这里不要犹豫,一定要选择企业版,希望读者永远不要体会到为什么。如果你实在掏不起,那么我想你可以考虑找个投资平台(近在眼前)刷刷钱。

下面开始制作环节:

屏幕大小1000*496

ed4baf8835994ce69e6cbc8ab83061fc1139d64d



可视化样式设定

放置2D平面地图,个人认为2D平面地图是最实用的地图空间。设置全局变量让其显示中国地区:

8a696e34d6358bf7295fa83a3c5d36e0bc2f31f2


此时的地图与设计稿差异甚大,那么如何调整呢?所有地图的差异化都是由子组件形成的,这里沿用了3个子组件。


41891021cc074550637594a57248aa2a1f6b57c0


底图层如果需要浅色调的话基本只能选“高德电子地图”瓦片。

右边白色区域需要一个白色背景框,选中辅助图形->自定义背景框,此时大家会发现,该框内部是透明的,被地图覆盖住了,那么如何调整控件件的覆盖关系呢?这里有个类似PS图层的功能


305ba95700b1bba3db267bc87912f8a520225b45




切换图层位置后把背景色设置成#ffffff就是全白底层了。在底色中逐个添加文字->通用标题。其实这里可以考虑用”轮播列表”,笔者认为如果不是非要突出滚动效果的话,轮播列表可自定义的空间不大。那么问题来了,如何实现变量变颜色的通用标题呢?小编在这里卡了一下,以为用三个标题就能拼凑,结果意识到,在动态长度的数值下无法改变前缀的空间右对齐位置。

对于这种需求,完全可以直接使用指标->数字翻牌器,设置右对齐,#ee5b5a颜色字体,前缀后缀即可。

最后发现,少了图例,其实DataV的图例自定义空间有点小,这里使用指标->状态卡片来代替。所以,能做出什么样的图例就能做出什么样的地图点,图例的效果也限制了地图点的发挥,因为总不能接受图例和地图点样式差异过大是吧。

 

连接数据源

基础的样式做完,下面介绍下如何填充数据,基本上最常用的方式是API,数据库,数据代理服务。

3a6907971f6de7daead1eacb0efe35fcd8e0fedf



按照便捷和安全性选的话,笔者认为数据代理服务最优,相关文档可见https://yq.aliyun.com/articles/55879。如果使用数据库作为数据源的话,建议MySQL,至少在初期MySQL支持比较好。

004bcbe3011b8a4f1df194da21800b63a42464a7


可以看到4个字段名,如果你数据库表中字段一一对应的话select * 即可识别,如果有个别名称有映射关系可以简单修改下SQL如:SELECT money as value,prefix,suffix FROM datav_rolling where id=1。

提充后等待状态显示匹配成功后,千万别忘了勾选自动更新功能


e5769c756e70065a6186c7fd6a20f8bab1f84e02



把所有控件动态读取数据的方式都配好后可以发布并预览,如图:


c1de3e0a5d072570a32d4c54e984f942c13c411a



整体架构基本完成,每一个控件都具备不少调参,可以逐渐细化自己的前端。


最后再分享一个内部资金指标的大屏图例:


8b96cc44d72bf2e7999df2b2a8276654edf816c0


相关实践学习
Github实时数据分析与可视化
基于Github Archive公开数据集,将项目、行为等20+种事件类型数据实时采集至Hologres进行分析,并搭建可视化大屏。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
2月前
|
人工智能 数据可视化 定位技术
DataV AI助手小技巧-如何制作PPT数据地图
“数据地图”是PPT汇报地区业务数据的最佳形式之一;以往制作数据地图需要用户有一定的编程和数据处理基础,制作门槛较高;随着DataV整合通义千问大模型能力之后,不懂编程和设计的用户也可以借助AI助手“零代码”制作数据地图,真正实现了人人可用的地图数据可视化。 进入大模型AI时代,人人可以变成职场跨界多面手!
11141 2
DataV AI助手小技巧-如何制作PPT数据地图
|
4月前
|
SQL 数据可视化 定位技术
见证数据的视觉奇迹——DataV Atlas
阿里云DataV的DataV-Atlas是一款专注于地理数据可视化的工具,提供时空数据分析和地图发布功能,适合快速创建地图并分享。与ArcGIS Server相比,DataV.GeoAtlas更侧重于数据可视化和云服务集成,适合非专业用户,而ArcGIS Server是全面的GIS服务平台,适合复杂分析和定制化应用。用户可通过阿里云免费试用DataV-Atlas,体验包括数据上传、地图制作和分析在内的功能。
见证数据的视觉奇迹——DataV Atlas
|
3月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
5月前
|
Prometheus 监控 Cloud Native
用 DataV 展示 Prometheus 数据
本文介绍了如何将 Prometheus 数据接入 DataV 进行可视化展示。如果使用的是阿里云可观测监控中的 Prometheus 实例,或者自建的 Prometheus 开放了公网可访问的 HTTP API,那么可直接通过 API 将数据接入 DataV 展示。
322 0
|
5月前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
56 0
|
5月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
407 2
react+datav+echarts实现可视化数据大屏
|
5月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
584 1
|
5月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
344 0
|
5月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
227 0
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
705 0
下一篇
无影云桌面