<!--
 * @Author: hcc han_chen301@163.com
 * @Date: 2025-05-23 09:27:19
 * @LastEditors: hcc
 * @LastEditTime: 2025-06-09 10:36:46
 * @remarker: 
-->
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref, watchEffect } from 'vue';

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

defineOptions({
  name: 'AnalysisVisitsSource',
});
const props = defineProps({
  taskLevelData: {
    type: Array,
    default: () => [],
  },
});

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const initEcharts = () => {
  renderEcharts({
    legend: {
      bottom: '2%',
      left: 'center',
    },
    series: [
      {
        animationDelay() {
          return Math.random() * 100;
        },
        animationEasing: 'exponentialInOut',
        animationType: 'scale',
        avoidLabelOverlap: false,
        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
        data: props.taskLevelData,
        emphasis: {
          label: {
            fontSize: '14',
            fontWeight: 'bold',
            show: true,
          },
        },
        itemStyle: {
          // borderColor: '#fff',
          borderRadius: 10,
          borderWidth: 2,
        },
        label: {
          position: 'center',
          show: false,
        },
        labelLine: {
          show: false,
        },
        name: '任务级别',
        radius: ['40%', '65%'],
        type: 'pie',
      },
    ] as any,
    tooltip: {
      trigger: 'item',
    },
  });
};
onMounted(() => {
  initEcharts();
});
watchEffect(() => {
  // 会自动追踪 props.everydayTask 的依赖
  initEcharts();
});
</script>

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