vue3中echarts图表在页面刷新后无法自适应改变大小的解决过程
作者：嚯呀怪怪怪
优化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)
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。