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

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

项目概述

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

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

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

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

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

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

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

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


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


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