在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)
}

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

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

3. 在模板中，使用 `ref` 属性获取 DOM 元素，并绑定 `v-on:resize` 事件监听浏览器窗口大小变化。

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

完整的代码示例：

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

    // 初始化 ECharts 实例
    this.chart1 = echarts.init(chart1)
    this.chart2 = echarts.init(chart2)
  },
  created() {
    // 监听浏览器窗口大小变化，触发重新渲染图表的方法
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    // 重新渲染图表的方法
    handleResize() {
      this.chart1.resize()
      this.chart2.resize()
    },
  },
}
</script>

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