在vue种使用Echarts多个图表，请求完接口数据之后,如何根据浏览器窗口的变化，自动重新渲染图表

在 Vue 中使用 ECharts 渲染多个图表，并且在请求完接口数据之后，根据浏览器窗口的变化自动重新渲染图表的步骤如下：

1. 在 `mounted` 钩子函数中，获取 DOM 元素，并初始化 ECharts 实例。

mounted() {
  // 获取 DOM 元素
  const chart1 = this.$refs.chart1
  const chart2 = this.$refs.chart2

  // 初始化 ECharts 实例
  this.chart1 = echarts.init(chart1)
  this.chart2 = echarts.init(chart2)

  // 请求接口数据
  this.getData()
},
methods: {
  // 请求接口数据的方法
  getData() {
    axios.get('/api/data').then(response => {
      // 处理接口数据
      this.chartData1 = response.data.data1
      this.chartData2 = response.data.data2

      // 绘制图表
      this.drawCharts()
    })
  },
  // 绘制图表的方法
  drawCharts() {
    this.chart1.setOption({...})
    this.chart2.setOption({...})
  },
},

2. 在 `created` 钩子函数中，监听浏览器窗口大小变化，触发重新渲染图表的方法。

created() {
  // 监听浏览器窗口大小变化，触发重新渲染图表的方法
  window.addEventListener('resize', this.handleResize)
},
methods: {
  // 重新渲染图表的方法
  handleResize() {
    this.chart1.resize()
    this.chart2.resize()
  },
},

3. 在模板中，使用 `ref` 属性获取 DOM 元素，并绑定 `v-if` 判断接口数据是否已经加载完成，从而避免在数据未加载完成时渲染图表。

<template>
  <div>
    <div v-if="chartData1" ref="chart1" class="chart"></div>
    <div v-if="chartData2" ref="chart2" class="chart"></div>
  </div>
</template>
<style>
.chart {
  width: 50%;
  height: 300px;
}
</style>

完整的代码示例：

<template>
  <div>
    <div v-if="chartData1" ref="chart1" class="chart"></div>
    <div v-if="chartData2" ref="chart2" class="chart"></div>
  </div>
</template>
<style>
.chart {
  width: 50%;
  height: 300px;
}
</style>
<script>
export default {
  data() {
    return {
      chartData1: null,
      chartData2: null,
    }
  },
  mounted() {
    // 获取 DOM 元素
    const chart1 = this.$refs.chart1
    const chart2 = this.$refs.chart2

    // 初始化 ECharts 实例
    this.chart1 = echarts.init(chart1)
    this.chart2 = echarts.init(chart2)

    // 请求接口数据
    this.getData()
  },
  created() {
    // 监听浏览器窗口大小变化，触发重新渲染图表的方法
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    // 请求接口数据的方法
    getData() {
      axios.get('/api/data').then(response => {
        // 处理接口数据
        this.chartData1 = response.data.data1
        this.chartData2 = response.data.data2

        // 绘制图表
        this.drawCharts()
      })
    },
    // 绘制图表的方法
    drawCharts() {
      this.chart1.setOption({...})
      this.chart2.setOption({...})
    },
    // 重新渲染图表的方法
    handleResize() {
      this.chart1.resize()
      this.chart2.resize()
    },
  },
}
</script>

需要注意的是，由于 ECharts 图表默认不会随着容器大小的变化而自适应，因此需要手动调用 `resize()` 方法重新渲染图表。