meilan-web/src/views/dataBigScreen/dashboard/components/pageItems/DepartmentalTaskCompletionRank.vue

<template>
  <ChartsContainer name="班组完成排行(Top10)">
    <div ref="content" style="height: 100%;">
    </div>
  </ChartsContainer>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import ChartsContainer from '../ChartsContainer.vue';
import { useECharts } from '@/hooks/useEcharts.js';
import { deptRanking } from '@/api/item/items'
import { useTimeOut } from './useTimeOut'
const content = ref(null)
const datalist = ref([])
const setChartsOptions = computed(() =>{
  return {
    backgroundColor: 'transparent',
    grid: {
      top: 50,
      right: 20,
      bottom: 30,
      left: 40
    },
    legend: {
      data: [ '已完成', '总任务数' ],
      right: 'center',
      top: 10,
      textStyle: { color: '#fff' }
    },
    xAxis: {
      type: 'category',
      data: datalist.value.map(item => item.deptName),
      axisLine: { lineStyle: { color: '#fff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      min: 0,
      interval: 10,
      max: Math.ceil(Math.max(datalist.value.map(item => item.totalTasks)) / 0.8),
      axisLine: { lineStyle: { color: '#fff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#fff' } }
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        name: '已完成',
        type: 'bar',
        data: datalist.value.map(item => item.completedTasks),
        itemStyle: { color: '#4CAF50' },
        label: { show: true, position: 'top', color: '#fff' }
      },
      {
        name: '总任务数',
        type: 'bar',
        data: datalist.value.map(item => item.totalTasks),
        itemStyle: { color: '#2196F3' },
        label: { show: true, position: 'top', color: '#fff' }
      }
    ]
  }
})

useECharts(content, setChartsOptions);
useTimeOut(() => {
  deptRanking().then(res => {
    datalist.value = res.data
  })
})

</script>

<style lang="scss" scoped></style>