在Vue中使用Echarts可视化库的完整步骤记录
这篇文章主要给大家介绍了关于在Vue中使用Echarts可视化库的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
由于最近项目需要做可视化数据展示，也就是用图表展示数据，他还有一个很高端的名字：“大数据可视化”（参考图一），首先考虑选择什么图表库来作为基础开发，目前被普遍认可的是Hcharts、Echarts、AntV。
介绍：
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：
1
npm install echarts --save
2、全局引入Echarts：
1
2
3
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
个人不推荐在main.js全局引入的发方式，根据项目使用Echarts的程度可以选择按需引入：
3、按需引入Echarts：
1
2
let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
简单使用：
首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：
准备一个具有宽高的容器（container）；每次绘制之前需要初始化（init）；必须设置配置，否则无从绘制（option）；改变数据时必须传入改变的数据，否则监听不到新数据（setOption）；
四步缺一不可，可以简单理解为日常生活中娶媳妇：
找到适合结婚的女朋友（container）；认识一段时间之后确定关系（init）；确定关系之后需要买买买，她才会跟你继续交往（option）；关系进一步升温之后就可以把他娶回家了（setOption）；
使用：
1
2
<div style="width: 100%; height: 100%" ref="chart"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
export default {
data() { return { chart: null } },
mounted() { this.init() },
methods: {
init() {
this.chart = Echarts.init(this.$refs.chart);
let option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
};
this.chart.setOption(option);
}
}
};
</script>
自适应窗口大小：
为了兼容性，需要做到每个图表根据屏幕变化而自适应宽高
单个 / 多个图表均生效：
1
2
3
4
5
mounted() {
window.addEventListener('resize', () => {
this.chart.resize();
});
}
效果展示：
总结
到此这篇关于在Vue中使用Echarts可视化库的文章就介绍到这了,更多相关Vue使用Echarts可视化库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
在vue中添加Echarts图表的基本使用教程vue使用echarts图表的详细方法详解vue使用Echarts画柱状图基于vue+echarts 数据可视化大屏展示的方法示例Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)使用vue3+ts打开echarts的正确方式相关知识
Vue项目中使用ECharts构建交互式中国地图的详细指南
vue用什么图表库
vue3使用什么图表库
15 个用于创建漂亮图表的 JavaScript 库在本文中，将展示一些用于图形和图表的最佳 JavaScript 库，
基于Echarts的鸢尾花数据可视化
东莞与广东区域图表制作：echarts实践指南
前端数据可视化插件大盘点
vue如何实现物流跟踪
Apache ECharts
echarts插件，将海量数据转化为美丽的数据图表
网址: 在Vue中使用Echarts可视化库的完整步骤记录 https://m.huajiangbk.com/newsview1946615.html
| 上一篇: 15 个有意思的 JavaScr |
下一篇: 报表工具花钱or开源？我对比了这 |
