echarts图表的自适应，多张图表自适应屏幕

最新推荐文章于 2025-09-11 20:04:01 发布

原创最新推荐文章于 2025-09-11 20:04:01 发布 · 766 阅读

5 ·

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

收录于

vue

当前文章被收录于：

vue

5 篇文章 0 人学习

订阅专栏查看详情

echarts

当前文章被收录于：

echarts

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使ECharts图表在浏览器窗口大小改变时自适应。通过使用resize函数和addEventListener监听resize事件，可以实现单个或多个图表的动态调整。适用于前端开发人员。

echart图表本身是提供了一个resize的函数的。
于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。
用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件
当然这是单个图表的情况，要是多个图表，发现会不起作用。
多个图表可以使用addEventListener


window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart2.resize();  
    this.myChart3.resize();
});



在vue组件上就可以直接单个组件添加进事件列表
myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});

myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});
欢迎交流和学习