<template>
  <div>
    <div class="label">安检员统计</div>
    <div id="taskstatistics"></div>
  </div>
</template>

<script>
  export default {
    name: "TaskStatistics",
    methods: {
      setTask() {
        this.xc = this.$echarts.init(document.getElementById('taskstatistics'))
        var scale = 0.8;
        this.xc.setOption({
          legend: {
            orient: 'vertical',
            icon: 'circle',
            x: '70%',
            bottom: '0',
            right: '1%',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 12 * scale,
              padding: [0, 0, 0, 4 * scale],
              color: '#ffffff'
            },
            data: ['安检完成', '安检未完成']
          },
          grid: {
            left: '20%',
            top: '10%',
            bottom: '0',
            width:'60%',
          },
          yAxis: [{
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#fff',
              fontSize: 13,
            },
            type: 'category',
            position: 'left',
            data: ['张三', '李四', '王五', '小刘', '小七','小九']
          }],
          xAxis: [{
            show: false,
            axisTick: {
              show: false
            },
            type: 'value',
            name: '安检次数',
            min: 0,
            max: 1300,
            inverse: false,
            axisLine: {
              show: false,
            },
          }],
          series: [{
            name: '安检完成',
            align: 'left',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#64d8d4',
                barBorderRadius: 10
              }
            },
            barWidth: '10',
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#fff'
                }
              }
            },
            data: [321, 457, 789, 1244, 1300,1000],
          },
            {
              name: '安检未完成',
              align: 'left',
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  color: '#03515e',
                  barBorderRadius: 10
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              data: [347, 347, 654, 873, 897,300],
            },
          ]
        }, true)
      }
    },
    ready() {
      this.setTask()
    }
  }
</script>

<style scoped>
  .label{
    font-size: 0.85em;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }
  #taskstatistics{
    height: 68.3%;
    width: 100%;
  }
</style>
