React项目中展示图表

背景

最近React项目中遇到了需要添加图表（折线图）展示的需求。

实践

前端这块可用的图表库真的是非常多的，各种库都有，可以满足各种需求。比如这个20 个最棒的 JavaScript 图表库中就介绍了很多不同的图表库，其中它有提到的就是 chartjs。基于这篇文章上面提到的，以及自己和项目负责人知道的，我们试验了以下3个图表库。

1. echarts

由于echarts是项目负责人之前用过的，并且是百度团队开发的，支持度以及维护性会好些，所以一开始选择的这个库。 这个库做出来的图表也非常不错。只是在部署测试时，就变得非常慢，由于项目打包已经成型，是每个模块打包成一个单独的大文件，所以，打包出来的文件大小有2.7M之大，导致一般不是只需要2、3分钟的时间变成了将近一个小时之久。 后来将项目中只引入需要的折线图line，发现打包出来仍然有2.3M这么大。

echarts项目过大.png

在部署的时候，导致gulp命令占用cpu过高，导致构建很慢。

cpu.png

所以不得不放弃这个库。

2. antv

同样的理由，我们选择了试用蚂蚁金服开发的antv来试验一下，不过打包出来的文件仍然很大，并且部署速度和上一个几乎没区别，也不得不放弃这个库。 虽然这个库做出来的图标也非常好。

3. chartjs

Chart.js适用于小项目，如果你需要扁平化，干净，优雅，快速。它是一个微型的开源库，最小化压缩后只有11kb大小。包括六个核心图表类型（线图，柱图，雷达图，极地图，饼图和环形图）每个都是独立的模块，所以你甚至可以只加载项目需要的模块以最大化缩小代码占用空间。

它使用HTML5 canvas元素渲染图表，并且使用polyfills方式兼容在IE7/8上运行。所有图表都是可响应的。

协议: 开源，面向所有用户免费。

但是实际上我打包出来文件的大小为2.1M,也不小，但是部署时间很快，3分钟左右即可完成。

chartjs.png

有知道原因的小伙伴麻烦告知一下。

结论

• echarts中的地图展示的图表做的非常好，如有这方面的需求，使用这个库非常好。
• antv库的大型图表也是做的不错，所以需要大型图表的可以使用这个库。
• 如果需求like 我这种，只是简单的图表，那么建议使用轻量级的图标库，like: chartjs.