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

红太狼 2023-10-18 09:21 156阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

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

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

红太狼/ 2023年10月18日 09:21/ 0 赞/ 157 阅读

相关 echarts设置容器宽度设置为100%只显示100px宽度

问题：前面的tab栏里面的柱形图表都是100%的宽度，最后一个换成折线图时出现宽度无法自适应的情况。 <div class="environmentChart"

亦凉/ 2023年06月21日 14:28/ 0 赞/ 45 阅读

相关 echarts宽度100%变成了100px (实用）

原文出处：[https://www.cnblogs.com/SoundOfTheSea/p/7699683.html][https_www.cnblogs.com_SoundO

以你之姓@/ 2023年05月29日 06:52/ 0 赞/ 11 阅读

相关 echarts图例的显示与隐藏

需求在图表加载的时候，默认只显示部分图例，只要图例显示部分，对应的柱图或者折线图也只显示对应的。点击一个按钮显示剩余的图例，或者点击置灰的图例让恢复显示。核心

﹏ヽ暗。殇╰゛Y/ 2023年03月04日 15:29/ 0 赞/ 89 阅读

相关 echarts隐藏之后再显示

设置隐藏后，再显示重新设置一下图表的宽度以及高度。 var bor = document.getElementById("container"); b

ゞ浴缸里的玫瑰/ 2022年12月24日 02:59/ 0 赞/ 187 阅读

相关获取隐藏div的宽高

<script src="js/jquery.actual.js"></script> <script type="text/javascript">

╰半橙微兮°/ 2022年10月28日 04:56/ 0 赞/ 223 阅读

相关 echarts图表宽高

options: { color: ["4D7CFE", "F1683F"], grid: { //grid 组件离容器上下左右侧的距离

傷城~/ 2022年10月06日 00:40/ 0 赞/ 231 阅读

相关 css 设置宽高 calc(100vh - 56px) widht: calc(12%+5em)

1、px 像素，我们在网页布局中一般都是用px。 2、百分比百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewpor

落日映苍穹つ/ 2022年09月09日 06:17/ 0 赞/ 411 阅读

相关 echarts大小自适应，width=100%实际100px的问题

1. echarts大小自适应 1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象 data() { return {

分手后的思念是犯贱/ 2022年09月07日 12:27/ 0 赞/ 379 阅读

相关 echarts自适应宽高

页面结构： <div id="echarts_pie2" class="charts" :style="{height:vheight+ 'px',width:vwi

快来打我*/ 2022年09月05日 01:46/ 0 赞/ 265 阅读