vue echarts中页面resize监听自适应

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


    

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

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- 默认。事件句柄在冒泡阶段执行

你可能感兴趣的:(Vue,echarts)