首先说下原理 菜单的折叠展开是由一个变量控制的 将这个变量存入vue-x中 点击改变状态就存入变量 在echarts渲染的时候 监听这个vue-x中存入的变量 有变化即用charts.resize 就可以实现自适应啦 就还是挺方便哒 vue-x的存变量我上一边介绍的很清晰:
点击折叠展开菜单触发的方法:
//点击按钮折叠菜单
toggleCollapse() {
this.isCollapse = !this.isCollapse //点击折叠按钮后,对isCollapse进行取反
this.$store.commit('setCollapsede',this.isCollapse); // 存入变量
},
在echarts组件里面监听:
computed: {
isCollapsede() {
return this.$store.state.menuStatus.isCollapsed
},
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
},
},
isCollapsede(val) {
setTimeout(() => {
this.chart = echarts.init(this.$el, 'macarons');
this.chart.resize();
}, 300)
},
},
好啦 接上一篇vue-x很全的 ~~~~~~~~~