首先,需要加载图表的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‘)的问题