Vue中实现Echarts图表宽高自适应

在Vue项目中使用Echarts图表库时，经常会遇到一个需求：使图表的宽度和高度能够自适应父容器的大小变化。这样，在不同的屏幕尺寸或窗口大小变化时，图表能够自动调整大小，以确保图表的内容始终完整显示。本文将介绍如何在Vue中实现Echarts图表的宽高自适应。

步骤一：安装Echarts

首先，确保你的Vue项目已经安装了Echarts。你可以使用npm或yarn来安装Echarts：

npm install echarts

或者

yarn add echarts

步骤二：创建Vue组件

接下来，我们需要创建一个Vue组件来容纳Echarts图表。假设我们的组件名为Chart，可以在Vue项目的组件目录中创建一个名为Chart.vue的文件。

<template>
  <div ref="chartContainer"