背景:
当页面宽度变化时,echarts没有随着页面宽度变化而变化,需要手动刷新才能重绘,这样效果不好。以下介绍实现echarts宽度自适应的方法。
无自适应效果:
自适应效果:
实现思路:
echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行echarts的resize方法即可重绘canvas,从而实现对应自适应效果
实现步骤:
在页面初始化加载的时候,绑定页面resize事件监听。resize事件是在浏览器窗口大小改变时触发。
mounted() {
window.addEventListener('resize', () => {
if (this.$refs.myChart) {
this.$refs.myChart.resize();
}
})
},
beforeDestroy () {
/* 页面组件销毁的时候,别忘了移除绑定的监听resize事件,否则的话,多渲染几次
容易导致内存泄漏和额外CPU或GPU占用哦 */
window.removeEventListener('resize', () => {
this.myChart.resize()
})
}
或者另一种写法