yyky_web/src/views/equBigData/equTotal.vue

<template>
  <div class="left-charts">
    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option" />
      <div class="item-chart-word-num zongshu">总数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option1" />
      <div class="item-chart-word-num zaixianshu">在线数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option2" />
      <div class="item-chart-word-num lixianshu">离线数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option3" />
      <div class="item-chart-word-num gaojingshu">告警数</div>
    </div>
  </div>
</template>

<script>

export default {
  name: "BottomCharts",
  props:{
    data:{
      type:Object,
      default:{},
    }
  },
  components: {
  },
  data() {
    return {
      equTotalData: {},
      deviceCount: 0,
      deviceOnline: 0,
      un_deviceOnline: 0,
      alarmCount: 0,
      option: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius:'80%',
            data: [
              {
                name: "itemA",
                value: this.data.deviceCount,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#01dcdf"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
          },
        ],
      },
      option1: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius:'80%',
            data: [
              {
                name: "itemA",
                value: this.data.deviceOnline,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#33faaa"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
          },
        ],
      },
      option2: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius:'80%',
            data: [
              {
                name: "itemA",
                value: this.data.un_deviceOnline,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#f7ac20"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
          },
        ],
      },
      option3: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius:'80%',
            data: [
              {
                name: "itemA",
                value: this.data.alarmCount,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#f93496", "#f61967", "#f2053e"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
            animationFrame: 10,
          },
        ],
      },
    };
  },
  mounted() {
    // this.deviceView();
  },
  methods: {
   
  },
};
</script>

<style lang="scss">
.left-charts {
  width: 100%;
  height: 80%;
  display: flex;
  position: relative;

  .left-chart-item {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    .item-chart {
      height: calc(100% - 80px);
      position: relative;
    }
    .item-chart-word-num {
      font-size: 20px;
      margin-top: 15px;
      font-weight: bold;
    }
    .zongshu {
      color: rgb(0, 253, 250);
    }
    .zaixianshu {
      color: rgb(7, 247, 168);
    }
    .lixianshu {
      color: rgb(227, 179, 55);
    }
    .gaojingshu {
      color: rgb(245, 2, 61);
    }
  }
}
</style>