vue3 echarts盒子随窗口变化宽高同比变化

在Vue3中，你可以通过绑定一个计算属性来动态计算echarts盒子的宽高，使其随窗口变化而同比变化。具体实现步骤如下：

1. 在组件的template中，使用ref指令给echarts盒子命名，方便在组件的逻辑代码中获取该元素的实例。

   <template>
     <div class="echarts-container" ref="echartsBox"></div>
   </template>

2. 在组件的逻辑代码中，使用watch监听窗口大小的变化，并且动态计算echarts盒子的宽高。

   <script>
   import * as echarts from 'echarts';
   
   export default {
     name: 'EchartsBox',
     data() {
       return {
         chartInstance: null // echarts实例对象
       }
     },
     computed: {
       echartsBoxStyle() {
         const width = this.$refs.echartsBox.clientWidth;
         const height = width * 0.75; // 宽高比为4:3
         return {
           width: `${width}px`,
           height: `${height}px`
         }
       }
     },
     mounted() {
       // 初始化echarts
       this.chartInstance = echarts.init(this.$refs.echartsBox);
       // ...
     },
     watch: {
       '$route'(to, from) {
         // 监听路由变化，重新渲染echarts
         this.chartInstance.resize();
       },
       // 监听窗口大小变化，动态计算echarts盒子的宽高
       '$root.$data.windowSize'(newVal, oldVal) {
         this.chartInstance.resize();
       }
     },
     beforeDestroy() {
       // 销毁echarts实例对象
       this.chartInstance.dispose();
     }
   }
   </script>

3. 在父组件中，通过监听窗口大小的变化，动态改变根实例中的windowSize属性值。

   <script>
   export default {
     name: 'App',
     data() {
       return {
         windowSize: {
           width: window.innerWidth,
           height: window.innerHeight
         }
       }
     },
     mounted() {
       window.addEventListener('resize', this.handleResize);
     },
     destroyed() {
       window.removeEventListener('resize', this.handleResize);
     },
     methods: {
       handleResize() {
         this.windowSize = {
           width: window.innerWidth,
           height: window.innerHeight
         };
       }
     }
   }
   </script>

完成以上三个步骤后，echarts盒子就可以随着窗口大小的变化而同比变化了。