用vue3的写法 实现在单页面中遍历显示出多个Echarts图表

首先需要安装Echarts插件，可以使用npm安装：

npm install echarts --save

然后在需要展示Echarts图表的组件中，引入Echarts插件：

import echarts from 'echarts'

接着，在组件的template中，可以使用v-for循环遍历多个Echarts图表：

<template>
  <div>
    <div v-for="(chartData, index) in chartDataList" :key="index">
      <div :id="'chart-'+index" class="chart"></div>
    </div>
  </div>
</template>

在这里，chartDataList是一个数组，包含了多个Echarts图表的数据。通过v-for循环遍历数组，为每一个Echarts图表创建一个div元素，并给每一个div元素一个唯一的id，方便后面使用Echarts插件渲染图表。

最后，在组件的script中，可以使用Echarts插件渲染图表：

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chartDataList: [
        // 多个Echarts图表的数据
      ]
    }
  },
  mounted() {
    // 使用Echarts插件渲染图表
    for (let i = 0; i < this.chartDataList.length; i++) {
      const chartData = this.chartDataList[i]
      const chart = echarts.init(document.getElementById('chart-' + i))
      chart.setOption(chartData)
    }
  }
}
</script>

在mounted生命周期函数中，使用Echarts插件的init方法初始化每一个图表，并通过setOption方法设置图表的数据和配置项。

需要注意的是，每一个图表的div元素的id是动态生成的，需要根据数组索引动态生成，以保证每一个图表都有唯一的id。