腾讯云+社区 阅读(11) 评论(0)

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由腾讯云数据库 TencentDB发表于云+社区专栏

一、腾讯云图 数据之美

img

了解腾讯云图之前,我们先来看看数据可视化?

这是星云图,他表示的是QQ同时在线人数,看到这个图大家脑袋里面想到什么?QQ,蓝钻、绿钻、太阳、月亮、上学的时候跟同学聊天,认识默认网友,你会是这众多闪亮星星中的哪一个呢,进一步分析可以看到沿海地区相对闪亮,结合现实情况,沿海地区设备网络相对发达,年轻化程度高,用户活跃等等。这就是数据可视化的魅力,给特定角色在特定场景讲述特定的故事。数据可视化的目的是让数据说话,让复杂抽象的数据以视觉的形式更准确快速的传达

腾讯云图正是一站式数据可视化平台,支持多种数据源,覆盖多个领域模板,拖拽式自由布局,零门槛快速打造专业大屏。说人话,就是说即使我不是专业工程师,也可以使用腾讯云图,把一堆抽象枯燥无味的数据通过屌炸天的方式展示出来。

img

腾讯云图已经接入的客户案例包括:永辉超级物种,艺龙网全国IDC网络出口流量监控,格灵深瞳人脸特征大数据分析等。

永辉超级物种深圳创投店的大屏,是两块竖的大屏,呈现商圈客流热力,分时客流,门店最受欢迎饮品,最受欢迎水果单品等。某日统计到周边商圈客流量超过30万人,最受欢迎的饮品是农夫山泉和可口可乐,最爱的水果是火焰红葡萄。

门店可以直观的观察到周围客流量,以及购物意向,指导门店备货等。

顾客进店也可以立即看到最受欢迎商品,购买到自己满意的东西。

同时可以进一步根据周边环境,顾客消费情况,分析用户画像,深挖更多有价值的数据。

img

腾讯云图把以上专业的有价值的内容模板化,提供出智慧零售行业模板,其他类似场景的用户可以直接使用该模板,快速搭建自己的可视化大屏。

腾讯云图不仅在智慧零售领域,在其他多个领域,也提供了许多行业模板,比如监控领域、政府工作等等。

img

用户也可以根据模板自己根据特定场景定制自己的大屏,腾讯云图提供丰富的组件,有表示对比关系的柱状图、条形图、折线图等,表示构成的饼图、面积图等,表示分布的散点图、直方图等,还有跟地理位置有关的多种地图。这些组件腾讯云图大部分自主研发,也接入echarts等第三方开源组件。

img

大屏设计页面,主要分为工具栏、图层、画布、配置面板(属性、数据)。工具栏、图层、配置面板可以自由收放,让画布区域更大化,让用户能更精确的拖动组件进行沉浸式操作。

跟《三体》里面描述未来世界如出一辙。它这样描述:这个世界到处都是简洁空荡的,几乎见不到任何设施,只有在需要时,设施才会出现,而且是在任何需要的位置出现。世界在被技术复杂化后,正在重新变得简洁起来,技术被深深地隐藏在现实的后面。

二、腾讯云图 方案设计

img

如此酷炫,能让数据说话的腾讯云图具体怎么实现的呢?腾讯云图的主要模块包括:组件库、大屏设计、属性管理、数据管理。 组件库包括基础组件\地图组件\图表组件\装饰组件\文本组件\媒体组件\小部件等,每个组件都有自己的属性定义,通过bundle-loader异步加载。 大屏设计包括工具栏、画布、图层、属性、数据等。 属性管理包括基础组件(比如文本输入框、数字输入框、开关按钮等),复合组件(比如标题组件、位置组件等)、数据映射配置。

数据源包括:静态数据、csv文件、API、腾讯云/公网数据库、腾讯云监控。

img

具体实现过程:画布中一个组件面积图,它由数据、代码、属性组成,通过控制面板调整任何属性或者数据,都可以改变该面积图。使用react redux经典三部曲action,store,reducer实现。当用户改变属性或者数据,会发起 action ,store 会调用 dispatch 方法向某个特定的 reducer 传递该 action,reducer 收到 action 之后执行对应的更新逻辑然后返回一个新的 state,state 的更新最终会传递到根reducer处,返回一个全新的完整的 state,然后传递给组件进行更新。

三、腾讯云图 组件实战

img

一个生活中随处可见的进度条的具体实现过程。组件实现过程一般包括需求分析、属性分析、模型建立、开发实现、测试交付。一个简单的进度条的属性包括进度条样式(边框样式、填充样式、开始颜色、结束颜色、密度),文本样式(字体字号、文本颜色、间距、精度等)

img

组件建模:进度条由气泡和进度条组成,气泡由一个边框和文本组成,进度条则由外框、遮罩层、剪切层、渐变层组成。 接下来是实现的具体代码

img

组件实现完成,如何接入腾讯云图。每个组件都需要定义自己的属性。包括组件名称、版本、属性等。平台根据这个属性会生成对应的控制面板,以及默认属性值。这样组件就可以接入腾讯云图,进行自由的拖拽布局。

腾讯云图,一站式数据可视化展示平台,零门槛打造出专业大屏数据展示!

问答
数据可视化在生活的哪里可以应用?
相关阅读
遇见大数据可视化 : 【云图】让数据可见
Redis勒索事件爆发,如何避免从删库到跑路?
Redis云端架构深入浅出
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区