Echarts可视化库如何在Vue项目中使用-创新互联

这篇文章将为大家详细讲解有关Echarts可视化库如何在Vue项目中使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

Hcharts：国外的一款图表库，是图表库的领头羊

Echarts：百度开发的数据可视化库，国内图表库的 “领军人物”

AntV：是蚂蚁金服开发的数据可视化库

总结出以下几个优略点区别Echarts、Hcharts哪个比较合适：

1、学习容易程度：只要懂JS，那么相信你能很快上手。两者打分相同。但是百度出品的Echarts对于国内城市已经有了相应的配置，调用非常方便。因此在绘制地图方面，Echarts略胜一筹。

2、大数据表现力：有网友说，当数据量达到万条的级别时，Highcharts的多表联动、自动缩放具有更强的优势，而Echarts则会出现明显的卡顿，需要设置datazoom。因此Hcharts完胜。

3、文档友好程度：Echarts是百度的，Hcharts是国外的。另外，Echarts的文档像是说明书，而Highcharts的文档像是博客。个人仍偏向于说明书一样的文档，容易定位，因此我为Echarts转身亮灯。

4、图表美观程度：看看两家的实例Echarts、Hcharts，Echarts完爆啊！而且Echarts基于Canvas，对于3D绘图有绝对优势，能画出极漂亮的图形。

5、图表配置的自由度：Hcharts基于SVG，方便定制，同类型的图表，Hcharts能玩出100种花样。

6、图表的丰富程度：Echarts丰富的图表种类，和惊艳的3D效果，吊打Hcharts。

最后，更为关键的是，Echarts免费，Hcharts用于商业用途时还需要授权，个人用时虽然免费，但会在图表上显示logo，有洁癖的话就只能绕道了。

所以，就决定是你了，Echarts！

个人不推荐使用Vue-Echarts版本，因为Echarts本身难度不算大，虽然文档有点像是 “说明书”，但是还算全乎，花点时间还是可以理解的。

引入：

在Vue中使用Echarts时可以按照一般引入插件的方式引入

1、使用npm安装Echarts：

npm install echarts --save