谈谈Pear Admin Layui多标签切换echarts显示不完整问题

Pear Admin Layui是一个开箱即用的前端开发模板，提供多标签切换功能

echarts是目前较为常用的数据图表工具组件，在Pear Admin的演示功能里有数据图表菜单，可以看到，打开折线图和柱状图的菜单可以立刻加载出对应的界面，响应很快，不容易发现问题。

但是实际开发过程中，图表页面加载速度可能因为数据量大、网络延迟等问题，并不能立刻加载，此时若快速打开多个图表界面，切换tab标签或关闭tab标签时，会出现图表显示尺寸很小蜷缩在页面左上角的现象（图来自于网络截图）：

原理

这是因为echarts只能在显示的容器中渲染，在自适应页面大小的页面中，作为echarts容器的div尺寸没有预设大小，在页面没有完全渲染完成时div大小为一个很小的值，这样echarts渲染在容器里就是上述异常情况，解决办法通常有两种常用思路：

为div设置固定大小
延迟渲染echarts

显然第一种方式不利于页面自适应，因此就不讨论了，这里谈谈在Pear Admin Layui中多标签echarts延迟渲染的做法。

解决

Pear Admin Layui使用iframe实现，我的思路是：

在含echars的子页面中定义echarts数组：var charts = new Array();
echarts.init和setOption后：charts.push(myChart);
定义手动触发echarts渲染函数：

function chartsResize() {
   for(var i = 0; i < charts.length; i++) {
      charts[i].resize();
   }
}

解决tab切换时的echarts大小异常问题，定位到切换点击事件（component/pear/module/admin.js）：

bodyTab.click(function(id) {
   if (!param.tab.keepState) {
      bodyTab.refresh(false);
   }
   //处理切换标签过快图表加载不完整问题
   try {
      $("#"+id)[0].contentWindow.chartsResize();
   }catch (error) {

   }
   bodyTab.positionTab();
   sideMenu.selectItem(id);
})

解决关闭标签暴露出的前一个标签echarts大小异常问题，定位到关闭点击事件（component/pear/module/admin.js）：

this.closeTab = function(id) {
   if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
      pearTab.delTabByElem('content', id, function(currentId){
         //处理关闭标签过快图表加载不完整问题
         try {
            $("#"+currentId)[0].contentWindow.chartsResize();
         }catch (error) {

         }
         sideMenu.selectItem(currentId);
      });
   } else {
      return;
   }
}

刷新浏览器缓存

谈谈Pear Admin Layui echarts多标签切换问题

谈谈Pear Admin Layui多标签切换echarts显示不完整问题

原理

解决