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

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

1. html代码定义echarts:

 
                                           
                                  
                     
                    
                                                  
                    
                        
                                
年度
                                                 
                
                                
        

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

 

你可能感兴趣的:(解决echarts显示隐藏造成100px高宽)