<!--分类统计-->
<template>
  <div class="iotHome-classStatistics">
    <div class="statistics-title-box">
      <p>设备分类统计</p>
    </div>
    <div class="statistics-box">
      <div id="class-statistics-box" v-show="showType">

      </div>
      <p v-show="!showType" class="null-p">暂无数据</p>
    </div>
  </div>
</template>

<script>
  import { iotStatisticsDeviceType } from "@/api/iotDevice/index";
  export default {
    name: 'classStatistics',
    data(){
      return{
        showType:false,
        dataName:[],
        dataValue:[],
      }
    },
    created(){
    },
    mounted(){
      this.iotStatisticsDeviceType();
    },
    methods:{
      iotStatisticsDeviceType(){
        iotStatisticsDeviceType({}).then(response => {
          if(response.data[0]){
            this.$set(this,'showType',true);
            let dataName = [];
            let dataValue = [];
            for(let i=0;i<response.data.length;i++){
              dataName.push(response.data[i].typeName)
              dataValue.push(response.data[i].typeCount)
            }
            this.$set(this,'dataName',dataName);
            this.$set(this,'dataValue',dataValue);
            this.$nextTick(()=>{
              this.eChartsDraw();
            })
          }else{
            this.$set(this,'showType',false);
          }
        })
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('class-statistics-box'));
        let myColor = [
          "#0072DD",
          "#8EACFF",
          "#1BBC46",
          "#54F4EF",
          "#FFC831",
        ];
        let option = {
          title: {
            show: false,
            text: "使用统计",
          },
          grid: {
            left: "5%",
            top: "15%",
            right: "5%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            data: this.dataName,
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#333",
                    fontSize: "12",
                  },
                },
              },
              itemStyle: {
                normal: {
                  barBorderRadius: [6, 6, 0, 0],
                  color: function (params) {
                    var num = myColor.length;
                    return myColor[params.dataIndex % num];
                  },
                },
              },
              data: this.dataValue,
            },
          ],
        };

        myChart.setOption(option);
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHome-classStatistics{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .statistics-title-box{
      display: flex;
      padding:20px;
      line-height:20px;
      font-size:16px;
      color:#333;
    }
    .statistics-box{
      #class-statistics-box{
        height:220px;
        width:1000px;
        overflow: hidden;
      }
      .null-p{
        text-align: center;
        color:#999;
        font-size:14px;
        line-height:150px;
      }
    }
  }
</style>
