哪些炫酷的数据可视化图表是怎么实现的?
最近在给公司设计一个类似上图所展示的数据可视化产品,这个产品的主要目的是把当前产品中的一些数据及其分析结果通过可视化的方式展示出来,像阿里,京东内部都有这样的大屏幕产品,做了一些调研,趁此机会在这里给大家分享一些经验,方便大家进行类似产品的设计;
这种产品看起来很酷炫,其实逻辑本身并不复杂,主要就是按照一定规则对数据进行计算并展示,在这个过程中,遇到最大的问题是数据以什么形式进行可视化展示,可能会有人问了,这些柱状图,饼状图,环状图,地图等等不是很常见吗,我们在平时使用产品的时候也会经常看到,比如支付宝每年的账单,就会用图文并茂的方式告诉我们,过去一年自己是怎么败家的;
其实看起来常见是一回事,技术实现是另一回事,而这种产品,不同于普通页面的设计,设计中最大的不确定性就在于要考虑技术想怎么实现,而不是自己想怎么设计,毕竟产品的搭建是一个工程,而不是艺术,产品经理不能像艺术家一样去发挥想象去设计,怎么炫酷怎么来;
对于数据可视化展示的方案,我了解了一下,目前市场上能解决的方案非常多,国内国外,收费免费的都有,但是免费又功能强大,稳定且能保持持续迭代的产品不多,这里给大家推荐两款国产的工具,保证能解决90%以上的数据可视化展示需求:、
1.ECharts
这是脱胎于百度一个数据可视化解决方案,包括折线图,饼状图,柱状图,热力图等36类上百种可视化样式,部分示例如下,访问地址: https://www.echartsjs.com
2.AntV
这是蚂蚁金服推出的一个数据可视化解决方案,包含G2,G6,F2,L7四个方向
G2主要是针对pc网页的数据化可视化方案,类别和数量上虽然没有ECharts多,但是也差不太多,而且有一些自己的特色图表,访问地址: https://antv.alipay.com/zh-cn/g2/3.x/index.html
F2主要是针对移动端的数据可视化方案,功能跟G2差不多,图表的样式针对移动端的产品特性做了专门的适配设计,访问地址: https://antv.alipay.com/zh-cn/f2/3.x/index.html
G6是针对可视化编辑工具的解决方案,比如你要开发一个思维导图工具,里面涉及到线条的展示就可以用这种方案,访问地址:
https://antv.alipay.com/zh-cn/g6/3.x/index.html
L7是针对地理空间数据可视化的解决方案,比如共享单车想看某个城市或全国的骑行动态,就可以通过这种方案来展示,访问地址: https://antv.alipay.com/zh-cn/l7/1.x/index.html
这两款产品都是国内大公司的作品,除了丰富的图表样式,很多内容都可以自定义修改,比如改变配色,气泡的样式等等,开源而且免费,可以放心使用;
作为产品经理,我们在使用这些图表的时候,主要用途是进行前期的技术可行性调研和产品展示样式的设计参考,使用的时候首先基于业务目标,想象一下自己的图表要设计成什么样式,然后来这两个网站,看一下官方的图表示例,看看这些示例的样式能否满足自己的设计,如果不能的话,看看这些示例中有哪些图可以代替自己的设计方案,调研完成并设计好方案,最后把一切交给技术就可以了。
有什么产品问题欢迎来找我交流讨论~更多原创产品干货,欢迎关注我的微信公众号:大白产品随笔(ID:dabaixuetang),原创发布于知乎。未经许可,禁止转载。