首页echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示...

echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示...

时间: 2024-03-05 13:53:09 浏览: 47

要实现 ECharts 图表的自适应盒子大小，可以使用 ECharts 的 `resize` 方法。该方法可以在盒子大小改变时，重新计算图表大小并进行绘制。具体实现方式如下： 1. 给 ECharts 图表容器设置一个固定的初始宽度和高度，并设置一个最大宽度和高度，如： ```html <div id="chart-container" style="width: 100%; height: 400px; max-width: 1200px; max-height: 800px;"></div> ``` 2. 在 JS 中引入 ECharts，并初始化图表，如： ```javascript // 引入 ECharts import echarts from 'echarts'; // 初始化图表 const chart = echarts.init(document.getElementById('chart-container')); ``` 3. 监听窗口大小改变事件，并在事件触发时调用 `resize` 方法，如： ```javascript // 监听窗口大小改变事件 window.addEventListener('resize', function() { // 调用 resize 方法 chart.resize(); }); ``` 4. 在 CSS 中设置图表容器的宽度和高度为百分比，如： ```css #chart-container { width: 100%; height: 100%; } ``` 这样，当盒子大小改变时，ECharts 图表就会自适应调整大小，并保持在容器中心位置。当盒子大小改变到全屏展示时，图表也会自动调整大小并填充整个屏幕。

阅读全文