当屏幕大小变化时，ECharts 主要通过以下几种方式来实现屏幕适配：
使用响应式布局
- 容器自适应：ECharts 图表通常被放置在一个 HTML 容器元素中，通过设置容器的 CSS 属性，如
width: 100%; height: 100%，让容器能够根据父元素的大小自动调整。这样，当屏幕大小改变时，容器会相应地缩放，为 ECharts 图表提供自适应的空间。 - 百分比布局：在使用 ECharts 时，可以将图表的宽度和高度设置为相对于容器的百分比。例如，将图表的宽度设置为
width: 80%;，高度设置为height: 60%，使其能够随着容器的大小变化而按比例缩放，从而适应不同屏幕尺寸。
利用 ECharts 的 resize 方法
-
监听窗口大小变化事件：可以通过 JavaScript 监听浏览器窗口的
resize事件，当窗口大小发生变化时，触发相应的回调函数。在回调函数中，调用 ECharts 实例的resize方法，让图表重新计算尺寸并进行自适应调整。示例代码如下：
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('chartContainer'));
// 绘制图表
myChart.setOption(option);
// 监听窗口大小变化
window.addEventListener('resize', function () {
myChart.resize();
});
- 主动触发 resize：除了监听窗口的
resize事件，在某些情况下，比如当页面中有其他元素的变化会影响到 ECharts 图表的容器大小时，也可以主动调用resize方法来确保图表及时进行适配。
配置 ECharts 的自适应属性
- responsive 属性：ECharts 的配置项中有
responsive属性，将其设置为true时，图表会根据容器的大小自动调整自身的大小和布局，以适应不同的屏幕尺寸。例如：
javascript
var option = {
responsive: true,
// 其他配置项
};
-
mediaQuery：ECharts 还支持
mediaQuery配置，允许根据不同的媒体查询条件来设置不同的图表配置。通过定义不同屏幕尺寸下的配置规则，可以实现更精细的屏幕适配。例如：
javascript
var option = {
media: [
{
query: '(max-width: 600px)',
option: {
// 针对小屏幕的配置
}
},
{
query: '(min-width: 601px) and (max-width: 1024px)',
option: {
// 针对中等屏幕的配置
}
}
]
};
数据和图形的自适应调整
- 数据自适应：当屏幕尺寸变化时，可能需要对数据进行重新处理或调整显示方式。例如，在柱状图中，如果屏幕变窄，可以考虑减少显示的柱状数量，或者调整柱状的宽度，以确保图表的可读性。ECharts 提供了数据缩放和数据过滤等功能，可以根据屏幕大小和数据量来动态调整数据的展示。
- 图形自适应：ECharts 中的图形元素会根据图表的大小和数据范围自动调整比例和位置。例如，在折线图中，线条的粗细、节点的大小等会根据图表的整体尺寸进行自适应调整，以保持良好的视觉效果。
