Vue根据后台返回下班动态生成Echarts图的数量

<template>
  <div class="task">
    <div class="Munleft">
      <div v-for="(item, index) in chartList" :key="item.id">
        <div
          style="width: 100%; height: 100%"
          class="echartsList"
          :id="`chart${index}-${item}`"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import echart from "echarts";
export default {
  name: "Task",
  data() {
    return {
      chartList: [
        { name: "张全蛋", age: 54, id: 0 },
        { name: "李二狗", age: 15, id: 1 },
        { name: "王老五", age: 13, id: 2 },
        { name: "赵六福", age: 45, id: 3 },
        { name: "孙七房", age: 33, id: 4 },
        { name: "刘八车", age: 62, id: 5 },
        { name: "马老九", age: 45, id: 6 },
        { name: "杜十娘", age: 30, id: 7 },
        { name: "萧十一", age: 31, id: 8 },
      ],
    };
  },
  mounted() {
    this.handerEchartLeft();
  },
  methods: {
    handerEchartLeft() {
      this.chartList.forEach((pItem, index) => {
        let myEchart = echart.init(
          document.getElementById("chart" + index + "-" + pItem)
        );
        var data = {
          value: `${pItem.age / 100}`,
          name:pItem.name
        };
        var option = {
          backgroundColor: "#fff",
          title: {
            show: true,
            text: data.name,
            left: "35%",
            top: "80%",
            textStyle: {
              color: "#000",
              fontSize: 16,
              fontFamily: '"Microsoft Yahei","微软雅黑"',
            },
          },
          series: [
            {
              name: "仪表盘",
              type: "gauge",
              splitNumber: 1,
              axisLine: {
                lineStyle: {
                  color: [
                    [data.value, "#6F78CC"], //外环基础色
                    [1, "#E1E8EE"],
                  ],
                  width: 10,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              itemStyle: {
                show: false,
              },
              detail: {
                formatter: function (value) {
                  return `${value * 100}`;
                },
                offsetCenter: [0, 0],
                textStyle: {
                  fontSize: "18",
                  fontWeight: "600",
                  color: "#000",
                },
              },
              title: {
                offsetCenter: [0, "100%"],
              },
              pointer: {
                show: false,
                length: "75%",
                width: 20, //指针粗细
              },
              data: [
                {
                  name: "",
                  value: data.value,
                },
              ],
            },
          ],
        };
        myEchart.setOption(option);
      });

      //
    },
  },
};
</script>

<style lang='scss' scoped>
.task {
  width: 100%;
  height: calc(100vh - 120px);
  border: 1px solid red;
  .Munleft {
    width: 50%;
    height: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    div {
      width: 30%;
      height: 30%;
      border: 1px solid red;
    }
  }
}
</style>