<template>
    <v-chart
        class="flex-1"
        ref="saleChartRef"
        style="height: 420px"
        :option="options"
    />
</template>
<script setup>
    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 options = reactive({
        title: {
            text: '回收折扣占比',
            textStyle: {
                color: '#363636',
                fontSize: 14,
                fontWeight: 'normal'
            }
        },
        legend: {
            right: 'right',
            orient: 'vertical',
            top: 'center'
        },
        series: [
            {
                name: '回收折扣占比',
                type: 'pie',
                radius: [50, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 40, name: '≥2折' },
                    { value: 38, name: '2<至≥1' },
                    { value: 32, name: '1<至≥0.5' },
                    { value: 30, name: '≤0.5' }
                ]
            }
        ]
    });
</script>
