<template>
  <div>
    <div style="height: 28px;margin-bottom: 10px;"/>
    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
  </div>

</template>

<script>
// 引入视觉映射组件
import 'echarts/lib/component/visualMap'
import { deviceStaticsByType } from '@/api/gasOverview'

export default {
  data() {
    this.extend = {
      series: {
        label: { show: true, position: 'right', color: '#333' }
      }
    }
    this.grid = {
      right: 60
    }
    this.title = {
      text: '管网资产统计'
    }
    this.chartSettings = {
      itemStyle: {
        'barCategoryGap': 5
      },
      barWidth: 15,
      labelMap: {
        'deviceType': '设备类型',
        'deviceCount': '设备数量'
      },
      dimension: ['deviceType'],
      metrics: ['deviceCount']
    }
    return {
      chartData: {
        columns: ['deviceType', 'deviceCount'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const data = {
        extra: '0'
      }
      deviceStaticsByType(data).then(response => {
        this.chartData.rows = response.data
        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
          return parseInt(item.deviceCount)
        }))
        if (maxValue < 10) {
          this.extend.xAxis = { type: 'value', minInterval: 1, max: 5 }
        } else {
          this.extend.xAxis = { type: 'value', minInterval: 1 }
        }
      })
    }
  }
}
</script>