<script>
/**
 * vs-pie-bucket 2022-10-18
 *
 * width 图表宽度 Number 330
 * height 图表高度 Number 280
 * value 数据百分比值 Number 70
 * valueFontSize 值的字体大小 Number 35
 * pieColor 饼图颜色 Array ["#1991d2", "#3831f3", "#1991d2"]
 * radius 饼图大小 String '70%'

 * title 中间标题 String 模板
 * titleFontSize 中间标题文字大小 Number 14
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 * setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-pie-bucket",
};
</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,
    },
    value: {
        type: Number,
        default: 70
    },
    valueFontSize: {
        type: Number,
        default: 35,
    },
    pieColor: {
        type: Array,
        default: () => ["#1991d2", "#3831f3", "#1991d2"]
    },
    radius: {
        type: String,
        default: '70%',
    },
    title: {
        type: String,
        default: '模板',
    },
    titleFontSize: {
        type: Number,
        default: 14,
    },

});

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

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

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

const echartRef = ref(null)
let _echarts = null;
const init = function () {
    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }

    _echarts = echarts.init(echartRef.value);
    var ratioLength = 3; //波浪数量
    var ratioArr = [];
    for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(props.value / 100);
    }
    var option = {
        title: {
            text: props.value + "%",
            subtext: props.title,
            textStyle: {
                fontSize: props.valueFontSize,
                fontFamily: "Microsoft Yahei",
                fontWeight: "bold",
                color: "#fff",

            },
            subtextStyle: {
                fontSize: props.titleFontSize,
                fontFamily: "Microsoft Yahei",
                fontWeight: "bold",
                color: "#fff",
                width: 100,
                overflow: 'truncate',
            },
            left: "center",
            top: subTextTop,
        },
        series: [
            {
                type: "liquidFill",
                radius: props.radius,
                center: ['50%', '50%'],
                color: props.pieColor,
                data: ratioArr,
                label: {
                    normal: {
                        formatter: "",
                    },
                },
                outline: {
                    show: false,
                },
            },
            {
                //细的外圈
                type: "pie",
                center: ['50%', '50%'],
                radius: [parseInt(props.radius) + 9 + '%', parseInt(props.radius) + 10 + '%'],
                hoverAnimation: false,
                data: [
                    {
                        value: 50,
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            color: "transparent",
                        },
                        emphasis: {
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: "transparent",
                            },
                        },
                    },

                    {
                        //画剩余的刻度圆环
                        name: "",
                        value: 50,
                        itemStyle: {
                            color: "#41496b",
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        emphasis: {
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: "#41496b",
                            },
                        },
                    },
                ],
            },
            {
                //粗的外圈
                type: "pie",
                center: ['50%', '50%'],
                radius: [parseInt(props.radius) + 8 + '%', parseInt(props.radius) + 11 + '%'],
                hoverAnimation: false,
                zlevel: 2,
                data: [
                    {
                        name: "",
                        value: props.value,
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: props.pieColor[0],
                                },
                                {
                                    offset: 1,
                                    color: props.pieColor[1],
                                },
                            ]),
                        },
                        emphasis: {
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: props.pieColor[0],
                                    },
                                    {
                                        offset: 1,
                                        color: props.pieColor[1],
                                    },
                                ]),
                            },
                        },
                    },

                    {
                        //画剩余的刻度圆环
                        value: 100 - props.value,
                        itemStyle: {
                            color: "transparent",
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        emphasis: {
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: "transparent",
                            },
                        },
                    },
                ],
            },
        ],
    };

    _echarts.setOption(option);

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

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

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

defineExpose({
    setEchartsRefresh
});
</script>

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

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

.vsPieBucket {}
</style>
