如何设置echarts随页面大小变化自适应

最新推荐文章于 2026-04-17 04:24:56 发布

原创最新推荐文章于 2026-04-17 04:24:56 发布 · 1.6w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍如何使ECharts折线图和柱状图在浏览器窗口调整大小时自适应。通过在初始化图表后添加窗口大小调整监听器并调用图表的resize方法，可以实现图表的动态调整，保持良好的视觉效果。

echarts折线图随页面大小变化自适应

在项目中应用做echarts折线图,柱状图时会碰到需求是echarts会随着游览器的放大，缩小自适应。其实很简单，现在给出解决的办法。

成果实例展示：

代码展示：

//下面my_charts是html中echarts的ID
  var myChart= echarts.init(document.getElementById("my_charts"));
myChart.setOption(option);

//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可
    window.onresize = function () {
        myChart.resize();
    }

是不是很简答,如果有需要完整demo的可以在文章下面留言。