要使echarts图表能根据屏幕大小自动调整，可以使用以下方法：
1. 设置容器的宽度和高度为百分比：将echarts图表的容器元素的宽度和高度设置为百分比值，以使其相对于父容器自动调整大小。
<div id="chartContainer" style="width: 100%; height: 100%;"></div>
2. 使用window的resize事件：可以监听窗口大小改变的事件，并在事件回调函数中重新调整echarts图表的大小。
// 获取图表容器元素var chartContainer = document.getElementById('chartContainer');
// 初始化图表
var myChart = echarts.init(chartContainer);
// 监听窗口大小改变事件
window.addEventListener('resize', function() {
// 调整图表大小
myChart.resize();
});
这样，当窗口大小发生改变时，图表会自动调整大小以适应新的窗口尺寸。
3. 使用CSS媒体查询：通过使用CSS媒体查询，可以根据不同的屏幕尺寸应用不同的样式，从而实现自适应布局。
@media (max-width: 768px) { /* 在小屏幕上的样式 */
#chartContainer {
width: 100%;
height: 300px;
}
}
@media (min-width: 769px) {
/* 在大屏幕上的样式 */
#chartContainer {
width: 100%;
height: 600px;
}
}
在上面的示例中，当屏幕尺寸小于等于768px时，图表容器的高度为300px；当屏幕尺寸大于769px时，图表容器的高度为600px。这样可以根据屏幕大小自动调整图表的大小。
以上是几种常见的方法，你可以根据具体需求选择适合的方法来实现echarts图表的自适应布局。
