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
有知道原因的小伙伴麻烦告知一下。