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

项目概述

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

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

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

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

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

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

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

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

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

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

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

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

项目实施

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

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

如图：

该产品一共有3种报价：

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

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

下面开始制作环节：

屏幕大小1000*496

可视化样式设定

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

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

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

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

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

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

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

 

连接数据源

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

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

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

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

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

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

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