vue 父组件调用子组件的echarts resize方法

在 Vue 中，父组件要调用子组件的方法，需要使用 `ref` 来引用子组件，并通过引用调用子组件的方法。

首先，在父组件中给子组件添加一个 `ref` 属性，例如 `<ChildComponent ref="childComponent"></ChildComponent>`。

然后，在父组件中，你可以通过 `$refs` 来访问子组件的实例，并调用子组件的方法。在这种情况下，你可以调用 ECharts 实例的 `resize` 方法。

下面是一个示例代码：

<template>
  <div>
    <ChildComponent ref="childComponent"></ChildComponent>
    <button @click="resizeEcharts">Resize ECharts</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    resizeEcharts() {
      this.$refs.childComponent.resizeEcharts();
    }
  }
}
</script>

在上述代码中，当点击 "Resize ECharts" 按钮时，调用了 `resizeEcharts` 方法，该方法通过 `$refs` 引用了子组件实例，并调用了子组件的 `resizeEcharts` 方法。

接下来，在子组件中，你可以在合适的时机调用 ECharts 实例的 `resize` 方法。

<template>
  <div ref="echartsContainer"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    // 假设这里是初始化 ECharts 的代码
    this.echartsInstance = echarts.init(this.$refs.echartsContainer);
  },
  methods: {
    resizeEcharts() {
      this.echartsInstance.resize();
    }
  }
}
</script>

在上述代码中，我们获取了父组件传入的 `div` 的引用，并在 `mounted` 钩子中初始化了 ECharts 实例。然后，在 `resizeEcharts` 方法中，调用了 ECharts 实例的 `resize` 方法。

这样，当父组件调用子组件的 `resizeEcharts` 方法时，就会触发 ECharts 实例的 `resize` 方法，实现了父组件调用子组件的 echarts `resize` 方法。