<template>
  <Card title="人员概况">
    <div class="container" ref="chart"></div>
  </Card>
</template>

<script>
import echarts from 'echarts4'

import Card from '../components/Card'

export default {
  components: { Card },
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chart)
      const option = {
        grid: {
          top: '20px',
          left: '30px',
          right: '20px',
          bottom: '40px'
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: ['总人数', '实名制人数', '劳务人数', '出勤人数', '退场人数'],
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#4a6290'
            }
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '报警',
            data: [150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fb6e34'
                },
                
                {
                  offset: 1,
                  color: '#252d3f'
                }
              ])
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
