<!--suppress ALL -->
<template>
  <div class="container">
    <div style="height: 28px;margin-bottom: 10px;"/>
    <ve-pie :data="chartData" :extend="extend" :title="title"/>

  </div>
</template>

<script>
import { gasAlarmBySecondArea } from '@/api/gasOverview'
export default {
  name: 'AlarmGasCountByDept',
  props: {
    query: {
      type: Object,
      default: () => {
        return {
          areaId: '',
          startTime: '',
          endTime: ''
        }
      }
    }
  },
  data() {
    return {
      chartData: {
        columns: ['areaName', 'alarm'],
        rows: []
      },
      extend: {
        grid: {
          right: '30%'
        },
        legend: {
          type: 'scroll',
          top: '60px',
          right: '0px',
          orient: 'vertical'
        },
        series: {
          label: { show: true, position: 'outside', formatter: '{b}' },
          right: 120
        }
        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
      },
      title: {
        text: '分区燃气报警占比'
      },
      chartSettings: {
        labelMap: {
          'areaName': '分区',
          'alarm': '报警数'
        }
      }
    }
  },
  watch: {
    query(val) {
      this.fetchData()
    }
  },
  methods: {
    // 获取统计数据
    fetchData() {
      gasAlarmBySecondArea(this.query).then(response => {
        this.chartData.rows = response.data
      })
    }
  }
}
</script>