vue echarts中页面resize监听自适应

需求：当使用echarts时候，要考虑到自适应问题兼容页面适配 。

<el-col :span="18">
    <div class="pt20" id="inquiryChart" :style="{width: '100%', height: '360px'}"></div>
</el-col>

当我们浏览器缩放的时候，图表等比例缩放：

mounted(){
    let inquiryChart = this.$echarts.init(document.getElementById("inquiryChart"));
    
    window.addEventListener("resize", function() {
      inquiryChart.resize();
    });
}

window.addEventListener的运用
在window.onresize会发生冲突，使用addEventListener来添加监听resize的事件，将能避免onresize的覆盖问题，并能实现对窗口的监听操作。

addEventListener()添加事件监听
addEventListener(event, function, useCapture)

参数值
event 必须。字符串，指定事件名。

注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。

useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值：

• true - 事件句柄在捕获阶段执行
• false- 默认。事件句柄在冒泡阶段执行