vue-echarts文档,vue实现echarts动态数据
本文主要介绍在Vue中使用Echarts可视化库的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。让我们和边肖一起学习。
前言
最近项目需要显示可视化数据，也就是用图表显示数据。他还有一个很高端的名字：“大数据可视化”(参考图1)。首先考虑选择哪个图表库作为基础开发。目前公认的是Hcharts、Echarts、AntV。。
介绍：
Hcharts:国外海图库是海图库的龙头。
Echarts:百度开发的数据可视化库，是国内图表库的“领军人物”。
AntV:是蚂蚁金服开发的数据可视化库。
总结以下优缺点：Echarts和Hcharts哪个更合适：
1、学习容易程度:只要你懂JS，那么我相信你能很快上手。两个分数是一样的。不过百度出品的Echarts已经有了针对国内城市的相应配置，调用起来非常方便。所以Echarts在绘制地图上略胜一筹。
2.大数据表现力:有网友表示，当数据量达到万条级别时，Highcharts的多表联动和自动缩放优势更强，而Echarts会有明显的卡顿，需要设置datazoom。所以Hcharts胜。
3、文档友好程度: E Charts是百度的，Hcharts是国外的。另外，Echarts的文档就像说明书，而Highcharts的文档就像博客。我个人还是比较喜欢说明书之类的文档，比较容易定位，所以转过来点了Echarts。
4.图表美观程度:看两家公司的例子。Echarts，Hcharts，Echarts都彻底爆了！而且Echarts基于画布，对于3D绘图有绝对优势，可以画出极其漂亮的图形。
5、图表配置的自由度: H Charts基于SVG，易于定制。同类型的图表，Hcharts可以玩100招。
6，图表的丰富程度:Echarts丰富的图表类型，以及惊艳的3D效果，悬挂Hcharts。
最后，更重要的是，Echarts是免费的，Hcharts用于商业目的时需要授权。虽然都是免费自用，但是图表上会显示logo，有洁癖的话只能绕道。
所以，决定是你了，Echarts！
我个人不建议用Vue-Echarts版本，因为Echarts本身并不太难。虽然文档有点像“手册”，但还是挺完整的，花点时间也无可厚非。
引入：
在Vue中使用Echarts时，可以按照一般介绍插件的方式来介绍。
1、使用npm安装Echarts：
npm安装电子图表-保存
2、全局引入Echarts：
//不建议使用main.js
从“echarts”导入e charts；
vue . prototype . $ e charts=e charts；
个人不推荐在main.js全局引入的发方式，根据项目使用Echarts的程度可以选择按需引入：
3、按需引入Echarts：
let e charts=require( e charts/lib/e charts )；
要求( e charts/lib/chart/bar )；//必需的图表
简单使用：
首先要明确的是，Echarts图形必须满足四个刚性条件才能绘制：
准备一个有宽度和高度的容器(container)；每次绘图前需要初始化(init)；必须设置配置，否则无法绘制(option)；更改数据时，必须传入已更改的数据，否则无法监控新数据(setOption)；
四个步骤缺一不可，可以简单理解为日常生活中娶媳妇：
找一个适合结婚的女朋友(container)；认识一段时间后确定关系(init)；关系确定后，buy buy需要买，她会继续和你交往(option)；关系进一步升温后，可以嫁他回家(setOption)；
使用：
！-准备具有宽度和高度的容器-
div style= width:100%；高度：100% ref=chart/div
脚本
let e charts=require( e charts/lib/e charts )；//基本实例应该注意不要使用import。
要求( e charts/lib/chart/bar )；//bar=根据需要引入直方图
导出默认值{
Data() {return {chart: null} }，//图表示例
mounted() { this.init() }，
方法：{
init() {
//2.初始化
this.chart=Echarts.init(this。$ refs . chart)；
//3.配置数据
let option={
Xis: {type: category ，data: [mon ， tue ， wed ， thu ， fri ， sat ， sun]}，//x轴
YAxis: {type: value }，//Y轴
Series: [{data: [120，200，150，80，70，110，130]，type: bar}]//CI
};
//4.输入数据
this.chart.setOption(选项)；
}
}
};
/脚本
自适应窗口大小：
为了兼容性，需要根据屏幕变化使每个图表的宽度和高度自适应。
单个/ 多个图表均生效：
已安装(){
window . addevent listener( resize ，()={
this . chart . resize()；
});
}
效果展示：
总结
这就是这篇关于在Vue中使用Echarts可视化库的文章。有关在Vue中使用Echarts可视化库的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。