echarts图表遍历-vue3-绑定ref

<template>
  <div>
    <div
      v-for="(chartData, index) in 3"
      :key="index"
      class="chart-container"
      ref="aa"
    ></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
let aa = ref(null);

onMounted(() => {
  renderCharts();
});

let renderCharts = () => {
  //const chartContainers = document.querySelectorAll(".chart-container");

  console.log(aa.value);
  aa.value.forEach((Item) => {
    const chart = echarts.init(Item);

    const option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };

    chart.setOption(option);
  });
};
</script>
<style>
.chart-container {
  width: 600px;
  height: 400px;
  margin-bottom: 20px;
}
</style>

这里的ref也有且只能有一个,遍历时通过给他添加index来实现,从而动态生成多个图表,换成类名也是同理,