运维开发网

动画:如何用「前端」做出吊炸天基于大数据可视化?

运维开发网 https://www.qedev.com 2021-01-24 11:09 出处:51CTO 作者:mb5fe1601ede528
先来几组图片和GIF动画开开眼界。对于这种大数据可视化,俺第一次是在科幻电影上见,那时候还小,感觉这技术好TM牛批。后来学了编程,从安卓到前端,直到前几天接触到,作为技术人实现起来不难,而且现在都有前辈做好的插件,只需要进行配置和美化,你一样可以做出炫酷、高逼格的可视化大屏。技术虽然很容易实现,但是技术是为了造福人类的,没有价值的技术说实话一点软用没有。所以学习技术是为了用技术去发挥它的价值,造福

先来几组图片和 GIF 动画开开眼界。

动画:如何用「前端」做出吊炸天基于大数据可视化?

动画:如何用「前端」做出吊炸天基于大数据可视化?

动画:如何用「前端」做出吊炸天基于大数据可视化?

动画:如何用「前端」做出吊炸天基于大数据可视化?

动画:如何用「前端」做出吊炸天基于大数据可视化?

对于这种大数据可视化,俺第一次是在科幻电影上见,那时候还小,感觉这技术好 TM 牛批。

后来学了编程,从安卓到前端,直到前几天接触到,作为技术人实现起来不难,而且现在都有前辈做好的插件,只需要进行配置和美化,你一样可以做出炫酷、高逼格的可视化大屏。

技术虽然很容易实现,但是技术是为了造福人类的,没有价值的技术说实话一点软用没有。所以学习技术是为了用技术去发挥它的价值,造福人类生活和健康。

本来今天打算着不分享技术文的,但是后来仔细想了想,最近一个月折腾了不少东西,在家办公给公司做了几款基于大数据的可视化展示屏,小鹿也算是给疫情一线提供了一部分技术上的支持。

这篇文章也当做是一篇大数据可视化扫盲的一篇文章,从何为大数据,到作为一个前端开发者,如何做出炫酷、有价值的基于大数据的可视化展示屏。

1、何为数据可视化?

用简单的语言去描述的话,就是利用大量的典型的数值型数据,比如图标、动画、声音、文本等,然后通过一些可视化的地图、饼图、柱状图、折线图的形式将数据展示出来。通过大量数据分析,得出关键信息,从关键信息中最终得到价值。

上边这段是俺自己总结的,它并不是非常的严谨,但是我们记住一点就是我们要从数据中得到价值。

2、数据可视化有哪些应用?

我们知道了数据可视化是从大量数据中分析出价值,咱们再来唠唠现在有哪些产业利用大数据来分析的。

现在是科技的时代,大数据的应用非常的广泛,最常见的有医疗领域、电信领域、金融领域、电子商务以及一些传统的制造业都用上了大数据。

对于最近发生的武汉肺炎事件,大数据就派上用场了,这个疫情什么时候将会出现拐点以及每天都会在什么地区出现多少病例,以及物资捐赠分发等状况,可采集大量的相关数据进行一个可视化的展示,从而得到有价值的信息,从而才会采取一些有效措施阻断肺炎的传播。

比如全国肺炎确诊数趋势变化,大到各个省市,小到各个小县城。从数据的采集到数据的展示,再到数据的分析。下面主要聊一聊作为一个前端开发者,整个过程我们应该怎么去准备的。

3、数据的采集。

有很多的数据采集受到限制管控的,这部分数据只对一些企业或者机构提供的。另外的一些数据可以在网站,但是并没有给你提供接口,作为一个前端开发者可以使用 Node .js 爬虫进行爬取,如果会 Python,利用一些第三方库,效率会更高一些。

很多数据也会提供免费的接口供开发者使用,比如一些 github 开源的数据,都可以拿来做数据可视化的渲染。

俺给大家伙搜几个开放数据源网站供大家学习使用:

https://opendata.pku.edu.cn/

https://registry.opendata.aws/

https://www.udparty.com/index.php/index/index

4、使用 Echarts 搭建展示屏

ECharts,一个使用 JavaScript 实现的开源可视化库,底层依赖矢量图形库 ZRender。

Echarts 非常的丰富,具体可以进入官网查看。

地图:

动画:如何用「前端」做出吊炸天基于大数据可视化?

柱状图:

动画:如何用「前端」做出吊炸天基于大数据可视化?

折线图:

动画:如何用「前端」做出吊炸天基于大数据可视化?

饼图:

动画:如何用「前端」做出吊炸天基于大数据可视化?

使用 Echarts 最费劲的就是配置一些选项,对于刚接触到到童鞋来说挺费劲的,最快的了解该框架的方式就是把官方文档通读一遍,知道哪些配置项的属性在哪个地方,如果在搭建可视化展示屏的时候,就可以快速的定位到,从而进行细读。

5、美化

光有 Echarts 封装好的组件还不够的,前端虽然是主要做技术,更重要的还有你的审美,如果让你设计自己的产品,如果设计 UI,颜色搭配、图片剪辑(PS),最后根据设计图进行快速搭建界面,将数据进行渲染呈献给用户。

基于大数据渲染更多的不是呈现在 PC 端,而是那种高分辨率的大屏,和 PC 端呈现出来的效果是不一样的。

6、交互

虽然所有数据都进行渲染了,最重要的就是可以和用户进行交互,比如我点击地图的某个城市,它会在右侧切换该城市的确诊病例趋势图,或者区域就会弹出具体数据展示给用户。

动画:如何用「前端」做出吊炸天基于大数据可视化?

还有一些数据太多,在大屏上还不能够足够的展示,我们需要通过滚动的方式进行展示。

7、最终效果

最终通过以上六个步骤,一款基于大数据的可视化展示屏做好了。我们最终的目的不是为了好看,不是为了好玩,而是能不能通过现在的数据可视化能够解决一些难题,通过趋势去分析未来的一些可能性。

最常见的就是天气预报,可以通过常见的温度或者降水量,从而预测未来天气变暖的状况。

文章中虽然没有涉及到太过的代码和细节步骤,因为这都不是重点,这些东西很容易去通过官方文档或者谷歌去搜索。这篇最重要的是扫盲一些我个人这一个月接触的基于大数据的可视化渲染屏。

由于小鹿个人不是大专门做大数据可视化工作的,内边有些描述和术语可能准确,以及可视化框架也不止小鹿分享的这一种,个人能力有限,小鹿把自己能知道的,踩过坑的地方总结分享了一下,希望对你有所帮助。

原创文章不易,希望点个在看给个鼓励,如果能够获得你的转发,小鹿更是感激不尽。还等什么呢?赶快去做你的大数据可视化展示吧。有什么问题,下方给俺留言,也欢迎你给俺加个鸡腿哦~

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号