图表"/>

vue监听dom元素变化修改echar图表

文章目录

• 前言
• 一、install监听依赖
• 二、使用步骤
• • 1.监听指定id并修改echarts宽高
  • 监听Windows窗口变化

前言

提示：这里可以添加本文要记录的大概内容：

vue中监听dom元素变化

提示：以下是本篇文章正文内容，下面案例可供参考

一、install监听依赖

npm install element-resize-detector

二、使用步骤

1.监听指定id并修改echarts宽高

代码如下（示例）：

  const that = this;var elementResizeDetectorMaker = require("element-resize-detector"); //导入var erd = elementResizeDetectorMaker();erd.listenTo(document.getElementById("eventSbQk"), (element) => {that.$nextTick(() => {//监听到事件后执行的业务逻辑//使echarts尺寸重置let myChart = that.$echarts.init(that.$refs.eventSbQk);myChart.resize();});});erd.listenTo(document.getElementById("eventBlQk"), (element) => {that.$nextTick(() => {//监听到事件后执行的业务逻辑//使echarts尺寸重置let myChart = that.$echarts.init(that.$refs.eventBlQk);myChart.resize();});、

监听Windows窗口变化

window.onresize = () => {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(this.$refs.eventSbQk);myChart.resize();let blhart = this.$echarts.init(this.$refs.eventBlQk);blhart.resize();};