Multiple tab pages of layui contain multiple echarts, and echarts are compressed after switching

This problem occurs when echarts uses a percentage of width and height

Solution: monitor the tab and initialize echarts when clicking the corresponding tab

	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"></div>
		
 	// 监听选项卡 docDemoTabBrief 对应div lay-filter="docDemoTabBrief"
    element.on('tab(docDemoTabBrief)', function (elem) {
    
    
      // console.log(elem.index)
      var name;
      if (elem.index == 0) {
    
    
      name = echarts.init(document.getElementById('main1'), 'macarons');
      name.resize();
	}
});

Guess you like

Origin blog.csdn.net/aquariusVvZh/article/details/113120308