设置echarts自适应大小的方法有百分比设置容器大小、resize事件监听器和CSS媒体查询。详细介绍：1、百分比设置容器大小，通过将图表容器的宽度和高度设置为百分比值；2、resize事件监听器，通过监听窗口大小的变化，可以在窗口大小改变时重新设置图表的宽度和高度；3、CSS媒体查询，通过在CSS中定义不同的样式规则，可以根据屏幕的宽度和高度来设置图表容器的大小。
ECharts是一款基于JavaScript的开源可视化库，用于创建交互式和动态的图表和图形。它提供了丰富的图表类型和灵活的配置选项，使开发人员能够轻松地创建各种各样的数据可视化。
在使用ECharts时，一个常见的需求是使图表能够自适应大小，以适应不同的设备和屏幕尺寸。下面将介绍几种常用的方法来设置ECharts图表的自适应大小。
1. 使用百分比设置容器大小：
通过将图表容器的宽度和高度设置为百分比值，可以使图表自适应父容器的大小。例如，可以将图表容器的宽度设置为"100%"，高度设置为"100%"，这样图表就会自动根据父容器的大小进行调整。
var chart = echarts.init(document.getElementById('chart'));2. 使用resize事件监听器：
另一种方法是使用resize事件监听器来动态调整图表的大小。通过监听窗口大小的变化，可以在窗口大小改变时重新设置图表的宽度和高度。
var chart = echarts.init(document.getElementById('chart'));
window.addEventListener('resize', function() {
chart.resize();
});这样，当窗口大小改变时，图表会自动重新调整大小以适应新的窗口尺寸。
3. 使用CSS媒体查询：
可以使用CSS媒体查询来根据不同的屏幕尺寸设置图表的宽度和高度。通过在CSS中定义不同的样式规则，可以根据屏幕的宽度和高度来设置图表容器的大小。
<style>
@media (max-width: 768px) {
#chart {
width: 100%;
height: 300px;
}
}
@media (min-width: 768px) {
#chart {
width: 100%;
height: 500px;
}
}
</style>
<div id="chart"></div>这样，当屏幕宽度小于768px时，图表容器的高度将为300px，当屏幕宽度大于等于768px时，图表容器的高度将为500px。
以上是几种常用的方法来设置ECharts图表的自适应大小。根据具体的需求和场景，可以选择适合的方法来实现图表的自适应。无论是使用百分比设置容器大小、使用resize事件监听器还是使用CSS媒体查询，都可以帮助开发人员创建出适应不同设备和屏幕尺寸的图表 。
