echarts怎么根据大小自动调整屏幕

要使echarts图表能根据屏幕大小自动调整，可以使用以下方法：

1. 设置容器的宽度和高度为百分比：将echarts图表的容器元素的宽度和高度设置为百分比值，以使其相对于父容器自动调整大小。

<divid="chartContainer"style="width:100%;height:100%;"></div>

2. 使用window的resize事件：可以监听窗口大小改变的事件，并在事件回调函数中重新调整echarts图表的大小。

//获取图表容器元素
varchartContainer=document.getElementById('chartContainer');
//初始化图表
varmyChart=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图表的自适应布局。