<script>
/**
 * vs-pie-ambo 2022-10-10
 *
 * width 图表宽度 Number 330
 * height 图表高度 Number 280
 * data 数据 []
 * pieColor 饼图渐变色 顺序和数据对应 Array [['#FFD200', '#BF8908'], ['#00EC9E', '#076E33'], ['#055ACD', '#70C1EB']] //默认提供三种，超出请自定义
 * radius 饼图大小 Array [55, 80]
 * center 饼图位置 Array ['35%', '50%']
 * surplus data数组长度超出数量进行图例滚动 Number 3
 * legendLeft 图例距离左侧位置 String '65%'
 * legendWidth 图例宽度，超出文字省略号代替 Number 100
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 * setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-pie-ambo",
};
</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,
    },
    data: {
        type: Array,
        default: () => [
            { name: "事项一", value: 200 },
            { name: "事项二", value: 678 },
            { name: "事项三", value: 388 },
            { name: "事项四", value: 476 },
        ]
    },
    pieColor: {
        type: Array,
        default: () => [['#FFD200', '#BF8908'], ['#00EC9E', '#076E33'], ['#055ACD', '#70C1EB']]
    },
    radius: {
        type: Array,
        default: [55, 80],
    },
    center: {
        type: Array,
        default: ['35%', '50%'],
    },
    surplus: {
        type: Number,
        default: 3,
    },
    legendLeft: {
        type: String,
        default: '65%',
    },
    legendWidth: {
        type: Number,
        default: 100,
    }

});

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
    }

    const rich = {
        a: {
            fontSize: 12,
            padding: [35, 0, 0, 0],
        }
    }

    let type = props.data.length > props.surplus ? 'scroll' : 'plain';


    props.data.forEach((item, index) => {
        if (!Array.isArray(props.pieColor[index])) {
            props.pieColor[index] = ['#055ACD', '#70C1EB']
        }
        item.itemStyle = {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                    offset: 0,
                    color: props.pieColor[index][0],
                },
                {
                    offset: 1,
                    color: props.pieColor[index][1],
                },
            ]),
        }
        rich[index] = {
            color: props.pieColor[index][1],
            fontSize: 18,
            fontWeight: 'bold',
            padding: 5
        }

    });

    _echarts = echarts.init(echartRef.value);
    let option = {
        legend: {
            type: type,
            top: 'center',
            left: props.legendLeft,
            height: '80%',
            itemWidth: 12,
            itemHeight: 10,
            padding: [5, 10],
            itemGap: 15,
            orient: 'vertical',
            pageIconSize: [15, 10],
            pageTextStyle: {
                color: '#FFFFFF'
            },
            textStyle: {
                width: props.legendWidth,
                overflow: 'truncate',
                color: '#FFFFFF',
                rich: rich
            },
            formatter: function (params) {
                let obj = {};
                props.data.forEach((item, index) => {
                    if (item.name === params) {
                        obj.value = item.value;
                        obj.index = index
                    }
                });
                return "{a| " + params + "}" + "\n" + "{" + obj.index + "|" + obj.value + "}"
            }
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: props.radius,
                center: props.center,
                roseType: 'area',
                itemStyle: {
                    borderRadius: 0
                },
                labelLine: {
                    show: false
                },
                label: {
                    show: false
                },
                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="vsPieAmbo" ref="echartRef"></div>
</template>

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

.vsPieAmbo {}
</style>
