vue3中echarts图表放大为全屏

### Vue3 中实现 ECharts 图表全屏显示的功能 在 Vue3 项目中实现 ECharts 图表的全屏显示功能，可以通过监听窗口大小的变化以及动态调整图表容器的尺寸来完成。以下是具体方法及示例代码。 #### 方法描述 为了使 ECharts 图表能够支持全屏显示，可以采用以下方式： 1. 创建一个自定义工具栏按钮用于触发全屏模式。 2. 使用 `document.documentElement.requestFullscreen()` 或者 `element.requestFullscreen()` 来进入全屏状态。 3. 动态更新图表容器的宽度和高度，并调用 `echartsInstance.resize` 更新图表布局[^1]。 4. 添加全局事件监听器以检测窗口大小变化并重新渲染图表[^2]。 下面是完整的解决方案： ```vue <template> <div ref="chartContainer" class="chart-container"> <!-- ECharts 容器 --> <div id="mainChart"></div> </div> </template> <script setup> import { onMounted, onUnmounted, ref } from 'vue'; import * as echarts from 'echarts'; const chartContainer = ref(null); let myChart = null; onMounted(() => { const initChart = () => { if (chartContainer.value) { myChart = echarts.init(chartContainer.value); // 配置项 const option = { title: { text: 'ECharts 全屏示例', }, tooltip: {}, legend: { data: ['销量'], }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], }, yAxis: { type: 'value', }, series: [ { name: '销量', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130], }, ], toolbox: { feature: { saveAsImage: {}, // 默认保存图片功能 fullscreen: { show: true, title: '全屏切换', icon: 'path://M9...z', // 自定义图标路径（可选） onclick: toggleFullScreen, }, }, }, }; myChart.setOption(option); } }; const toggleFullScreen = () => { const container = document.getElementById('mainChart'); if (!document.fullscreenElement) { container.requestFullscreen(); // 进入全屏 } else { document.exitFullscreen(); // 退出全屏 } setTimeout(() => { myChart && myChart.resize(); }, 300); // 确保 DOM 已经完全重绘后再 resize }; const handleResize = () => { if (myChart) { myChart.resize(); } }; window.addEventListener('resize', handleResize); initChart(); defineExpose({ toggleFullScreen }); // 如果需要外部访问该函数 }); onUnmounted(() => { if (myChart) { myChart.dispose(); // 销毁实例释放资源 } window.removeEventListener('resize', handleResize); }); </script> <style scoped> .chart-container { width: 100%; height: 400px; } #mainChart { width: 100%; height: 100%; } </style> ``` --- #### 关键点解析 1. **全屏 API 调用** - 使用 `requestFullscreen` 和 `exitFullscreen` 控制页面或特定元素进入/退出全屏模式[^3]。 2. **动态调整图表尺寸** - 当进入或退出全屏时，需等待浏览器完成动画帧刷新后调用 `echartsInstance.resize`。 3. **响应式设计** - 设置 `.chart-container` 的宽高比例固定，或者通过 CSS Flexbox/Grid 实现更灵活的布局适应不同屏幕分辨率。 4. **性能优化** - 在组件卸载前销毁 ECharts 实例 (`dispose`)，防止内存泄漏。 ---