echarts生成的图表大小怎么随屏幕的大小改变自适应
时间: 2023-12-14 15:38:16 浏览: 152
vue中echarts图表大小适应窗口大小且不需要刷新案例
可以通过使用 echarts 的 `resize` 方法来实现图表大小随屏幕大小改变自适应。具体做法如下:
1. 在页面加载完成后,初始化 echarts 实例并渲染图表。
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
// 使用指定的配置项和数据显示图表
myChart.setOption(option);
```
2. 添加 window 的 resize 事件监听器,当窗口大小改变时,调用图表实例的 `resize` 方法重新计算图表大小并且重新渲染。
```javascript
window.addEventListener('resize', function () {
// 调用图表实例的 resize 方法
myChart.resize();
});
```
这样,当窗口大小改变时,就会自动重新计算图表大小并且自适应屏幕大小。
阅读全文