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 class="fullChart">
      <Echarts :height="400" :option="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 option = {
//   title: {
//     text: '期望月薪'
//   },
//   xAxis: {
//     type: 'category',
//     name: '范围',
//     data: ['3-5k', '5-8k', '8-12k', '12-15k', '15-20k', '20-30k', '面议']
//   },
//   yAxis: {
//     type: 'value'
//   },
//   grid: {
//     left: '0',
//     top: '60',
//     right: '50',
//     bottom: '10',
//     containLabel: true
//   },
//   series: [
//     {
//       data: [120, 200, 150, 80, 70, 110, 130],
//       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% - 24px) / 2);
    min-width: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 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>