lingxixue-admin/playground/src/views/question-bank/task-mgr/components/whole-sales.vue

<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts'

import { onMounted, ref } from 'vue'

import { EchartsUI, useEcharts } from '@vben/plugins/echarts'

const props = defineProps({
  chartDetail: {
    type: Object,
    default: () => {},
  },
})
const chartRef = ref<EchartsUIType>()
const { renderEcharts } = useEcharts(chartRef)

onMounted(() => {
  renderEcharts({
    series: [
      {
        animationDelay() {
          return Math.random() * 400
        },
        animationEasing: 'exponentialInOut',
        animationType: 'scale',
        center: ['50%', '50%'],
        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
        data: [
          { name: '未提交', value: props.chartDetail?.status0Count || 0 },
          { name: '已提交', value: props.chartDetail?.status1Count || 0 },
          { name: '已批改', value: props.chartDetail?.status2Count || 0 },
          // { name: '远程', value: props.chartDetail?.remoteCount || 0 },
        ].sort((a, b) => {
          return a.value - b.value
        }),
        name: '提交情况',
        radius: '80%',
        roseType: 'radius',
        type: 'pie',
      },
    ],

    tooltip: {
      trigger: 'item',
    },
  })
})
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>