vue3 echarts图表全屏

Vue3中使用ECharts图表实现全屏功能，首先需要在Vue组件中引入ECharts，并创建一个图表实例。接着，可以利用ECharts的API来控制图表的显示和隐藏，以及监听全屏事件来实现全屏功能。

以下是实现这一功能的基本步骤：

1. 安装ECharts依赖：
在项目中通过npm或yarn安装ECharts库。

   npm install echarts --save

或者

   yarn add echarts

2. 在Vue组件中引入ECharts并创建实例：

   <script setup>
   import { onMounted, ref, watch } from 'vue';
   import * as echarts from 'echarts';

   const chartDom = ref(null); // 定义图表DOM的引用
   let chartInstance = null; // 用来保存图表实例

   onMounted(() => {
     chartInstance = echarts.init(chartDom.value); // 初始化图表实例
     chartInstance.setOption(...); // 设置图表配置项
   });

   // 监听全屏事件，实现全屏功能
   function toggleFullScreen() {
     if (!document.fullscreenElement) {
       chartDom.value.requestFullscreen().catch(err => {
         alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
       });
     } else {
       document.exitFullscreen();
     }
   }
   </script>

3. 在模板中使用引用的DOM元素：

   <template>
     <div ref="chartDom" class="chart-dom"></div>
     <button @click="toggleFullScreen">全屏</button>
   </template>

   <style>
   /* 图表样式 */
   .chart-dom {
     width: 100%;
     height: 500px;
   }
   </style>

4. 通过按钮或其他元素触发`toggleFullScreen`方法，即可进入或退出全屏模式。

确保在使用时，将全屏按钮或者控制元素与`toggleFullScreen`方法绑定，以便用户操作。