vue3中echarts图表在页面刷新后无法自适应改变大小的解决过程
更新时间：2025年09月26日 15:28:28 作者：嚯呀怪怪怪
优化ECharts图表开发需独立变量、创建显示方法,并通过添加和移除窗口大小监听实现响应式刷新,确保性能与资源管理
一、将echarts变量独立出来
let myChart: echarts.ECharts | null = null
二 、创建echarts图表显示方法
const showEcharts = () => {
// 基于准备好的dom，初始化echarts实例
if (!myChart) {
var chartDom = document.getElementById('echarts')
myChart = echarts.init(chartDom)
}
option && myChart.setOption(option)
}
三、设置resize刷新函数
需要添加监听和移除监听窗口大小的变化，避免性能问题，必须要保证能移除
// 设置resize函数 不能用箭头函数因为不知道内存地址无法remove，必须定义出来
const resizeChart = () => {
if (myChart) {
myChart.resize()
}
}
四、添加窗口大小变化监听和移除监听
onMounted(() => {
showEcharts ()
window.addEventListener('resize', resizeChart)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeChart)
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了el-tree树设置懒加载以及设置默认勾选方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue实现一个单独的组件注释，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue.js的手脚架vue-cli项目搭建的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
详解让sublime text3支持Vue语法高亮显示的示例
本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例，非常具有实用价值，需要的朋友可以参考下2017-09-09
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue-cli+webpack创建记事本项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本文主要介绍了Vue中使用Lodash的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue+ElementUI技巧之自定义表单项label的文字提示方法
这篇文章主要给大家介绍了关于Vue+ElementUI技巧之自定义表单项label文字提示的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
平常使用Vue开发时,一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件,所以我们可以将封装好的组件打包发布至npm,本文主要介绍了vue组件发布成npm包,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论