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

项目概述

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

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

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

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

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

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

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

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

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

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

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

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

项目实施

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

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

如图:

该产品一共有3种报价:

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

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

下面开始制作环节:

屏幕大小1000*496

可视化样式设定

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

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

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

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

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

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

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

 

连接数据源

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

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

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

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

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

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

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

时间: 2024-07-31 20:58:38

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

【流数据与大屏DataV】如何使用DTS,Datahub,StreamCompute,RDS及DataV搭建流数据大屏

如何使用DTS,Datahub,StreamCompute,RDS及DataV搭建流数据大屏   一,数字化大屏的价值 我们的平台销售管理大屏实时数据展示系统,采用了阿里云最新的大数据及流计算技术,将客户的登录信息.设备信息,销售销量.金额,装车系统的客户信息.车辆信息,发运的地理位置.走向等,以飞线图.热力图.点图.传统的柱状图.饼图等多维度的形式展现给企业及相关领导.强大的视觉冲击和高度可视化的图形及数字展示给人带来清晰直观.真实和充满活力的销售数据. 图1 电商平台实施销售数据大屏

【双11背后的技术】双11数据大屏背后的实时计算处理

选自<不一样的技术创新--阿里巴巴2016双11背后的技术>,全书目录:https://yq.aliyun.com/articles/68637 本文作者:藏六  黄晓锋  同杰 1. 双11数据大屏的实时计算架构  1.1 背景 2016年的双11我们的实时数据直播大屏有三大战场,它们分别是面向媒体的数据大屏.面向商家端的数据大屏.面向阿里巴巴内部业务运营的数据大屏. 每一个直播大屏对数据都有着非常高的精度要求,特别是面向媒体的数据大屏,同时面临着高吞吐.低延时.零差错.高稳定等多方面的挑战

11月阿里云 MVP 大数据、安全主题分享月博文集锦

大家好,阿里云 MVP 11月大数据+安全主题分享新鲜出路,快来一睹为快吧!哪些MVP分享的内容最吸引你,你想为谁打call? 我们将开启最具人气内容评选,在MVP博文下发表评论,我们将选取最走心最有价值的评论内容赠送淘公仔抱枕或双肩背包,优质评论人还有机会受邀参加阿里云粉丝区域见面会活动,快行动起来吧! 阿里云 MVP11月主题分享直达传送门: **阿里云 MV 郭翔云--中油瑞飞系统架构师** 看美女架构师如何带你聊各种最前沿的技术话题 聚能聊: [沙特首次授予机器人公民身份,此举为何?]

DataV首次实战分享:教你30分钟创建汽车大屏

先看一下汽车大屏(手机流量慎点!):https://datav.aliyun.com/share/20acd88491367bf262fcb1e862ee8f1c 必备产品:DataV 我是一个技术男,同样也是个汽车爱好者,上个月买了辆的宝马,却发现路上的"宝马越来越多"(⊙﹏⊙)b ...... 我喜欢钻研技术,也喜欢钻研汽车,最近研究了一下数据可视化,发现用datav可以玩出一些花样,这次就分享一下我做汽车数据大屏的经验. 没数据是不行的,首先七拼八凑了一些汽车数据,然后.....

用好DataV可视化大屏,紧抓商机,为“云供应链”做精细运营

"要解决这个问题,必须搭建一块实时数据看板" 3年前,计算机博士邓毓博辞去高校教职,创业做起"互联网+牛肉面"的生意--生产标准化的速食牛肉面,放上淘宝售卖.他的品牌"牛大坊",刚开张第一年就卖出了20多万份面,但他并不满足于此. 邓毓博的终极理想,是用"云供应链"整合牛肉面产业的各个环节,革新线下店铺的经营模式,让兰州牛肉面与麦当劳.肯德基一样,标准化.2016年下半年,邓毓博带着这个想法找到好友老财,老财经营的包菜网络是家

DataV 2015双十一媒体大屏回顾&amp;技术分享

今年在多个部门共同努力下,阿里集团在2015水立方双十一媒体中心立起了一块宽21米,高10米的LED大屏.DataV 数据可视化小组有幸在这么大一块画布上尽兴创作,并且在这个项目中小组第一次尝试使用了DataV数据可视化引擎来搭建所负责场景,这样的机会实属不易,所以想把其中的点点滴滴和大家分享. 背景简介 先呈上现场效果的几段视频,热个身. 今年的媒体大屏幕分为三大板块,分别是总览大屏,全球大屏,城市大屏.每一个大屏幕都有自己的主题,总览大屏保留了2014年基本的信息点,全球屏是对于今年全球狂欢

【阿里云MVP月度分享】如何基于MYSQL做实时计算?

有时候我们会有这样的场景,在某个接口中,数据已经很规范地存入到一张的MYSQL表中,现在想对这样的数据做一些实时或准实时处理,比如数据多模式存储.异步准实时业务流程.业务实时监控等.接口中处理流程如下: 最原始的方法,是改动业务代码,将这些额外的处理流程作为同步流程,在更新MYSQL数据之后同步执行.如下图: 但是这样的处理流程可能会越来越多,如果一直作为同步流程,整个接口会变得越来越庞大.并且耗时越来越长.出问题的风险越来越高. 所以我会考虑异步处理流程.如果可以改动一下代码,将数据额外写一份

photoshop设计电视机主题UI图标效果制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计电视机主题UI图标的制作教程. 教程分享: 首先,我们看看原图,一个400*300的小图.   新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块.   我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示. 在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变

【首发】Velocity大会主题分享《高性能MySQL》

0.导读 有幸受邀参加O'Reilly Velocity China 2016 Web 性能与运维大会,做了<高性能MySQL>的主题分享. 1.分享PPT 本次分享的keynote文档已上传到百度云盘: https://pan.baidu.com/s/1bpcKfP9,欢迎转存及转发哈. 介绍从硬件到操作系统.MySQL参数选项再到SQL开发设计,如何让MySQL保持高性能,主要内容有: 1.  MySQL性能瓶颈定位分析 确定MySQL层瓶颈 确定系统层瓶颈 确定硬件层瓶颈 2.  优化M