在vue中使用ECharts，grid组件失效

如果在 Vue 中使用 ECharts 时，发现 grid 组件失效，可能是因为使用了 flex 布局导致的。可以尝试以下解决方法：

1. 在 ECharts 的配置项中设置 `containLabel: true`，即可让 grid 组件的大小自适应容器大小。

2. 在容器元素上添加 `display: block` 样式，避免使用 flex 布局。

3. 在容器元素上添加 `position: relative` 样式，同时在 ECharts 的配置项中设置 `left` 和 `top` 属性来控制 grid 组件的位置。如下所示：

<div class="chart-container" style="position: relative">
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</div>

// ECharts 配置项
{
  grid: {
    left: '10%',
    top: '10%',
    bottom: '10%',
    right: '10%',
    containLabel: true
  }
}

希望能帮助到你！