解决echarts显示隐藏造成100px高宽

隐藏的div应该在js中手动设置隐藏,若在html中设置隐藏会出现上来就隐藏,后面再重新给echarts赋高、宽也是不起作用的情况。解决办法,先给ehcarts赋值高宽,再隐藏。

1. html代码定义echarts:

 <div class="mini-splitter" id="mapDiv" vertical="true" allowResize="false" handlerSize="1" style="width:100%;height:100%;font-family:'黑体'">                             
              <div showCollapseButton="true" style="height: 100%;">                  
                <div style="width:100%; height: 100%; margin: 0 auto;" id="map"></div>         
            </div>        
            <div size="0%" showCollapseButton="false">      
                <!-- 列表开始-->           
                <div id="mapDataGrid" class="mini-datagrid" allowResize="true" showPager="false" multiSelect="true" allowAlternating="false" style="height:100%;width:100%">
                    <div property="columns">
                        <div type="indexcolumn"></div>        
                        <div field="year" align="center" headerAlign="center" width="100">年度</div>      
                      
                    </div>
                </div> 
                <!-- 列表结束 --> 
            </div>
         </div>

2.js中设置高宽再隐藏:  

$("#map").css({"width":$("#map").width(),"height":$("#map").height()});                      //隐藏之前先设置高、宽,防止出现100px
         document.getElementById("mapDiv").style.display= "none";   

3.显示echarts时再重新赋值高宽:

function showMapCharts(){    
         $("#map").css({"width":$("#map").width(),"height":$("#map").height()});      
         var optionMap = {  
                 backgroundColor: '#F9F9F9',                      
                 title: {  
                     text: getTitle(),  
                     subtext: '',  
                     x:'center',       
                     textStyle : {      
                        color:'black', 
                        fontFamily:'黑体',        
                        fontSize : 16   
                    }
                 },  
                    toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                 },
                 tooltip : {         
                     trigger: 'item',          
                     formatter:function (params) {               
                         var tipMessage = getTipMessage(params['data'].name,params['data'].value);      
                         return tipMessage;   
                     }
                 },  
                 visualMap: {  
                     show : true,  
                     x: 'left',  
                     y: 'center',             
                     splitList: mapSplit,            
                     color:['#FFB980', '#C8B2F4', '#32DADD']       
                 }, 
                 series: [{      
                     name: '数据',      
                     type: 'map',  
                     mapType: 'china',   
                     roam: true,  
                     label: {  
                         normal: {  
                             show: true        
                         },  
                         emphasis: {  
                             show: true     
                         }  
                     }, 
                     itemStyle: {
                         emphasis: {             
                             areaColor: 'rgba(0,0,0,0)'          //鼠标放上去对应区域地图的颜色          
                         }
                     }, 
                     data:mapData,         
                    
                 }]
             };  
         var myChart = echarts.init(document.getElementById('map')); 
         myChart.clear(); 
         myChart.setOption(optionMap);           
     }

猜你喜欢

转载自blog.csdn.net/ZHANGLIZENG/article/details/82893424