Vue2/Echarts 在加载时从缓存页面离开再返回后图表不能正常显示的问题以及图表自动随页面大小缩放功能实现

图表不能正常显示问题解决

问题详述：
现有存放图表的页面A与一个其他页面B，A设置了keep-alive为true，在等待A页面数据加载时，切换到页面B，等待一段时间后再切回A，发现A中的除图表外数据都正常显示，图表不显示。并且控制台出现警告：[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

出错原因猜测：

由于图表在初始化过程中，需要读取dom元素的宽高以实现图表显示的渲染，但此时已经切换到其他页面，因此在读取dom元素的过程中出现了上述警告内容，并且渲染失败。

问题解决：

在activated部分中，自动触发一次echarts图表对象的resize操作，即重新匹配dom元素的宽高。

解决部分代码：

activated() {
    // chart为本页面定义的echarts对象
	if(this.chart != null){
		this.handleResize(); //直接写this.chart.resize()就行，此处进行了封装
	}
},

自适应页面大小缩放功能实现

顺便介绍echarts图表自适应页面缩放功能的实现：

在mounted中添加一个窗口大小变化的事件监听器：

window.addEventListener('resize', this.handleResize);

并在methods中定义handleResize函数：

handleResize () {
    this.chart.resize();
},