Layui tab display echarts chart can only show the first

use the tabs of the layui front-end framework to display different echarts charts, get data from the background, then assign and display different charts

clipboard.png

clipboard.png

then click the tab at the back and it won"t show up. The methods of debug passing js have all been done. No problem. Baidu can only do this from Baidu to bootstrap

.
Echarts
May.24,2021

this is really too easy.
just add layui-show to each tab.
for example, three tab will do
< div class= "layui-tab-item layui-show" >
< div class= "layui-tab-item layui-show" >
< div class= "layui-tab-item layui-show" >

Hello, I see that you can only show the first question about layui-tab Echarts. I have encountered the same problem recently. Have you solved it yet? May I have some advice?

+ 1, this is not that it cannot be displayed, but the echarts graphics are also initialized. At the beginning, only the first tab is initialized, so the first tab displays normally, and the other tabs have no width, so the echarts initialized with him has no width. When the second tab is clicked, the tab is initialized, but the echarts is not initialized with the original echarts,. The width has not changed, can not be displayed, the solution, one is to enter the page, all the tabs are initialized, the other is to click the tab, trigger method, reload echarts, the first method, who knows how to initialize all tabs together? The second method, very cumbersome, to find their own click tab click method, I now want to know how to initialize all the tabs?

The tab switching tab of

layui has this problem, and it also occurred when I was doing it, which is really the reason for initialization. Then I used this method. You can take a look at the code as follows: < script > 

  layui.use(['table','element','jquery'], function(){
      var table = layui.table;
      var element = layui.element;
      var $ = layui.$ //
    
      //Tabiframe
      element.on('tab(test1)', function(data){
          var tabIndex = data.index;
          var src = $(".layui-tab-content div").eq(tabIndex).attr("src");
          $(".layui-tab-content div").eq(tabIndex).find("iframe").attr("src",src);
      });
    });

< / script >

this problem will occur if the container is not wide or hidden at first.
the best solution is that echarts comes with resize,
call the echarts object .resize () when appropriate.
is like this

. 
  
 each of my graphs corresponds to a div container, and then resets the size after each setOption: 
 monthChart.setOption (option); 
 / / echart reset size 
 monthChart.resize ();

Previous: Jquery click event lost response

Next: How does echars load into a line chart on demand in vue?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf5680-3a321.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf5680-3a321.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?