VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題

更新時(shí)間：2023年07月01日 10:02:54 作者：初入前端的小謝

這篇文章主要介紹了VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Echarts的resize事件報(bào)錯(cuò)和移除windows的事件

Echarts的resize事件報(bào)錯(cuò)

原因：echart的api只有在實(shí)例化之后才能調(diào)用，如果直接調(diào)用肯定會(huì)導(dǎo)致報(bào)錯(cuò)

解決方式：在調(diào)用resize的之前判斷是否已經(jīng)實(shí)例化

this.barchart = this.$echarts.init(dom) // 實(shí)例化Echarts對(duì)象
/****************/
if(this.barchart) { // 方法一
?? ?this.syqchart.resize()
}
/****************/
this.syqchart && this.syqchart.resize() // 方法二
/****************/

移除windows的resize事件

一般在使用echart圖表時(shí)都會(huì)去監(jiān)聽(tīng)窗口大小的變化，以之來(lái)實(shí)現(xiàn)圖表的重新繪制。

但是當(dāng)添加了window事件之后，離開(kāi)了當(dāng)前頁(yè)面，也依然會(huì)繼續(xù)監(jiān)聽(tīng)并且執(zhí)行事件的回調(diào)函數(shù)，這樣就會(huì)導(dǎo)致瀏覽器CPU的占用，頁(yè)面卡頓。

解決方式：

? ? resizeHandler(){ // methods中定義事件處理函數(shù)（必須將處理函數(shù)提取出來(lái)，這樣在移除的時(shí)候就能通過(guò)指針找到該處理函數(shù)）
? ? ?? ?this.barchart && this.barchart.resize()
? ? ?? ?this.linechart && this.linechart.resize()
? ? }
? ? mounted() { // 頁(yè)面加載注冊(cè)事件
? ? ??? ?window.addEventListener('resize', this.resizeHandler, false)
? ?? ?}
? ?? ?beforeDestroy() { // 頁(yè)面離開(kāi)移除事件
? ? ?? ?window.removeEventListener('resize', this.resizeHandler)
? ?? ?}

ECharts的resize失效原因以及使用方法

很多朋友在開(kāi)發(fā)的過(guò)程中要把ECharts圖標(biāo)做成自適應(yīng)瀏覽器寬高的效果。

于是去翻看ECharts官網(wǎng)發(fā)現(xiàn)了resize方法，結(jié)果用了之后發(fā)現(xiàn)沒(méi)用，而且根本不知道什么原因。

解決辦法

不能給ECharts的容器設(shè)置固定的寬高。

寬度要寫(xiě)百分比
高度要寫(xiě)vh
然后再搭配resize方法才可以實(shí)現(xiàn)根據(jù)瀏覽器大小而改變大小的功能

示例代碼

let ECharts = echarts.init(document.getElementById('wrapBox'));
//ECharts的配置項(xiàng)和數(shù)據(jù)
let option = {
	title: {
		text: 'demo'
	},
	tooltip: {},
	legend: {
		data: ['dataSource']
	},
	xAxis: {
		data: ['aa', 'bb', 'cc']
	},
	yAxis: {},
	series: [{
		name: 'dataSource',
		type: 'bar',
		data: [2, 5, 6],
	}]
};
//配置圖表數(shù)據(jù)及配置項(xiàng)
ECharts.setOption(option);
//根據(jù)瀏覽器大小改變大小
window.onresize = () => {
	ECarts.resize();
	//如果有多個(gè)表變動(dòng)在下方依次寫(xiě)下去就可以了
}