VUE中Echarts的resize事件報錯和移除windows的事件問題

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

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

Echarts的resize事件報錯和移除windows的事件

Echarts的resize事件報錯

原因：echart的api只有在實例化之后才能調(diào)用，如果直接調(diào)用肯定會導致報錯

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

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

移除windows的resize事件

一般在使用echart圖表時都會去監(jiān)聽窗口大小的變化，以之來實現(xiàn)圖表的重新繪制。

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

解決方式：

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

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

很多朋友在開發(fā)的過程中要把ECharts圖標做成自適應瀏覽器寬高的效果。

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

解決辦法

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

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

示例代碼

let ECharts = echarts.init(document.getElementById('wrapBox'));
//ECharts的配置項和數(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ù)及配置項
ECharts.setOption(option);
//根據(jù)瀏覽器大小改變大小
window.onresize = () => {
	ECarts.resize();
	//如果有多個表變動在下方依次寫下去就可以了
}