Echarts 图表填(天)坑篇

Echarts 图表填(天)坑篇

1.echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)

问题:

这是做过echarts图表的同学大部分都会遇到的坑,在应用echarts进行统计图制作时候会遇到这样的问题,进入渲染页面统计图比例显示ok,但是当主动调整浏览器大小时候,统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果,比如下图,缩小窗口就会出现溢出的情况。在这里插入图片描述

原因分析:

echarts的图表实例事实上并没有主动的去绑定resize()事件,就是说显示区域大小发生改变内部并不知道,当你需要去做一些自适应的效果的时候,需要使用方主动的去绑定这个事件达到自适应的效果,常见如window.onresize = myChart.resize。

填坑:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
myChart.resize();
//myChart1.resize(); //若有多个图表变动,可多写
}

2.解决Vue+Echarts的内存泄漏问题

问题:

当页面存在echarts图表的时候,跳转路由到其他页面,然后来回切换的时候,打开浏览器调试工具,会发现页面占用内存持续增加,如下图所示:
在这里插入图片描述
前几次切换页面可以正常生成图表,但是当切换多次以后,页面会出现空白或浏览器奔溃的情况,页面也不会报错并且无明显提示。很明显是发生了内存泄漏问题。

原因分析:

先说一个知识点:

js中的内存垃圾回收机制:垃圾回收器会定期扫描内存,当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用,导致垃圾回收器无法回收这就造成了内存泄漏。传统页面每次跳转都会释放内存,所以并不是特别明显。
Web App 与 传统Web的区别,因为Web App是单页面应用页面通过路由跳转不会刷新页面,导致内存泄漏不断堆积,导致页面卡顿。

在这里插入图片描述
原因就是echarts图表初始化时引用了DOM对象,js不回对此自动回收,切换生成echarts时需要用到一部分内存,重复切换页面,之前生成的图表内存并没有进行清空,因此一直切换内存也一直叠加,最终导致内存溢出。

填坑:

1.在生成echarts之前进行判断,dom不存在时就不初始化echarts

2.去掉重复初始化echarts,这个主要就是在不需要使用时销毁实例。那么很自然想到官方API,查阅echarts官方API果然发现有这个方法:

在这里插入图片描述
代码示例:

(1)页面容器:

1
2
3
4
5
<template>
<div class="chart-main">
<div ref="dom" :style="chartStyle"></div>
</div>
</template>

(2)初始化echarts方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
initChart() {
//-dom 不存在时不画
if (!this.$refs.dom) {
return
}
//去掉重复初始化
this.myChart = echarts.getInstanceByDom(this.$refs.dom);
if(!this.myChart){
this.myChart = echarts.init(this.$refs.dom);
this.$once('hook:beforeDestroy', function () {
echarts.dispose(this.myChart)
})
}
}

没修改之前的代码:

1
2
3
initChart() {
this.myChart = echarts.init(this.$refs.dom);
}
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×