<template>
  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
  <!--<ve-ring :data="chartData" :settings="settings" />-->
</template>

<script>
import { devCount } from '@/api/statistics'

export default {
  name: 'DevCount',
  data() {
    return {
      chartExtend: {
        series: {
          barMaxWidth: 50
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            //换行显示
            formatter: function(value) {
              let result = ""; //拼接加\n返回的类目项
              let maxLength = 2; //每项显示文字个数
              let valLength = value.length; //X轴类目项的文字个数
              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowNumber > 1) {
                //如果文字大于3,
                for (let i = 0; i < rowNumber; i++) {
                  let temp = ""; //每次截取的字符串
                  let start = i * maxLength; //开始截取的位置
                  let end = start + maxLength; //结束截取的位置
                  temp = value.substring(start, end) + "\n";
                  result += temp; //拼接生成最终的字符串
                }
                return "{labelText|" + result + "}";
              } else {
                return "{labelText|" + value + "}";
              }
            },
            rich: {
              labelText: {
                lineHeight: 18
              }
            }
          }
        }
      },
      chartData: {
        columns: ['name', 'count'],
        rows: []
      },
      settings: {
        labelMap: {
          'name': '设备类型',
          'count': ''
        }
      },
      // settings: {
      //   // legendLimit: 4
      //   radius: [60, 100]
      // }
    }
  },
  activated() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      devCount().then(response => {
        if (response.code === 200) {
          for(var i=0;i<response.data.length;i++){
            response.data[i].name = response.data[i].name.replace('防护','')
          }
          this.chartData.rows = response.data
        }
      })
    }
  }
}
</script>

<style scoped>

</style>