mounted() {
this.drawChart1();
this.drawChart2();
this.drawChart3();
this.drawChart4();
},
created() {
// 监听页面变化
window.addEventListener("resize", function () {
setTimeout(() => that.handleResize(), 300)
});
// 监听侧边菜单伸缩
let that = this
// 侧边栏伸缩时echarts图表大小自适应(开始监听)
that.unWatch = that.$watch(
// 获取全局变量,此变量控制菜单的展开与折叠
// 当点击菜单栏按钮实现伸缩时此变量会发生变化
() => that.$store.state.app.sidebar.opened,
// 执行echarts自适应函数
// 设置定时器是因为element-ui的菜单组件有300毫秒的动画
// 需要等到动画加载完毕再执行echarts自适应,否则不起作用
() => setTimeout(() => that.handleResize(), 300)
);
},
写一个监听侧边栏事件,监听到重新渲染ecahrts就可以了
handleResize() {
for (let i = 1; i <= 4; i++) {
let myChart = echarts.init(document.getElementById('main' + i));
myChart.resize();
}
},