this.myChart = echarts.init(document.getElementById('firm_chart'))
window.addEventListener("resize", this.chartResize);
chartResize() {this.myChart.resize()
},
beforeDestroy() {window.removeEventListener("resize", this.chartResize);
},
多图表自适应:
mounted() {window.addEventListener("resize", this.chartResize);
},
beforeDestroy() {window.removeEventListener("resize", this.chartResize);},
chartResize() {this.myChart.resize()this.myChart2.resize()},
问题:隐藏侧边栏后,图表没有自适应容器;
解决办法:
1、把侧边栏隐藏的状态存起来,vuex或者其他地方,我这里存放到vuex中
//展开和收缩
toggleCollapse(){this.isCollapse=!this.isCollapse// 存到Vuex中this.$store.dispatch("setIsCollapse", this.isCollapse);
},
2、在你需要自适应图表的页面或组件中,去监听vuex中的值,如果侧边栏的状态(隐藏或显示)改变,那么就重新渲染echarts图表
watch:{'$store.getters.getIsCollapse'(value){console.log(value)setTimeout(() => {this.chartResize()}, 50)}},
注意:如果watch没有实现效果,可以尝试把setTimeout时间改大点