shuhi-ui/src/views/recycle/booklistStat/components/recycle-proportion.vue

<template>
    <v-chart
        class="flex-1"
        ref="saleChartRef"
        style="height: 380px"
        :option="options"
    />
</template>
<script setup>
    import { computed } from 'vue';
    import VChart from 'vue-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { PieChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        TitleComponent
    } from 'echarts/components';

    // 按需加载echarts
    use([
        CanvasRenderer,
        PieChart,
        GridComponent,
        TooltipComponent,
        LegendComponent,
        TitleComponent
    ]);

    const props = defineProps({
        data: {
            type: Object,
            default: () => ({})
        }
    });

    const options = computed(() => ({
        title: {
            text: '回收占比',
            textStyle: {
                color: '#363636',
                fontSize: 14,
                fontWeight: 'normal'
            }
        },
        legend: {
            bottom: 'bottom',
            orient: 'horizontal',
            itemGap: 20,
            textStyle: {
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
            {
                name: '回收占比',
                type: 'pie',
                radius: [50, 100],
                center: ['50%', '45%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 4
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: function(params) {
                        return params.name + '\n' + params.value;
                    },
                    fontSize: 12,
                    lineHeight: 14
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { 
                        value: props.data.recycleingNum || 0, 
                        name: '已加入回收书单 (正在回收)',
                        itemStyle: { color: '#409EFF' }
                    },
                    { 
                        value: props.data.notInListNum || 0, 
                        name: '未加入回收书单',
                        itemStyle: { color: '#20B2AA' }
                    },
                    { 
                        value: props.data.blackNum || 0, 
                        name: '黑名单',
                        itemStyle: { color: '#67C23A' }
                    },
                    { 
                        value: props.data.fullPauseNum || 0, 
                        name: '已加入回收书单 (收满暂停)',
                        itemStyle: { color: '#E6A23C' }
                    },
                    { 
                        value: props.data.pauseNum || 0, 
                        name: '已加入回收书单 (手动暂停)',
                        itemStyle: { color: '#F56C6C' }
                    }
                ]
            }
        ]
    }));
</script>