问题引出:开发中会遇到div盒子宽度发生改变,echarts图表却不能自适应,这是因为局部div宽度变化并没有触发window.onresize,如果想要监听div变化,我们可使用element-resize-detector
1.安装element-resize-detector
npm install element-resize-detector --save
2.在vue中引入,html结构
import elementResizeDetectorMaker from 'element-resize-detector'
3.初始化使用(我这里封装到methods里面)
initListenToDiv(ref){
let erd = elementResizeDetectorMaker();
let that = this
erd.listenTo(ref, () => {
that.$nextTick(function () {
//使echarts尺寸重置
that.myChart.resize();
});
})
},
说明:这里的ref,就是你要监听的div,因为在div中,不建议用doc那原生一套获取div。myChart对象初始化时,我放到data里面了。
4.在mouted中初始化函数
this.initListenToDiv(this.$refs.mychartRef)