menduner/src/views/recruit/enterprise/statistics/components/resume.vue

<template>
  <div class="chart-box">
    <div class="chart-item" v-for="(val, i) in list" :key="i">
      <Echarts :height="400" :option="val.option"></Echarts>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'resume-analysis'})
import { ref, onMounted, watch, nextTick } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { getJobCvAgeCount, getJobCvEduCount, getJobCvSexCount, getJobCvExpCount } from '@/api/recruit/enterprise/statistics'

const props = defineProps({
  query: Object
})

// 柱状图公共option
const barCommonOption = {
  title: {
    text: ''
  },
  xAxis: {
    type: 'category',
    name: '范围',
    axisLabel: {
      rotate: 30
    },
    data: []
  },
  yAxis: {
    type: 'value',
    name: '数量（人）'
  },
  grid: {
    left: '20',
    top: '70',
    right: '50',
    bottom: '10',
    containLabel: true
  },
  series: [
    {
      data: [],
      type: 'bar',
      barWidth: 40,
      label: {
        show: true
      }
    }
  ]
}

const list = ref([
  {
    api: getJobCvSexCount,
    isPie: true,
    option: {
      title: {
        text: '性别分布'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '性别分布',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: e => {
              return e.data.key + ': ' + e.value + '人'
            }
          },
          labelLine: {
            show: true
          },
          data: []
        }
      ]
    }
  },
  {
    api: getJobCvAgeCount,
    title: '年龄分布',
    option: cloneDeep(barCommonOption)
  },
  {
    api: getJobCvExpCount,
    title: '工作年限分布',
    option: cloneDeep(barCommonOption)
  },
  {
    api: getJobCvEduCount,
    title: '学历分布',
    option: cloneDeep(barCommonOption)
  }
])

const getStatistics = () => {
  list.value.forEach(async (e) => {
    const data = await e.api(props.query)
    if (e.isPie) {
      e.option.series[0].data = data
    } else {
      e.option.title.text = e.title
      e.option.xAxis.data = data.x
      e.option.series[0].data = data.y
    }
  })
}

onMounted(() => {
  nextTick(() => {
    getStatistics()
  })
})

watch(
  () => props.query,
  (val) => {
    if (val) getStatistics()
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .chart-item {
    width: calc((100% - 12px) / 2);
    min-width: calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
    overflow: hidden;
    transition: all .2s linear;
    background-color: #f7f8fa;
    border-radius: 8px;
    margin: 0 12px 12px 0;
    padding: 12px;
    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}
.fullChart {
  width: 100%;
  background-color: #f7f8fa;
  border-radius: 8px;
  padding: 12px;
}
</style>