vue3+echarts，循环完无法获取到dom

页面报错Error: Initialize failed: invalid dom. 网上看了很多案例。

setTimeout延迟加载也用了

使用nextTick延迟加载也用了

也是在oumounted里面做的渲染

<div class="right" v-if="one" style="display: flex; flex-wrap: wrap">
      <div
        v-for="(item, index) in getCurrentPageData"
        :key="index"
        style="position: relative"
      >
        <div class="cahrtsItem" :id="'charts' + item.id"></div>
        <div
          class="riqi"
          style="
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 14px;
            color: #fff;
            display: flex;
          "
        >
          <div @click="fn1(item, item.id)" style="cursor: pointer">
            <el-icon><CaretLeft /></el-icon>
          </div>

          <div>{{ item.day }}</div>
          <div @click="fn2(item, item.id)" style="cursor: pointer">
            <el-icon><CaretRight /></el-icon>
          </div>
        </div>
      </div>
      <div class="rightbutom">
        <div @click="prevPage" class="button">上一页</div>
        <div class="cont">{{ currentPage }}/{{ totalPages }}</div>
        <div @click="nextPage" class="button">下一页</div>
      </div>
    </div>
```
``var initLine = (waterChartData, containerId) => {
  var option = {
    title: {
      text: "XXX基地",
      textStyle: {
        color: "#ffffff", // 将图例文本颜色设置为白色
        fontSize: 16, // 设置标题字体大小为16px
      },
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "30%",
      bottom: "10%",
      containLabel: true,
    },
    legend: {
      data: ["溶氧", "水温", "PH"],
      top: "15%",
      textStyle: {
        color: "#ffffff", // 将图例文本颜色设置为白色
        fontSize: 12, // 设置标题字体大小为16px
      },
    },
    xAxis: {
      type: "category",
      data: ["0:00", "4:00", "8:00", "12:00", "16:00", "20:00"],
      axisLabel: {
        textStyle: {
          color: "#ffffff", // 将文本颜色设置为白色
          fontSize: 12,
        },
      },
    },
    yAxis: {
      type: "value",
      min: function (value) {
        return value.min;
      },
      max: function (value) {
        return value.max;
      },
      axisLabel: {
        textStyle: {
          color: "#ffffff", // 将文本颜色设置为白色
          fontSize: 12,
        },
      },
    },
    series: [
      {
        name: "溶氧",
        type: "line",
        label: {
          show: true,
          position: "top",
        },
        lineStyle: {
          color: "#e51450", // 将颜色设置为白色
          fontSize: 12,
        },
        data: [
          waterChartData?.["0:00"] ? waterChartData["0:00"].oxyty : "",
          waterChartData?.["4:00"] ? waterChartData["4:00"].oxyty : "",
          waterChartData?.["8:00"] ? waterChartData["8:00"].oxyty : "",
          waterChartData?.["12:00"] ? waterChartData["12:00"].oxyty : "",
          waterChartData?.["16:00"] ? waterChartData["16:00"].oxyty : "",
          waterChartData?.["20:00"] ? waterChartData["20:00"].oxyty : "",
        ],
      },
      {
        name: "水温",
        type: "line",
        label: {
          show: true,
          position: "top",
        },
        lineStyle: {
          color: "#42e98e", // 将颜色设置为白色
          fontSize: 12,
        },
        data: [
          waterChartData?.["0:00"]
            ? waterChartData["0:00"].waterTemperature
            : "",
          waterChartData?.["4:00"]
            ? waterChartData["4:00"].waterTemperature
            : "",
          waterChartData?.["8:00"]
            ? waterChartData["8:00"].waterTemperature
            : "",
          waterChartData?.["12:00"]
            ? waterChartData["12:00"].waterTemperature
            : "",
          waterChartData?.["16:00"]
            ? waterChartData["16:00"].waterTemperature
            : "",
          waterChartData?.["20:00"]
            ? waterChartData["20:00"].waterTemperature
            : "",
        ],
      },
      {
        name: "PH",
        type: "line",
        label: {
          show: true,
          position: "top",
        },
        lineStyle: {
          color: "#ead700", // 将颜色设置为白色
          fontSize: 12,
        },
        data: [
          waterChartData?.["0:00"] ? waterChartData["0:00"].ph : "",
          waterChartData?.["4:00"] ? waterChartData["4:00"].ph : "",
          waterChartData?.["8:00"] ? waterChartData["8:00"].ph : "",
          waterChartData?.["12:00"] ? waterChartData["12:00"].ph : "",
          waterChartData?.["16:00"] ? waterChartData["16:00"].ph : "",
          waterChartData?.["20:00"] ? waterChartData["20:00"].ph : "",
        ],
      },
    ],
  };
  // nextTick(()=>{
  //   const charts = echarts.init(document.getElementById(containerId));
  //   charts.setOption(option);
  //   })
  chartsRef.value = document.getElementById(containerId);
  if (chartsRef.value) {
    var charts = echarts.init(chartsRef.value);
    charts.setOption(option);
  }
};`



最后就直接做了个判断 if (chartsRef.value) {
    var charts = echarts.init(chartsRef.value);
    charts.setOption(option);
  } 解决的这个问题