yyky_web/src/views/equBigData/bbb copy.vue

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

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option1" />
      <div class="item-chart-word zaixianshu">绑定设备</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option2" />
      <div class="item-chart-word lixianshu">绑定用户数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option3" />
      <div class="item-chart-word gaojingshu">设备活跃度</div>

    </div>
  </div>
</template>

<script>
import { count, alarm } from "@/api/system/datav";

export default {
  name: "BottomCharts",
  props: {
    number: {
      type: Number,
      default: 0,
    },
    data:{
      type:Object,
      default:{},
    }
  },
  components: {
  },
  data() {
    return {
      // userTotal:0,
      option: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius:'80%',
            data: [
              {
                name: "itemA",
                value: this.number,
                // 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.bindDevice,
                // 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.bindUser,
                // 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.deviceOnline,
                // 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,
          },
        ],
      },
    };
  },
};
</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{
      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>