首先,需要加载图表的div盒子id为storageShort
<template>
<div id="storageShort"></div>
</template>
定义方法,获取这个dom节点,加载图表。将该方法挂载在mounted中
initChart() {
this.myChart = echarts.init(
document.getElementById("storageShort")
);
this.myChart.setOption(this.option);
},
接着在mounted中添加一个监听,使图表自适应
(这里使用箭头函数,否则在Vue中会出现this指向的问题)
mounted() {
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
别忘了销毁页面时移除监听
beforeDestroy() {
window.removeEventListener("resize");
},
参考:eCharts自适应
关于Vue中使用eCharts响应容器大小的变化,出现Cannot read properties of undefined (reading ‘resize‘)的问题
这篇博客介绍了如何在Vue组件中使用ECharts库创建图表,并确保图表能够根据窗口大小变化进行自适应调整。首先,通过`mounted`生命周期钩子加载图表,并初始化ECharts实例。然后,利用箭头函数监听窗口的resize事件,调用`myChart.resize()`来实现图表的动态调整。最后,在`beforeDestroy`钩子中移除resize事件监听,避免内存泄漏。示例代码展示了如何在Vue模板中设置图表的div容器,并在组件销毁时正确清理资源。
1167

被折叠的 条评论
为什么被折叠?



