<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <div class="chart-title">设备总量统计</div>
      </el-col>
    </el-row>
    <el-row>
      <ve-pie :loading="loading" :data="chartData" :legend="legend" :settings="chartSettings" :extend="extend" height="440px"/>
    </el-row>
  </div>
</template>

<script>
import { deviceStaticsByType } from '@/api/dataStatics'
import 'v-charts/lib/style.css'
export default {
  name: 'DeviceCountByType',
  data() {
    return {
      chartData: {
        columns: ['deviceType', 'deviceCount'], // 维度和指标
        rows: [] // 数据集合
      }, // 数据
      legend: {
        top: 'bottom'
      }, // 图例配置
      extend: {
      }, // 扩展配置
      chartSettings: {
        dataType: function(v) {
          return v + ' 个'
        }, // 格式化显示数据
        labelMap: {
          'deviceType': '设备类型',
          'deviceCount': '设备数量'
        },
        label: {
          show: true, position: 'outer', alignTo: 'edge'
        }// 显示label
      },
      loading: true // 加载状态
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
  },
  activated() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      deviceStaticsByType().then(response => {
        this.chartData.rows = response.data
        this.loading = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-title{
    margin: auto;
    text-align: center;
    margin-top: 15px;
    font-size:20px;
    font-weight:600
  }
</style>
