archives/src/views/home/components/classify.vue

<template>
    <hc-charts ref="classifyCharts" :option="classifyChartsOption" dark />
</template>

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

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

//渲染完成
onMounted(() => {
    setClassifyChartsOption(props.datas)
})

//监听值变化
watch(() => props.datas, (val) => {
    setClassifyChartsOption(val)
})

//处理数据
const classifyCharts = ref(null)
const classifyChartsOption = ref({})
const setClassifyChartsOption = (data) => {
    const colors = ['#F9D949', '#EE8031', '#54B8BC']
    classifyChartsOption.value = {
        backgroundColor: '',
        color: colors,
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: '5%',
            left: 'center',
        },
        series: [
            {
                name: '档案分类占比统计',
                type: 'pie',
                radius: '50%',
                data: data.map((item, index) => {
                    item.label = {
                        color: colors[index],
                        formatter(param) {
                            const percent = ' (' + param.percent * 2 + '%)'
                            return `${item.name}${percent}\n${item.value}`
                        },
                    }
                    return item
                }),
                label: {
                    alignTo: 'edge',
                    minMargin: 25,
                    edgeDistance: 25,
                    lineHeight: 25,
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80,
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < classifyCharts.value?.getWidth() / 2
                    const points = params.labelLinePoints
                    points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
                    return { labelLinePoints: points }
                },
            },
        ],
    }
}
</script>