<!--各道路设备安装情况数量统计-->
<template>
  <ve-histogram :title="title" :data="chartData" :grid="grid" :extend="extend" :settings="chartSetting" />
</template>

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

export default {
  name: 'DeviceCountByRoad',
  data() {
    return {
      title: {
        text: '设备数量统计'
      },
      listQuery: {
        deviceType: ''
      },
      extend: {
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        series: {
          label: { show: true, position: 'top' },
          barMaxWidth: 35 // 最大柱宽度
        }
      },
      grid: {
        right: 0
      },
      chartSetting: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'road': '道路',
          'deviceCount': '设备数量（个）'
        },
        dimension: ['road'],
        metrics: ['deviceCount']
      },
      chartData: {
        columns: ['road', 'deviceCount'],
        rows: []
      }
    }
  },
  watch: {
    listQuery: {
      handler(newVal, oldVal) {
        this.fetchData()
      },
      deep: true
    }
  },
  mounted() {
    this.title = {
      text: this.chartTitle
    }
    this.fetchData()
  },
  methods: {
    fetchData() {
      deviceStaticsByDept(this.listQuery).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.yAxis = { type: 'value', minInterval: 1, max: 10 }
        } else {
          this.extend.yAxis = { type: 'value', minInterval: 1 }
        }
      })
    }
  }
}
</script>