vue项目使用echarts(封装函数:监听dom元素尺寸变化resize echarts)
场景:如上图,页面左侧有个控制收缩的菜单面板,页面右边是一个数据大屏,有很多的echart是图表,所以需要监听右侧dom元素,当其尺寸变化的时候resize 图表。
在这里可以通过element-resize-detector监听dom元素变化:
npm install element-resize-detector
封装的函数如下:// 封装 监听dom元素尺寸变化resize echarts
resizeEcharts(echart, myChart) { const elementResizeDetectorMaker = require('element-resize-detector')// 引入监听dom变化的组件 const erd = elementResizeDetectorMaker() // 监听id为echart的元素 大小变化 erd.listenTo(echart, function(element) { // const width = element.offsetWidth // const height = element.offsetHeight myChart.resize() }) },
这里的echart就是我们的dom元素指的是:
this.$refs.echart 或者 document.getElementById(“echart”)
这里的myChart指的是初始化的echarts实例:
const myChart = echarts.init(this.$refs.echart)
所以调用函数就是:
this.resizeEcharts(echart, myChart)
当然,具体封装参数就你的业务需求灵活而定。
热门文章
- 动物疫苗销售大客户经理(兽用疫苗销售人员)
- vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目
- 「2月18日」最高速度22.5M/S,2025年Hiddify Next每天更新免费节点订阅链接
- python 接受ctrl c结束子进程,subprocess.Popen杀死子进程
- 南京宠物领养中心有哪些公司名称(南京宠物领养机构)
- 「1月17日」最高速度18.2M/S,2025年Hiddify Next每天更新免费节点订阅链接
- 小猫要养多久才认识家(养小猫多久能熟)
- 「1月13日」最高速度19.5M/S,2025年Hiddify Next每天更新免费节点订阅链接
- 兽用疫苗查询网站 兽用疫苗查询网站官网
- 动物疫苗管理工作总结汇报(动物注射疫苗简报)