快捷導(dǎo)航

在vue使用echarts報(bào)錯(cuò):invalid dom問(wèn)題

更新時(shí)間：2024年03月06日 14:43:30 作者：頑強(qiáng)的小豆子

這篇文章主要介紹了在vue使用echarts報(bào)錯(cuò):invalid dom問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue使用echarts報(bào)錯(cuò):invalid dom

出錯(cuò)原因

1.使用了了錯(cuò)誤的周期函數(shù)，應(yīng)該使用mounted，dom節(jié)點(diǎn)沒(méi)有加載完成

methods:{
    showtable(){
      console.log("準(zhǔn)備輸出dom節(jié)點(diǎn)")
      console.log(document.querySelector('.dashboard-text'))
      
      let myChart = echarts.init(document.querySelector('.dashboard-text'));
      // 繪制圖表
      myChart.setOption({
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    }
  },
  mounted(){
    console.log("展示圖標(biāo)吧")
    this.showtable();
  }

2.獲取節(jié)點(diǎn)元素，不熟悉

標(biāo)簽中id= "main"，使用document.querySelector("#main")
標(biāo)簽中class="main"，使用document.querySelector(".main")

echarts隨dom大小自適應(yīng)變化，并做防抖處理

監(jiān)聽窗口resize事件

監(jiān)聽瀏覽器窗口resize事件很簡(jiǎn)單，如下一行代碼即可搞定：

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

如何監(jiān)聽dom的resize事件呢？

監(jiān)聽dom的resize事件

const myObserver = new ResizeObserve(entries => {
	console.log("dom元素resize")
})
myObserver.observe(target)//target:要監(jiān)聽的dom元素

需要注意的一點(diǎn)，在進(jìn)入和離開當(dāng)前頁(yè)面時(shí)，dom監(jiān)聽事件都會(huì)觸發(fā)一次。

如果在事件監(jiān)聽函數(shù)里面有涉及到對(duì)該dom的操作（比如說(shuō)初始化echart），那么當(dāng)前頁(yè)面銷毀后，該dom已經(jīng)不存在了，而監(jiān)聽事件還要執(zhí)行一次，就會(huì)報(bào)錯(cuò)（無(wú)效的dom）：

解決方法：如果是在vue中使用，組件銷毀之前停止監(jiān)聽即可：

beforeDestroy() {
	this.myObserver.unobserve(target)
}

完整代碼示例

下面給個(gè)示例，監(jiān)聽echarts所綁定dom的resize事件，并做防抖處理。

<template>
	<div ref="echart" class="echart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
	data() {
		return {
			myObserver: '',//resize監(jiān)聽器
			timer: '',//定時(shí)器
			myEchart: '',//echart實(shí)例
		}
	},
	
	mounted() {
		//this.loadEchart()
		//不需要執(zhí)行上一行的原因是，下面的監(jiān)聽器會(huì)在掛載的時(shí)候自動(dòng)執(zhí)行一次。

		this.myObserver = new ResizeObserver(entries => {
			if(this.timer) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(this.loadEchart(), 50)
		})
		this.myObserver.observe(this.$refs.echart)
	},
	
	beforeDestory() {
		clearTimeout(this.timer)
		/*
		清除定時(shí)器。定時(shí)任務(wù)不會(huì)隨著組件銷毀而銷毀，所以組件銷毀后，
		如果還有定時(shí)任務(wù)沒(méi)有執(zhí)行，就會(huì)繼續(xù)調(diào)用loadEchart函數(shù)，
		而此時(shí)this.$refs.echart是undefined，echart就會(huì)報(bào)錯(cuò)：
		“Initialize failed: invalid dom”，意思就是“初始化失?。簾o(wú)效的dom”
		*/
		this.myObserver.unobserve(this.$refs.echart)
	},
	
	methods: {
		//加載echart
		loadEchart() {
			if(this.myEchart) {//如果echart已經(jīng)初始化過(guò)，需要銷毀，否則會(huì)報(bào)錯(cuò)：重復(fù)初始化
				this.myEchart.dispose()
			}
			this.myEchart = echarts.init(this.$refs.echart)
			let option = {
				xAxis: {
					data: ['1月', '2月', '3月']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '銷量',
						type: 'bar',
						data: [100, 200, 300]
					}
				]
			}
			this.myEchart.setOption(option)
		}
	}
	
}
</script>
<style scoped>
	.echart {
		width: 100%;
		height: 500px;
	}
</style>