如圖,當我們切換左側菜單展示效果的時候,右側內容會對應變寬,但此時的echarts並不能執行自適應效果,這是因爲切換菜單展示效果並沒有觸發window.onresize,所以爲解決類似此問題,我們可使用element-resize-detector
1、引入element-resize-detector,npm install element-resize-detector --save
2、在對應位置上引入即可
let elementResizeDetectorMaker = require("element-resize-detector");
//監聽元素變化
let erd = elementResizeDetectorMaker();
let that = this;
erd.listenTo(document.getElementById("bar"), function (element) {
that.$nextTick(function () {
//使echarts尺寸重置
that.myEcharts.resize();
})
})
//監聽元素變化