解决首次加载echarts折线图（柱状图）时，图不能正常展示问题

最新推荐文章于 2024-07-01 09:31:16 发布

原创最新推荐文章于 2024-07-01 09:31:16 发布 · 1w 阅读

11 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

28 篇文章

订阅专栏

css

6 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文解决Echarts图表在加载时因浏览器宽度获取不准确而导致的显示问题，通过重新计算图表容器的宽度和高度，确保图表能正确展示。

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

使用echarts的过程中出现了一个问题：首次加载出echarts时，折线图（柱状图）不能正常按照标准的宽进行展示，如下图所示：

产生这个问题的原因是echarts在获取浏览器宽度时获取不准确造成的的问题，echarts没有准确获得浏览器的宽度，导致柱状图展示不正确、被压缩，其实主要是因为eacharts中将100%转换成成了100px，所以变成了100px，出现了上图的效果。想要解决上面的问题，现在需要做的就是重新获取当前的图的高宽度，并且设置给放eacharts的盒子//获得容器宽度、高度，代码如下：

var width = $("#echartsBox").width();
var height = $("#echartsBox").height();
$("#echartsBox").css("width", width).css("height", height);

//修改首次进入时图的宽度
setTimeout(function(){
     $(myCharts).resize();     
},200)
// 当浏览器窗口大小发生改变的时候修改图标的大小
$(window).resize(function(){
   $(myCharts).resize();
});

执行完上面的代码之后，下面展示就会正常，如下图：