vue3的echarts的div是栅格de,怎么让他自适应div

如果你的 Echarts 图表所在的 div 是在 Vue3 的栅格布局中，你可以使用 Vue3 的响应式数据来实现 Echarts 图表的自适应。具体实现步骤如下：

1. 在 Vue3 的组件中引入 Echarts，并创建 Echarts 实例。

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null,
      chartWidth: 0
    }
  },
  
  mounted() {
    this.chart = echarts.init(document.getElementById('chart'))
    this.chartWidth = document.getElementById('chart').clientWidth
  }
}

在这里，我们使用 data() 函数中的 chartWidth 属性来存储 Echarts 图表所在的 div 的宽度。

2. 在组件的模板中，使用 Vue3 的栅格布局来设置 Echarts 图表所在的 div 的宽度，并使用 ref 属性来获取该 div 的引用。

<template>
  <div class="el-row">
    <div class="el-col" :span="12">
      <div ref="chart" id="chart" :style="{width: chartWidth + 'px'}"></div>
    </div>
  </div>
</template>

在这里，我们使用 :style 绑定属性来动态设置 Echarts 图表所在的 div 的宽度，使其与栅格布局的宽度相匹配。

3. 在组件中添加 resize 方法，并使用 Vue3 的 watch 监听 chartWidth 数据的变化，调用 Echarts 的 resize() 方法。

export default {
  // ...

  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    window.addEventListener('resize', this.resize)
  },

  beforeUnmount() {
    window.removeEventListener('resize', this.resize)
  },

  watch: {
    chartWidth: {
      handler: function() {
        this.chart.resize()
      }
    }
  },

  methods: {
    resize() {
      this.chartWidth = document.getElementById('chart').clientWidth
    }
  }
}

在这里，我们使用 watch 监听 chartWidth 数据的变化，并在数据变化时调用 Echarts 的 resize() 方法来重新绘制图表。同时，我们还添加了 resize() 方法，以监听窗口大小的变化，并更新 chartWidth 数据的值。

这样，当 Vue3 的栅格布局的宽度发生变化时，Echarts 图表就会自适应变化并重新绘制。