前端之【数据可视化】

前言

数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。简单来说，数据可视化就是将数据以图表、动画等形式展现出来，供人们方便的查看数据。

为什么要数据可视化(优点)

传递速度快，人脑对视觉信息的处理要比书面信息块10倍。使用图表来总结复杂的数据，可以确保对关系的理解要比那些混乱的报告或电子表格更快。
数据显示的多维性，在可视化的分析下，数据将每一维的值分类、排序、组合和显示，这样就可以看到表示对象或事件的数据的多个属性或变量。
更直观的展示信息，大数据可视化报告使我们能够用一些简短的图形就能体现那些复杂信息，甚至单个图形也能做到。

前端数据可视化框架

前端数据可视化的框架有很多，每个框架都有自己优缺点，这里我们主要介绍下面三个。使用的时候根据项目的要求进行选择。

Echarts

Echarts 完全免费，代码开源。
Echarts 基于Canvas，(ECharts v3.8 发布了 SVG 渲染器)适用于数据量比较大的情况。
Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。 echarts 百度的良心库，echarts入手简单，文档清晰，效果绚丽，主要是国产，文档也很容易看。
echarts 支持按需求打包,可以在线构建项目时，选择项目所需要使用到的模块，从而达到减小JS文件的体积 echarts 的体积较大。echarts的可定制性差，hightcharts也是如此，如果出现了要绘制配置中不支持的图表，那么就只能放弃，尝试着使用其他的框架。

Highcharts

Highcharts 非商业免费，商业需授权，代码开源。
Highcharts 基于SVG，方便自己定制，但图表类型有限。
Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。

D3

D3 完全免费，代码开源。
D3.v3 基于SVG，方便自己定制；D3.v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。
D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
D3.js 入门略麻烦，但效果繁多，组建灵活，而且还有专门的书来讲解怎么做，可以说发展到现在已经是全世界公认的第一可视化框架

数据可视化框架的选择

这三个插件都兼容IE9及以上的所有主流浏览器，但如果开发需求中包括IE7/IE8，那么就只能选择Highcharts或者Echarts了。
三个插件中只有Highcharts用于商业用途中时需要授权，其他两个都不需要。
D3相对于其他两个来说比较难，如果数据量比较大，可以考虑Echarts；如果只是一些简单的数据，且客户对界面定制较多，则可以考虑使用highcharts；如果前两者都不能满足需求，那么就只能用D3来一点一点做了。

写在最后

更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！