vue3中echarts圖表在頁面刷新后無法自適應改變大小的解決過程

更新時間：2025年09月26日 15:28:28 作者：嚯呀怪怪怪

優(yōu)化ECharts圖表開發(fā)需獨立變量、創(chuàng)建顯示方法,并通過添加和移除窗口大小監(jiān)聽實現響應式刷新,確保性能與資源管理

一、將echarts變量獨立出來

let myChart: echarts.ECharts | null = null

二、創(chuàng)建echarts圖表顯示方法

const showEcharts = () => {
  // 基于準備好的dom，初始化echarts實例
  if (!myChart) {
    var chartDom = document.getElementById('echarts')
    myChart = echarts.init(chartDom)
  }
  option && myChart.setOption(option)
}

三、設置resize刷新函數

需要添加監(jiān)聽和移除監(jiān)聽窗口大小的變化，避免性能問題，必須要保證能移除

// 設置resize函數 不能用箭頭函數因為不知道內存地址無法remove，必須定義出來
const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}

四、添加窗口大小變化監(jiān)聽和移除監(jiān)聽

onMounted(() => {
  showEcharts ()
  window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart)
})

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue實現移動端H5數字鍵盤組件使用詳解
這篇文章主要為大家詳細介紹了vue實現移動端H5數字鍵盤組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
使用vue-cli初始化項目時運行‘npm run dev’報錯及解決
這篇文章主要介紹了使用vue-cli初始化項目時運行‘npm run dev’報錯及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue-cli webpack 引入swiper的操作方法
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
關于element-ui resetFields重置方法無效問題及解決
這篇文章主要介紹了關于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue內存泄漏的識別和解決方案
Vue是人氣爆棚且地表最強的JS（JavaScript）框架,祂允許我們構建動態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會遭遇內存泄漏,導致性能暴跌和意外行為,今天,我們將深入Vue App內存泄漏的原因,并探討識別和修復這些問題的錦囊妙計
2023-11-11
用vuex寫了一個購物車H5頁面的示例代碼
本篇文章主要介紹了用vuex寫了一個購物車H5頁面的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
vue中動態(tài)設置meta標簽和title標簽的方法
這篇文章主要介紹了vue中動態(tài)設置meta標簽和title標簽的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Vue3中的組件通信$refs $parent使用
這篇文章主要介紹了Vue3中的組件通信$refs $parent使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-06-06
vue通過定時器實現垂直滾動公告
這篇文章主要為大家詳細介紹了vue通過定時器實現垂直滾動公告，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue發(fā)布到nginx下請求后臺404問題及解決
這篇文章主要介紹了vue發(fā)布到nginx下請求后臺404問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03