<script>
/**
 * vs-pie-rose 2022-10-09
 *
 * width 图表宽度 330
 * height 图表高度 280
 * barWidth 柱子高度 40
 * data 数据 []
 * pieColors 饼图颜色 ["#00c8ff", "#36e7fa", "#0064ff", "#0086ff", "#00a4ff", '#bf7b15', "#f54747"] //默认提供7种颜色，超过7种请自定义
 * labelColor label值颜色 #00c8ff
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 *  setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-pie-rose",
};
</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,
    },
    barWidth: {
        type: Number,
        default: 40,
    },
    data: {
        type: Array,
        default: () => [
            { name: "事项一", value: 2233 },
            { name: "事项二", value: 6325 },
            { name: "事项三", value: 4096 },
            { name: "事项四", value: 5066 },
        ]
    },
    pieColors: {
        type: Array,
        default: () => ["#00c8ff", "#36e7fa", "#0064ff", "#0086ff", "#00a4ff", '#bf7b15', "#f54747"]
    },
    labelColor: {
        type: String,
        default: "#00c8ff",
    }
});


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

const emit = defineEmits(["chartClick"]);
const echartRef = ref(null)

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

    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }
    _echarts = echarts.init(echartRef.value);

    let option = {
        legend: {
            show: false,
        },
        tooltip: {
            trigger: 'item'
        },
        color: props.pieColors,
        series: [
            {
                type: "pie",
                radius: [0, 75],
                center: ["50%", "45%"],
                roseType: "area",
                itemStyle: {
                    borderRadius: 0,
                },
                labelLine: {
                    normal: {
                        length: 5,
                        length2: 20,
                    },
                },
                label: {
                    normal: {
                        formatter: function (params) {
                            return (
                                "{normal|" +
                                params.name +
                                "} \n {value|" +
                                params.percent +
                                "%}"
                            );
                        },
                        rich: {
                            normal: {
                                color: "#fff",
                                fontSize: 13,
                                padding: 5
                            },
                            value: {
                                color: props.labelColor,
                                fontSize: 14,
                                fontWeight: 'bold'
                            },
                        },
                    },
                },
                data: props.data,
            },
        ],
    };
    _echarts.setOption(option);

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

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

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

defineExpose({
    setEchartsRefresh
});
</script>

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

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

.vsPieRose {}
</style>
