一、问题
echarts 未监听到 echarts 宽高变化而动态变化
<template>
<div id="echart" ref="echart" style="width: 100%; height: 300px"></div>
</div>
</template><script>
export default {data() {
return {
myChart: null,
}
},
mounted() {
this.initEcharts()
},
methods:{
initEcharts(){
this.myChart = this.$echarts.init(this.$refs.echart)
this.handleResize()
var echartOptions ={
// 设置echarts的options
}
this.myChart.setOption(echartOptions)
},
// 监听div宽高的变化（动态渲染echarts宽高）
handleResize() {
const resizeObserver = new ResizeObserver((entries) => {
// entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息
for (const entry of entries) {
const { width } = entry.contentRect
// 根据外部盒子的宽度来设置echarts图的宽度
this.myChart.resize({ width })
}
})
// 开始监听最外层的 resizeTarget 元素的大小变化
const resizeTarget = this.$refs.echart
resizeObserver.observe(resizeTarget)
// 在组件销毁时停止监听，防止内存泄漏
this.$once('hook:beforeDestroy', () => {
resizeObserver.disconnect()
})
},
},
beforeDestroy() {
if (this.myChart) {
this.myChart.dispose()
}
},
</script>
