When echarts uses resize to redraw, the image that should have become smaller becomes larger.

Problem Description:

Monitor when the visible window area changes, such as the frame sidebar being hidden. When the sidebar is hidden, the blank space increases, but the resized image does not become larger. After hiding and expanding the sidebar, the blank area is reduced and the resized image becomes larger, which is obviously unreasonable.

code show as below

export default{
    
    
	data(){
    
    
		return{
    
    
		chart:null,
		//配置项省略
		option:{
    
    ...}
	},
	methods:{
    
    
		//echart初始化
		echartsInit(){
    
    
		this.chart = echarts.init(document.getElementById('decAmount'),'macarons')
		this.chart.setOption(this.option)
		}
	},
	mounted(){
    
    
	//挂载到mounted上初始化
		this.echartsInit()
	},
	watch:{
    
    
		'isCollapse'(val){
    
    
			//监听isCollapse属性，当该值变化时说明窗口大小发生了变化
			this.chart.resize()
		}
	}
}

Detailed description of the problem

The reason why the response effect is inconsistent is that the retracting of the sidebar of the frame is a dynamic hiding effect. When the sidebar is hidden, resize is triggered, but the window size has not changed yet, so it does not increase. After the sidebar is hidden, The window has become larger. Listen again. Resize thinks there is more blank space, so it becomes larger.

Solution

Set the timing at the resize location and wait until the sidebar (hide/expand) is completed before calling resize()

watch:{
    
    
    'isCollapse'(val){
    
    
      setTimeout(()=>{
    
    
        this.chart.resize()
      },500)
    }
}