<template>
  <ContainerBorder title="监督检查" subtitle="投诉举报" pos="center">
    <div id="container"></div>
  </ContainerBorder>
</template>

<script>
import { ContainerBorder } from '@/components'
import { Column } from '@antv/g2plot';

export default {
  components: {
    ContainerBorder
  },
  data: () => ({
    data: [
      {
        name: '抽查数',
        month: '一月',
        value: 15
      },
      {
        name: '抽查数',
        month: '二月',
        value: 19
      },
      {
        name: '抽查数',
        month: '三月',
        value: 32
      },
      {
        name: '抽查数',
        month: '四月',
        value: 47
      },
      {
        name: '抽查数',
        month: '五月',
        value: 44
      },
      {
        name: '抽查数',
        month: '六月',
        value: 50
      },
      {
        name: '抽查数',
        month: '七月',
        value: 18
      },
      {
        name: '已检查数',
        month: '一月',
        value: 13
      },
      {
        name: '已检查数',
        month: '二月',
        value: 17
      },
      {
        name: '已检查数',
        month: '三月',
        value: 30
      },
      {
        name: '已检查数',
        month: '四月',
        value: 45
      },
      {
        name: '已检查数',
        month: '五月',
        value: 42
      },
      {
        name: '已检查数',
        month: '六月',
        value: 48
      },
      {
        name: '已检查数',
        month: '七月',
        value: 16
      }
    ]
  }),
  mounted() {
    const plot = new Column('container', {
      data: this.data,
      isGroup: true,
      xField: 'month',
      yField: 'value',
      seriesField: 'name',
      // 分组柱状图 组内柱子间的间距 (像素级别)
      dodgePadding: 2,
      legend: {
        position: 'top-right',
        label: {
          style: {
            fill: 'red'
          }
        }
      },
      yAxis: {
        grid: {
          line: {
            style: {
              stroke: '#3be1ff',
              lineDash: [3, 3],
              opacity: 0.5
            }
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      },
      xAxis: {
        label: {
          style: {
            fill: '#fff'
          }
        }
      }
    });

    plot.render();
  }
}
</script>

<style lang="less" scoped>
#container {
  height: 260px;
}
</style>
