echarts自适应父div大小

最新推荐文章于 2025-07-04 16:08:55 发布

chde2Wang

最新推荐文章于 2025-07-04 16:08:55 发布

阅读量1.8w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_38383877/article/details/83113088

js 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了在使用ECharts进行数据可视化时，解决图表无法随浏览器窗口大小变化而自适应显示的问题。作者尝试了多种方法，包括监听窗口resize事件，最终发现引入并使用jquery.ba-resize.js插件可以有效解决此问题。

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

百度了n种办法，试了n种办法后终于测出来了。

方法一：window.οnresize=myChart.resize; 但是没有效果

方法二：

window.addEventListener("resize", function () {

myChart.resize();

});

依旧没有效果

方法三：

<div class="summary">
    <div id="annual" ></div>
</div>


$('.summary').resize(function () {
    var annual = echarts.init(document.getElementById("annual"));
	annual.resize();
});

依旧没有效果。

最后：百度到jquery有resize()事件，但直接调用没有起作用，引入jquery.ba-resize.js文件就可以了。经过试验，终于ok了

query有resize()事件，但直接调用没有起作用，必须引入jquery.ba-resize.js文件。

下载位置：https://download.youkuaiyun.com/download/weixin_38383877/10727216

例如：


<div class="chart">
    <div class="col-md-3" style="width:73%;height:270px" id="chartx"></div>
</div>
<script src="/static/assets/scripts/jquery.ba-resize.js"></script>
js代码：
var myChartx = echarts.init(document.getElementById('chartx'));
$('.chart').resize(function(){
		myChartx.resize();
	});

参考自：https://blog.youkuaiyun.com/yf814359680/article/details/71404654