隱藏的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);           
     }