echarts がサイズ変更を使用して再描画すると、小さくなるはずの画像が大きくなります。

問題の説明:

フレームのサイドバーが非表示になるなど、表示されるウィンドウ領域が変化することを監視します。サイドバーを非表示にすると余白が増えますが、リサイズされた画像は大きくなりません。サイドバーを非表示にして展開すると、空白領域が減り、リサイズされた画像が大きくなりますが、これは明らかに無理があります。

コードは以下のように表示されます

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()
		}
	}
}

問題の詳細な説明

応答効果が一貫しない理由は、フレームのサイドバーの格納が動的非表示効果であるためです。サイドバーが非表示になるとサイズ変更がトリガーされますが、ウィンドウ サイズはまだ変更されていないため、増加しません。サイドバーが非表示になりました。ウィンドウが大きくなりました。もう一度聞いてください。サイズ変更すると、余白が増えたと考えられるため、大きくなります。

解決

サイズ変更位置でタイミングを設定し、サイドバー(非表示/展開)が完了するまで待ってからresize()を呼び出します。

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