写一份vue.js使用Echarts渲染多个图表,请求接口的时候，图表HTML一直在loading状态,接口请求完之后开始渲染图表，且图表绑定window.onresize，离开页面之后自动移除resize

好的，下面是一份Vue.js使用Echarts渲染多个图表的代码，以及在请求接口时渲染loading状态，请求完成后渲染图表并绑定window.onresize，离开页面时自动移除resize事件的实现：

<template>
  <div>
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else>
      <div class="chart" ref="chart1"></div>
      <div class="chart" ref="chart2"></div>
      <div class="chart" ref="chart3"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      loading: true,
      chartData1: [],
      chartData2: [],
      chartData3: []
    }
  },
  methods: {
    fetchData() {
      // 发送请求获取数据
      // ...

      // 模拟数据
      this.chartData1 = [
        { name: 'A', value: 10 },
        { name: 'B', value: 20 },
        { name: 'C', value: 30 }
      ]
      this.chartData2 = [
        { name: 'D', value: 40 },
        { name: 'E', value: 50 },
        { name: 'F', value: 60 }
      ]
      this.chartData3 = [
        { name: 'G', value: 70 },
        { name: 'H', value: 80 },
        { name: 'I', value: 90 }
      ]

      // 渲染图表
      this.renderChart()
    },
    renderChart() {
      // 渲染第一个图表
      const chart1 = echarts.init(this.$refs.chart1)
      chart1.setOption({
        xAxis: { data: this.chartData1.map(item => item.name) },
        yAxis: {},
        series: [{
          type: 'bar',
          data: this.chartData1.map(item => item.value)
        }]
      })

      // 渲染第二个图表
      const chart2 = echarts.init(this.$refs.chart2)
      chart2.setOption({
        xAxis: { data: this.chartData2.map(item => item.name) },
        yAxis: {},
        series: [{
          type: 'bar',
          data: this.chartData2.map(item => item.value)
        }]
      })

      // 渲染第三个图表
      const chart3 = echarts.init(this.$refs.chart3)
      chart3.setOption({
        xAxis: { data: this.chartData3.map(item => item.name) },
        yAxis: {},
        series: [{
          type: 'bar',
          data: this.chartData3.map(item => item.value)
        }]
      })

      // 绑定window.onresize事件
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      // 重新渲染图表
      echarts.init(this.$refs.chart1).resize()
      echarts.init(this.$refs.chart2).resize()
      echarts.init(this.$refs.chart3).resize()
    }
  },
  mounted() {
    this.fetchData()
  },
  beforeDestroy() {
    // 移除window.onresize事件
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style>
.chart {
  height: 300px;
}
.loading {
  font-size: 20px;
  text-align: center;
  margin-top: 100px;
}
</style>

在这份代码中，我们使用了v-if和v-else来控制loading状态和图表的显示。在mounted钩子函数中，我们调用了fetchData方法来发送请求获取数据，模拟数据的部分可以根据实际情况进行修改。

在fetchData方法中，我们首先将loading状态设置为true，表示正在加载，然后发送请求获取数据。在请求完成后，我们将loading状态设置为false，表示加载完成，然后将数据保存到chartData1、chartData2、chartData3中，并调用renderChart方法来渲染图表。

在renderChart方法中，我们分别使用echarts.init来初始化三个图表实例，并设置对应的数据和配置项。然后我们绑定了window.onresize事件，并在handleResize方法中重新渲染图表。

最后，在beforeDestroy钩子函数中，我们移除了window.onresize事件，以防止内存泄漏。