// 步数
import {visibleChartLabel} from "/@/utils/utils.ts";

export function screenPie(chartData, total, color, formatter) {
    return {
        color: color,
        tooltip: {
            trigger: 'item',
            show: true,
            textStyle: {
                color: '#fff',
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            borderColor: '#1b7ef2',
        },
        legend: {
            left: '72%',
            top: 'center',
            orient: 'vertical',
            icon: 'circle',
            itemGap: 8,
            textStyle: {
                color: '#ffffff',
                fontSize: 16,
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '76%'],
                center: ['40%', '49%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ffffff',
                    fontSize: 14,
                },
                labelLine: {
                    show: true,
                    length: 6,
                    length2: 10,
                    minTurnAngle: 120,
                },
                data: chartData,
            },
        ],
    };
}

//左侧圆
export function circleRing(chartData, total, color) {
    const data = visibleChartLabel(chartData)
    return {
        color: color,
        tooltip: {
            trigger: 'item',
            show: true,
            textStyle: {
                color: '#fff',
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            borderColor: '#1b7ef2',
        },
        legend: {
            left: '74%',
            top: 'center',
            orient: 'vertical',
            icon: 'circle',
            itemGap: 16,
            textStyle: {
                color: '#ffffff',
                fontSize: 16,
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '82%'],
                center: ['42%', '55%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'inner',
                    formatter: '{d}%',
                    color: '#ffffff',
                    fontSize: 14,
                },
                labelLine: {
                    show: false,
                },
                data: data,
            },
        ],
    };
}