echart根据页面尺寸自动更新尺寸
mixin 代码,使用时在echats图页引入即可
import { debounce } from '@/utils';
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null,
};
},
mounted() {
this.initListener();
},
activated() {
if (!this.$_resizeHandler) {
this.initListener();
}
this.resize();
},
beforeDestroy() {
this.destroyListener();
},
deactivated() {
this.destroyListener();
},
methods: {
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler();
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize();
}, 100);
window.addEventListener('resize', this.$_resizeHandler);
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler);
this.$_resizeHandler = null;
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
},
resize() {
const { chart } = this;
chart && chart.resize();
},
},
};