<template>
  <ve-histogram :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
</template>

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

export default {
  name:'waterCountByDeptBar',
  data() {
    this.extend = {
      series: {
        label: { show: true, position: 'top' }
      }
    }
    this.grid = {
      right: 60
    }
    this.title = {
      text: '各分区用水统计'
    }
    this.chartSettings = {
      itemStyle: {
        'barCategoryGap': 5
      },
      barWidth: 15,
      labelMap: {
        'dept': '分区',
        'wellCount': '井数量'
      },
      dimension: ['dept'],
      metrics: ['wellCount']
    }
    return {
      chartData: {
        columns: ['wellTypeName', 'wellCount'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      wellStaticByType().then(response => {
        this.chartData.rows = response.data
        this.chartData.rows = [
          { 'dept': '科技楼及食堂', 'wellCount': 53 },
          { 'dept': 'A\\B\\C\\D\\E座', 'wellCount': 78 },
          { 'dept': '厂区', 'wellCount': 78 },
          { 'dept': '分段分区', 'wellCount': 78 },
          { 'dept': '船坞分区', 'wellCount': 78 },
          { 'dept': '刀把码头', 'wellCount': 78 },
          { 'dept': '制管作业区', 'wellCount': 78 },
          { 'dept': '滑道作业区', 'wellCount': 78 },
          { 'dept': '码头作业区', 'wellCount': 78 },
          { 'dept': '车间生产区', 'wellCount': 78 },
        ]
      })
    }
  }
}
</script>