<template>
  <div class="chart-container">
    <div ref="chart" class="chart-body" />
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'DeptHandleChart4Sup',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    columnData() {
      const tmp = []
      this.list.forEach(item => {
        if (item.depId !== '') {
          const obj = {}
          obj.name = item.departName
          obj.type = 'bar'
          obj.data = []
          obj.data.push(item.currentCheckNum)
          obj.data.push(item.checkedNum)
          tmp.push(obj)
        }
      })
      return tmp
    }
  },
  watch: {
    list() {
      this.initChart()
    }
  },
  activated() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        title: {
          text: '各单位处置情况'
        },
        backgroundColor: '#ccc',
        grid: {
          left: '30px'
        },
        legend: {
          left: '60%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            type: 'category',
            data: this.list[0],
            axisLabel: {
              rotate: 90,
              fontSize: 10
            }
          }
        ],
        xAxis: [
          {
            type: 'value'
          }
        ],
        series: this.list[1]
      })
    }
  }
}
</script>

<style scoped>
.chart-container{
  /*text-align: center;*/
}
.chart-body{
  height: 240px;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
</style>