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

要使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图表的自适应布局。