循环多个echats仪表盘数据

<template>
  <el-container class="container">
    <el-container>
      <el-main class="main" style="display: block;">
        <div class="main_box">
          <div
            v-for="(item, key) in Dashboard"
            :key="key"
            class="panel"
            style="height:21.5%;"
          >
            <div
              class="content"
              :id="item.name + key"
              style="padding:0;height:160px"
            ></div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "Frame",
  components: {},
  data() {
    return {
      // 仪表盘chart
      myCharts: {},
      Dashboard: [],
      obj: {},
      list: [
        {
          jerryIndicant: "speed",
          name: "风速",
          rangeLow: 0,
          rangeUp: 100,
          thresholdsLow: 20,
          thresholdsUp: 80,
          type: "numerical",
          unit: "m/s",
          value: "1.11"
        },
        {
          jerryIndicant: "tempresure",
          name: "气温",
          rangeLow: 0,
          rangeUp: 100,
          thresholdsLow: 20,
          thresholdsUp: 80,
          type: "numerical",
          unit: "℃",
          value: "23.3"
        },
        {
          jerryIndicant: "direction",
          name: "风向",
          rangeLow: 0,
          rangeUp: 360,
          thresholdsLow: 0,
          thresholdsUp: 0,
          type: "direction",
          unit: "°",
          value: "198"
        }
      ]
    };
  },
  methods: {
    getInfo() {
      this.list.map(item => {
        this.obj = {
          name: item.name,
          unit: item.unit,
          value: item.value,
          rangeUp: item.rangeUp,
          rangeLow: item.rangeLow,
          thresholdsUp: item.thresholdsUp,
          thresholdsLow: item.thresholdsLow,
          type: item.type
        };
        this.Dashboard.push(this.obj);
        //  仪表盘chart
        for(let [key,val] of this.Dashboard.entries()){
          this.creatGaugeChart(key, val);
        }
        //   仪表盘chart
        //   Object.entries(this.Dashboard).forEach(([key, value]) => {
        //     this.creatGaugeChart(key, value);
        //   });
      });
    },
    // 创建 仪表盘chart
    creatGaugeChart(key, value) {
      setTimeout(() => {
        const id = value.name + key;
        // console.log(value.thresholdsLow,"999")
        const myChart = this.$echarts.init(document.getElementById(id));
        this.myCharts[id] = myChart;
        // 仪表盘
        myChart.setOption({
          series: [
            {
              type: "gauge",
              radius: value.type == "numerical" ? "95%" : "80%",
              center:
                value.type == "numerical" ? ["50%", "60%"] : ["50%", "50%"],
              startAngle: value.type == "numerical" ? 210 : -269.99,
              endAngle: value.type == "numerical" ? -30 : 90,
              max: value.rangeUp == null ? 0 : value.rangeUp,
              min: value.rangeLow == null ? 0 : value.rangeLow,
              axisLine:
                value.type == "numerical"
                  ? {
                      lineStyle: {
                        width: 6,
                        color: [
                          [
                            Number(value.thresholdsLow) / Number(value.rangeUp),
                            "#00A8FF"
                          ],
                          [
                            Number(value.thresholdsUp) / Number(value.rangeUp),
                            "#00FF66"
                          ],
                          [1, "#FF0000"]
                        ]
                      }
                    }
                  : {
                      lineStyle: {
                        width: 0,
                        color: [
                          [0.2, "#00A8FF"],
                          [0.8, "#00A8FF"],
                          [1, "#00A8FF"]
                        ]
                      }
                    },
              pointer:
                value.type == "numerical"
                  ? {
                      length: "60%",
                      width: 8,
                      itemStyle: {
                        color: "auto"
                      }
                    }
                  : {
                      show: true,
                      icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                      length: "10%",
                      width: 8,
                      offsetCenter: [0, "-40%"],
                      itemStyle: {
                        color: "red"
                      }
                    },
              axisTick: {
                distance: 0,
                splitNumber: value.type == "numerical" ? 4 : 12,
                length: value.type == "numerical" ? 3 : 4,
                lineStyle: {
                  color: value.type == "numerical" ? "auto" : "#00A8FF",
                  width: 1
                }
              },
              splitLine: {
                distance: 0,
                length: value.type == "numerical" ? 4 : 10,
                lineStyle: {
                  color: "auto",
                  width: 1
                }
              },
              axisLabel: {
                color: "auto",
                distance: value.type == "numerical" ? 10 : 5,
                fontSize: value.type == "numerical" ? 8 : 8,
                color: "#FEFFFF",
                // 防止360和0重复显示
                formatter: val => {
                  if (value.type == "direction") {
                    if (val === 360) {
                      return "";
                    }
                  }
                  return val;
                }
              },
              detail: {
                valueAnimation: true,
                formatter: value.value + value.unit,
                formatter: value1 => {
                  return value1 + value.unit;
                },
                color: "#FEFFFF",
                fontSize: 12,
                lineHeight: 16,
                offsetCenter:
                  value.type == "numerical"
                    ? [0, "70%"]
                    : [0, "8%"]
              },
              data: [{ value: Number(value.value).toFixed(2) }]
            }
          ]
        });
      }, 10);
    }
  },
  mounted() {
    this.getInfo();
  }
};
</script>
<style lang="scss">
.container {
  height: 100%;
  background-color: #081038;
  padding: 14px;
  .main {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    background-color: #081038;
    .main_box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .panel {
        width: 18%;
      }
    }
  }
}
</style>