<template>
  <div id="staff-bar" class="container">
    <ve-bar
      :style='{"height": height,"width": width}'
      :width='width'
      :height='height'
      :judge-width="true"
      :data="chartData"
      :extend="extend"
      :settings="chartSettings"/>
  </div>
</template>

<script>

import * as echarts from 'echarts';

export default {
  name: 'PowerLine',
  data() {
    return {
      title: {
        text: '到岗率',
        textStyle: {
          color: '#cce9ff',
          fontSize: 15
        },
        padding: [5, 0, 0, 120]
      },
      height: '0',
      width: '0',
      chartSettings: {
        labelMap: { name: '时间' },
        metrics: [],
        dimension: ['name']
      },
      extend: {
        grid: {
          bottom: '0%',
          top: '1%',
          containLabel: true
        },
        yAxis: {
          axisLabel: {
            color: '#cce9ff'
          }
        },
        xAxis: {
          axisLabel: {
            color: '#cce9ff'
          }
        },
        legend: {
          show: false,
          // type: 'scroll',
          top: '0px',
          textStyle: {
            color: '#cce9ff',
            fontWeight: 'bold'
          }
        },
        series: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
          type: 'bar',
          symbol: 'circle',
          symbolSize: 8,
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          }
        },
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10']
          }
        }
      },
      chartData: {
        columns: [],
        rows: []
      }
    }
  },
  mounted() {
    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      // statisticsMonth().then(response => {
      //   if(response.data.length>0){
      //     const arr = response.data.map((item)=> {
      //       const result = {name: item.name}
      //       for (let i = 0; i < item.data.length; i++) {
      //         result[item.data[i].name] = item.data[i].count
      //       }
      //       return result
      //     })
      //     const area = response.data[0].data.map(item=>item.name)
      //     this.chartData.columns = ['name', ...area]
      //     this.chartSettings.metrics = area
      //     this.chartSettings.labelMap = {'name':'姓名'}
      //     this.chartData.rows = arr
      //   }
      // })
      this.chartData.columns = ['name', '到岗率']
      this.chartSettings.metrics = ['到岗率']
      this.chartSettings.labelMap = { 'name': '姓名' }
      // 模拟数据
      this.chartData.rows = [
        { name: '保安0', '到岗率': '91' },
        { name: '保安1', '到岗率': '94' },
        { name: '保安2', '到岗率': '89' },
        { name: '保安3', '到岗率': '75' },
        { name: '保安4', '到岗率': '88' },
        { name: '保安5', '到岗率': '78' },
        { name: '保安6', '到岗率': '86' },
        { name: '保安7', '到岗率': '82' },
        { name: '保安8', '到岗率': '94' },
        { name: '保安9', '到岗率': '96' },
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  position:relative;
  width: 100%;
  height:100%;
}
</style>