<script>
/**
 * vs-pie-annular 2022-10-10
 *
 * width 图表宽度 Number 330
 * height 图表高度 Number 280
 * title 描述 String 待处理
 * value 值 Number 450
 * percent 百分比 Number 55
 * radius 圆环圈宽度 Number 12
 * valueFontSize 值的文字大小 Number 26
 * valueColor 值的颜色 String #FFFFFF
 * labelWidth 描述区域宽度 Number 100
 * dominantColor 主色 String #F7BD04
 * broderColor 主色的边框色 String #464646
 * secondaryColor 辅助色 String #0675d94d
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 * setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-pie-annular",
};
</script>
<script setup>
import {
    ref,
    reactive,
    inject,
    onMounted
} from "vue";
const echarts = inject("$echarts");

const props = defineProps({
    width: {
        type: Number,
        default: 330,
    },
    height: {
        type: Number,
        default: 280,
    },
    title: {
        type: String,
        default: '模板'
    },
    value: {
        type: Number,
        default: 450
    },
    percent: {
        type: Number,
        default: 55
    },
    dominantColor: {
        type: String,
        default: '#F7BD04'
    },
    broderColor: {
        type: String,
        default: '#464646'
    },
    secondaryColor: {
        type: String,
        default: "#0675d94d",
    },
    radius: {
        type: Number,
        default: 12
    },
    valueFontSize: {
        type: Number,
        default: 26
    },
    valueColor: {
        type: String,
        default: "#FFFFFF",
    },
    labelWidth: {
        type: Number,
        default: 100
    }
});


const style = reactive({
    width: props.width + 'px',
    height: props.height + 'px',
})

const emit = defineEmits(["chartClick"]);

let subTextTop = props.title === '' ? 'center' : '35%';

const echartRef = ref(null)
let _echarts = null;
const init = function () {

    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }

    _echarts = echarts.init(echartRef.value);

    const gaugeData = [
        {
            name: props.title,
            value: props.percent,
            title: {
                offsetCenter: ["0%", "40%"],
                width: props.labelWidth,
                overflow: 'truncate'
            },

            detail: {
                show: false,
            },
        },
    ];
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: function (param) {
                return param.name + '：' + param.value + '%'
            }
        },
        title: {
            text: props.value,
            left: 'center',
            top: subTextTop,
            textStyle: {
                color: props.valueColor, //设置字体颜色，默认#333
                fontSize: props.valueFontSize, //设置字体大小，默认15
            },
        },
        series: [
            {
                color: props.dominantColor,
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false,
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: true,
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: props.broderColor,
                        borderCap: 'round'
                    },
                },
                axisLine: {
                    lineStyle: {
                        width: props.radius,
                        color: [[1, props.secondaryColor]]
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                data: gaugeData,
                title: {
                    textStyle: {
                        color: "#fff", //设置字体颜色，默认#333
                        fontSize: 14, //设置字体大小，默认15
                        fontWeight: 'bold'
                    },
                },
            },

        ],
    };
    _echarts.setOption(option);

    _echarts.on('click', (params) => {
        emit("chartClick", params);
    })
}

onMounted(() => {
    init()
})

//图表刷新
const setEchartsRefresh = function () {
    init()
};

defineExpose({
    setEchartsRefresh
});
</script>

<template>
    <div :style="style" class="vsPieAnnular" ref="echartRef"></div>
</template>

<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);

.vsPieAnnular {}
</style>
