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图表文章来源：https://www.toymoban.com/news/detail-689929.html
watch:{
'$store.getters.getIsCollapse'(value){
console.log(value)
setTimeout(() => {
this.chartResize()
}, 50)
}
},
注意：如果watch没有实现效果，可以尝试把setTimeout时间改大点文章来源地址https://www.toymoban.com/news/detail-689929.html
到了这里，关于echart自适应（适配），resize的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
