首先先說一下Canvas和Svg的區別
Canvas:
基於像素
單個html,類似於在畫布上畫畫
Echarts基於Canvas畫圖
Svg:
基於對象模型
多個圖形元素
高保真 即放大也不會失真
echarts
先大體了解一下echarts的歷史：
echarts是百度公司前端開發的一個圖表庫。
支持柱狀圖、餅狀圖、k線圖、map圖、熱導向圖、折線圖
主要采用canvas畫圖。
5 分鍾上手 ECharts：
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
highchart
highcharts是國外的一家公司開發的圖表庫，主要采用svg畫圖。
支持的圖表也很多，功能也比較強大。
官方網站：
http://www.hcharts.cn/
D3.js
3 (或者叫 D3.js )是一個基於 web 標准的 JavaScript 可視化庫. D3 可以借助 SVG, Canvas 以及 HTML 將你的數據生動的展現出來. D3 結合了強大的可視化交互技術以及數據驅動 DOM 的技術結合起來, 讓你可以借助於現代瀏覽器的強大功能自由的對數據進行可視化.
官方網站：
https://d3js.org/
Web開發過程中選擇使用哪一個插件是很重要的問題。大多情況一般會從以下幾點考慮。
1.兼容性
使用一個插件之前必須要先評估一下它對瀏覽器的兼容性，不然寫完了發現沒法兒用就得不償失了。
經過多次嘗試，我初步判斷這三個插件的兼容性是這樣的：
- Highcharts 兼容 IE6 及以上的所有主流瀏覽器，完美支持移動端縮放、手勢操作。
- Echarts 兼容 IE6 及以上的所有主流瀏覽器，同樣支持移動端的縮放和手勢操作。
- D3 兼容IE9 及以上的所有主流瀏覽器，對於移動端的兼容性也同上。
也就是說，這三個插件都兼容IE9及以上的所有主流瀏覽器，但如果開發需求中包括IE7/IE8，那么就只能選擇Highcharts或者Echarts了。
2.是否免費/開源
- Highcharts 非商業免費，商業需授權，代碼開源。
- Echarts 完全免費，代碼開源。
- D3 完全免費，代碼開源。
考慮到Highcharts用於商業用途時還需要授權，而其它兩個都不需要，那么在其他條件都相同的情況下，可以考慮用另外兩個插件。
3.難易程度
- Highcharts 基於SVG，方便自己定制，但圖表類型有限。
- Echarts 基於Canvas，適用於數據量比較大的情況。
- D3.v3 基於SVG，方便自己定制；D3.v4支持Canvas+SVG，如果計算比較密集，也可以選擇用Canvas。除此之外，D3圖表類型非常豐富，幾乎可以滿足所有開發需求，但代碼相對於以上兩個插件來說，會稍微難一點。
基於此，如果你能力很強，可以直接用D3。反之，如果你是一個初學者或者對於這方面沒那么熟悉，那么就要從這幾點來考慮了：如果數據量比較大，可以考慮Echarts；如果只是一些簡單的數據，且客戶對界面定制較多，則可以考慮使用highcharts；如果前兩者都不能滿足需求，那么就只能用D3來一點一點做了。