<template>
  <div class="staff-archives-charts">
    <div class="staff-archives-title">{{title}}</div>
    <div :id="aId" :data="dataInfo" class="chart-box" style="height: 300px"></div>
  </div>
</template>

<script>
  export default{
    props: {
      aId: {
        type: String,
        default: 'mycharts'
      },
      dataInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      title: {
        type: String,
        default: () => '分布'
      }
    },
    data () {
      return {
      }
    },
    mounted () {
      this.initChartBar()
    },
    methods: {
      initChartBar () {
        var staffTotal = this.dataInfo.total
        var option = {
          color: '#3298DB',
          // 标题
          title: {
            left: 'left'
          },
          tooltip: {
            trigger: 'axis',
            formatter: params => {
              var res = '<p>等级：' + params[0].name + '</p>'
              for (var i = 0; i < params.length; i++) {
                res += '<p>' + params[i].seriesName + ': ' + (params[i].data * staffTotal).toFixed(0) + '</p>'
                res += '<p> ' + '占比： ' + ': ' + params[i].data * 100 + '%' + '</p>'
              }
              return res
            }
          },
          // 图例
          legend: {
            data: ['人数']
          },
          // x轴
          xAxis: {
            name: '等级',
            data: this.dataInfo.names
          },
          yAxis: {
            name: '百分比',
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: params => {
                // if (params.data.value === 0) return ''
                return `${params * 100}%`
              }
              // : '{value} %'
            },
            show: true
          },
          // 数据
          series: [{
            name: '人数',
            type: 'bar',
            barWidth: 30,
            label: {
              show: true,
              position: 'top',
              formatter: (params) => (params.value * staffTotal).toFixed(0) + '人\n' + '占比: ' + params.value * 100 + '%'
            },
            data: this.dataInfo.datas
          }
          ]
        }
        var echarts = require('echarts')
        this.chartBar = echarts.init(document.getElementById(this.aId))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .staff-archives-charts {
    // width: 50%;
  }
</style>
