vue echarts 高宽不是自适应

Vue中使用Echarts时，常常会出现高宽不是自适应的情况。这是因为Echarts的默认宽度是400px，高度是200px，不会自动适应容器的大小。为了解决这个问题，我们需要手动设置Echarts的宽高属性。

首先，我们需要在组件的mounted钩子函数中获取容器的宽高，然后将其传递给Echarts的配置项中。代码如下：

mounted() {
  let container = this.$refs.chartContainer;
  let width = container.clientWidth;
  let height = container.clientHeight;
  this.chart = echarts.init(container);
  this.chart.setOption({
    ...,
    width: width,
    height: height
  });
}

在这个例子中，我们通过this.$refs.chartContainer获取了Echarts所在的容器元素，然后获取了容器的宽度和高度。接着，我们使用echarts.init方法初始化了Echarts实例，并将容器元素传递给它。最后，我们将获取到的宽度和高度设置为Echarts实例的宽高属性。

需要注意的是，如果容器元素的大小会在页面渲染后动态改变，我们需要将上面的代码放在一个resize函数中，并在window的resize事件中调用它，以保证Echarts的尺寸始终能够自适应。

总之，通过获取容器的宽高并设置给Echarts实例，可以实现Echarts的高宽自适应，使其更加符合实际需求。