windLifecontrolPro/src/components/homeComponent/echartsGaugeComponent.vue

<template>
  <div class="power-review">
    <Row type="flex" justify="space-between" :align="'middle'">
      <!-- 功率复核 PowerLoad -->
      <Col v-for="item in PowerLoad" :key="item" :span="6">
        <echarts-gauge
          :title="item.title"
          :unit="item.unit"
          :value="item.value"
          :max="item.max"
          height="98px"
          width="100%"
          color="#1C99FF"
          :theme="theme"
        />
      </Col>
    </Row>
  </div>
</template>

<script>
import Col from "@/components/homeComponent/grid/col.vue";
import Row from "@/components/homeComponent/grid/row.vue";
import echartsGauge from "@/components/homeComponent/echartsGauge.vue";
import dayjs from "dayjs";
export default {
  components: {
    Row,
    Col,
    echartsGauge,
  },
  data() {
    return {
      // 功率复核数据
      PowerLoad: [],
    };
  },

  props: {
    data: {
      type: Array,
      default: () => [],
    },
    theme: {
      type: Boolean,
      default: false,
    },
  },

  mounted() {
    this.PowerLoad = this.data;
  },

  methods: {},

  watch: {
    data(res) {
      this.PowerLoad = res;
    },
  },
};
</script>

<style lang="less" scoped>
.power-review {
  padding: 15px 10px 10px 10px;
}

.col + .col {
  margin-left: 0px;
}
</style>