背景

最近React項目中遇到了需要添加圖表（折線圖）展示的需求。

實踐

前端這塊可用的圖表庫真的是非常多的，各種庫都有，可以滿足各種需求。比如這個20 個最棒的 JavaScript 圖表庫中就介紹了很多不同的圖表庫，其中它有提到的就是 chartjs?；谶@篇文章上面提到的，以及自己和項目負責人知道的，我們試驗了以下3個圖表庫。

1. echarts

由于echarts是項目負責人之前用過的，并且是百度團隊開發(fā)的，支持度以及維護性會好些，所以一開始選擇的這個庫。
這個庫做出來的圖表也非常不錯。只是在部署測試時，就變得非常慢，由于項目打包已經(jīng)成型，是每個模塊打包成一個單獨的大文件，所以，打包出來的文件大小有2.7M之大，導致一般不是只需要2、3分鐘的時間變成了將近一個小時之久。
后來將項目中只引入需要的折線圖line，發(fā)現(xiàn)打包出來仍然有2.3M這么大。

echarts項目過大.png

在部署的時候，導致gulp命令占用cpu過高，導致構建很慢。

cpu.png

所以不得不放棄這個庫。

2. antv

同樣的理由，我們選擇了試用螞蟻金服開發(fā)的antv來試驗一下，不過打包出來的文件仍然很大，并且部署速度和上一個幾乎沒區(qū)別，也不得不放棄這個庫。
雖然這個庫做出來的圖標也非常好。

3. chartjs

Chart.js適用于小項目，如果你需要扁平化，干凈，優(yōu)雅，快速。它是一個微型的開源庫，最小化壓縮后只有11kb大小。包括六個核心圖表類型（線圖，柱圖，雷達圖，極地圖，餅圖和環(huán)形圖）每個都是獨立的模塊，所以你甚至可以只加載項目需要的模塊以最大化縮小代碼占用空間。

它使用HTML5 canvas元素渲染圖表，并且使用polyfills方式兼容在IE7/8上運行。所有圖表都是可響應的。

協(xié)議: 開源，面向所有用戶免費。

但是實際上我打包出來文件的大小為2.1M,也不小，但是部署時間很快，3分鐘左右即可完成。

chartjs.png

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

結論

• echarts中的地圖展示的圖表做的非常好，如有這方面的需求，使用這個庫非常好。
• antv庫的大型圖表也是做的不錯，所以需要大型圖表的可以使用這個庫。
• 如果需求like 我這種，只是簡單的圖表，那么建議使用輕量級的圖標庫，like: chartjs.

備注

順便放一個各個圖表庫的對比。原鏈接