图表"/>
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();};
更多推荐
vue监听dom元素变化修改echar图表
发布评论