<template>
    <hc-charts :option="setOption" />
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'

const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
})

//初始变量
const setOption = ref({})

//深度监听数据变化
const datas = ref(props.datas)
watch(() => props.datas, (data) => {
    datas.value = data
    setDataFormat()
}, { deep: true })

//处理数据
const setDataFormat = () => {
    setOptions(datas.value)
}

//设置图表
const setOptions = (datas = []) => {
    setOption.value = {
        color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
        tooltip: {
            trigger: 'item',
        },
        grid: {
            top: '20px',
            left: '0',
            right: '4px',
            bottom: '0',
            containLabel: true,
        },
        legend: {},
        series: [
            {
                type: 'pie',
                radius: '60%',
                data: datas,
            },
        ],
    }
}

//渲染完成
onMounted(() => {
    nextTick(() => {
        setDataFormat()
    })
})
</script>
