监听窗体变化
当浏览器窗体发生变化的时候会触发。
主要用在布局计算,比如说分辨率不一样,高度宽度需要重新计算渲染。
例如echarts报表,当我们的浏览器缩放发生变化或者是电脑分辨率发生变化之后,已渲染的echarts报表大小位置是不会发生变化的,所以可以使用这个方法监听浏览器窗体变化,来重新渲染echarts报表,解决错版。
窗体变化echarts报表重新渲染
addEventListener()添加事件监听
addEventListener(event, function, useCapture)
(1)参数event必填,表示监听的事件,例如 click, resize等,不加前缀on的事件。
(2)参数 function必填,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。不带参数。
(3)参数 useCapture选填,填true或者false,用于描述事件是冒泡还是捕获触发,true表示捕获,默认false表示冒泡。
//方式一
<template>
<div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
let echartsInit: echarts.ECharts | null = null
const init = () => {
if (!echartsInit) {
console.log('触发了+++++++++++++++++++++++++');
echartsInit = echarts.init(mainEcharts.value);
echartsInit.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
})
}
echartsInit?.resize()
}
onUnmounted(() => {
window.removeEventListener("resize", init);
console.log('卸载了+++++++++++++++++++++');
})
onMounted(() => {
init()
window.addEventListener("resize", init);
console.log("组件挂载到页面之后执行-------onMounted");
});
</script>
window.onresize = function(){}
window.onresize
只能在一个组件中使用,如果多个组件调用则会出现覆盖情况
//方式二
<template>
<div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
const init = () => {
console.log('触发了+++++++++++++++++++++++++');
const echartsInit = echarts.init(mainEcharts.value);
echartsInit.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
})
window.onresize = (event) => {
return (() => {
console.log(event, "event");
echartsInit?.resize()
})()
};
}
onUnmounted(() => {
window.onresize = null //注销window.onresize事件
console.log('卸载了+++++++++++++++++++++');
})
onMounted(() => {
init()
console.log("组件挂载到页面之后执行-------onMounted");
});
</script>
上两种方法自然是有用的,但有些场景不适用。
例如有个可以收缩的侧边栏,当收缩侧边栏时浏览器窗口大小是没有发生改变的,但由于页面是响应式的,内容区域容器宽高是变化的,这时候我们要监控容器的变化来实现echarts图表的重新渲染文章来源:https://www.toymoban.com/news/detail-632317.html
Web API提供了一个方法ResizeObserver来实现文章来源地址https://www.toymoban.com/news/detail-632317.html
//方式三
<template>
<div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, ResizeObserver } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
let resizeObserver: ResizeObserver | null = null,
canResize = true
const init = () => {
const echartsInit = echarts.init(mainEcharts.value);
echartsInit.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
})
const targetElement = document.getElementsByClassName('hasTagsView')[0];
resizeObserver = new ResizeObserver(entries => {
if (!canResize) {
return
}
canResize = false
setTimeout(() => {
canResize = true
console.log('监听到宽高的变化++++++++++++');
echartsInit.resize()
}, 500)
/* console.log(entries[0].contentRect.width)
console.log(entries[0].contentRect.height) */
})
resizeObserver.observe(targetElement)
}
onUnmounted(() => {
// 停止监听给定的元素
// resizeObserver?.unobserve(targetElement);
// 停止监听所有元素
resizeObserver?.disconnect();
console.log('卸载了+++++++++++++++++++++');
})
onMounted(() => {
init()
console.log("组件挂载到页面之后执行-------onMounted");
});
</script>
到了这里,关于vue3 echarts自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!