Echarts 不能百分比显示或显示有问题

最新推荐文章于 2025-05-24 00:03:15 发布

weixin_34408624

最新推荐文章于 2025-05-24 00:03:15 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Han39/p/8066635.html

本文介绍了解决ECharts地图和折线图在不同分辨率下显示异常的问题，包括地图高度获取错误及折线图显示尺寸不正确的情况。通过调整JS控制显示隐藏逻辑与使用媒体查询的方法，确保了在不同屏幕尺寸下地图和折线图能够正确展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，设折线图宽为100%（如：容器div的class=“RiBarBot”宽为880px），刚初始化时隐藏折线图（或后期刷新、隐藏与显示折线图时），当点击显示折线图时，获取到的宽只有100px，并不是.RiBarBot{width:100%;}如下图：

解决方案：

①：适应个别情况。

/*css不使用*/
.RiBarBot{display:none}   // 采用position定位

//初始化时：
$(".RiBarBot").hide();$(".RiBarBot").hide();

//用js控制  ：
// 单击显示时：
$(".RiBarBot").css("opacity","1");
// 单击隐藏时：
$(".RiBarBot").css("opacity","0");

②：分辨率（以1360和1920为例）改变时宽度和高度都获取不全，使用媒体查询

@media screen and (min-width: 1300px) {    
    .RiBarBot{
        width:880px;
        height: 500px;
    }
}
@media screen and (min-width: 1900px) {    
    .RiBarBot{
        width:1200px;
        height: 776px;
    }
}  
/* 
或
正常分辨率时：
*/
.RiMapBot{
    width: 880px;
    height: 46rem;
}
/*大屏显示时：*/
@media screen and (min-width: 1900px) {    
    .RiBarBot{
        width:1200px;              
    }
}

2.设地图宽为100%（如：容器div的class=“RiMapBot”宽为880px）

.RiMapBot{　　 width: 100%; height: 46rem; }

在1360的分辨率上等同于.RiMapBot{　　 width: 880px; height:552px; }

问题：初始化时，1360分辨率显示正常。但在1920的分辨率上，宽度获取正常，echarts地图获取高度还是552px，但父容器宽高获取正常。
原因：将setRem();的调用放到其他函数下面，造成地图先加载或改变分辨率宽高。
解决方案：

$(document).ready(function(){
    //  setRem();的调用放到最上方
    setRem();
    $(window).resize(function(){
        setRem();
    });
    // 以下是其他初始化函数的调用
    
});

另解决方案可采用媒体查询。