echarts图表自适应屏幕大小

ECharts图表可以通过设置容器的宽高来适应不同的屏幕大小。可以通过以下几种方式来实现图表的自适应：
1. 使用百分比设置容器的宽高，例如：
```html

```
这样图表的容器会随着父容器的大小而自动调整。
2. 使用CSS媒体查询来设置容器的宽高，根据不同的屏幕尺寸设置不同的样式，例如：
```html

@media (max-width: 600px) {
#chart {
width: 100%;
height: 300px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
#chart {
width: 100%;
height: 400px;
}
}
@media (min-width: 1201px) {
#chart {
width: 100%;
height: 500px;
}
}


```
这样可以根据不同的屏幕尺寸设置不同的图表容器大小。
3. 使用JavaScript监听窗口大小变化，动态设置图表容器的宽高，例如：
```javascript
window.addEventListener('resize', function () {
var chart = echarts.init(document.getElementById('chart'));
chart.resize();
} );
window.onload = function () {
var chart = echarts.init(document.getElementById('chart'));
chart.resize();
} ;
```
这样在窗口大小变化时，会自动调整图表容器的尺寸。
通过以上方法，可以实现ECharts图表的自适应屏幕大小。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！