<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: 'AnalysisVisitsData',
});
const props = defineProps({
  taskTypeData: {
    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.taskTypeData,
        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>
