vue3 改变echarts宽高

你可以通过使用Vue 3中的响应式特性来改变echarts的宽高。下面是一个示例：

1. 首先，你需要在Vue组件中引入echarts库：

import * as echarts from 'echarts';

2. 在Vue组件的`mounted`钩子函数中初始化echarts实例，并设置初始的宽高：

mounted() {
  this.chart = echarts.init(this.$refs.chartContainer);
  this.chart.resize({
    width: this.width,
    height: this.height
  });
},

这里的`chartContainer`是一个ref，用于获取容器元素。

3. 在Vue组件的`watch`中监听宽高的变化，并在变化时更新echarts的宽高：

watch: {
  width(newWidth) {
    this.chart.resize({
      width: newWidth,
      height: this.height
    });
  },
  height(newHeight) {
    this.chart.resize({
      width: this.width,
      height: newHeight
    });
  }
},

这样，当`width`或`height`的值发生变化时，echarts的宽高会自动更新。

4. 在模板中使用ref来指定容器元素，并绑定宽高属性：

<template>
  <div ref="chartContainer" :style="{ width: width + 'px', height: height + 'px' }"></div>
</template>

在这里，`width`和`height`是Vue组件中定义的响应式数据，你可以根据需要进行修改。

这样就可以通过改变Vue组件中的`width`和`height`来动态改变echarts的宽高了。