快捷導(dǎo)航

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

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

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

一、將echarts變量獨(dú)立出來

let myChart: echarts.ECharts | null = null

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

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

三、設(shè)置resize刷新函數(shù)

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

// 設(shè)置resize函數(shù) 不能用箭頭函數(shù)因?yàn)椴恢纼?nèi)存地址無法remove，必須定義出來
const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}

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

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

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue.js的手腳架vue-cli項(xiàng)目搭建的步驟
這篇文章主要介紹了vue.js的手腳架vue-cli項(xiàng)目搭建的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
詳解讓sublime text3支持Vue語法高亮顯示的示例
本篇文章主要介紹了讓sublime text3支持Vue語法高亮顯示的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
Vue中通過minio上傳文件的詳細(xì)步驟
最近項(xiàng)目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡單寫一下如何通過minio來上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過minio上傳文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
Vue中使用Lodash的實(shí)現(xiàn)示例
本文主要介紹了Vue中使用Lodash的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue+ElementUI技巧之自定義表單項(xiàng)label的文字提示方法
這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項(xiàng)label文字提示的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-02-02
vue組件發(fā)布成npm包
平常使用Vue開發(fā)時(shí),一個(gè)項(xiàng)目中多個(gè)地方需要用到的相同組件通常我們會(huì)封裝為一個(gè)公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
Vue打包部署到Nginx時(shí),css樣式不生效的解決方式
這篇文章主要介紹了Vue打包部署到Nginx時(shí),css樣式不生效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08