前端数据可视化插件:Highcharts、Echarts和D3

深碍√TFBOYSˉ_ 2022-05-10 05:08 202阅读 0赞

前端数据可视化插件有很多，但我用过的只有Highcharts（https://www.hcharts.cn/）、Echarts（http://echarts.baidu.com/）和D3（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来一点一点做了。

转载地址:[https://blog.csdn.net/u013511989/article/details/72236788][https_blog.csdn.net_u013511989_article_details_72236788]

[https_blog.csdn.net_u013511989_article_details_72236788]: https://blog.csdn.net/u013511989/article/details/72236788