<template>
    <div class="person_box">
        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Array,
        default: []
    }
})
let colorList = [
    "rgba(255, 38, 38, 1)",
    "rgba(255, 96, 0, 1)",
    "rgba(255, 165, 7, 1)",
    "rgba(0, 234, 255, 1)",
    "rgba(0, 132, 255, 1)",
    "#2379FF",
];
let colorListA = [
    "rgba(255, 38, 38, 0.1)",
    "rgba(255, 96, 0, 0.1)",
    "rgba(255, 165, 7, 0.1)",
    "rgba(0, 234, 255, 0.1)",
    "rgba(0, 132, 255, 0.1)",
    "#49B1FF",
];
let colorListB = [
    "rgba(249, 136, 136, 1)",
    "rgba(255, 162, 106, 1)",
    "rgba(255, 210, 130, 1)",
    "rgba(142, 255, 206, 1)",
    "rgba(165, 232, 255, 1)",
];
let colorListC = [
    "rgba(249, 136, 136, 0.1)",
    "rgba(255, 162, 106, 0.1)",
    "rgba(255, 210, 130, 0.1)",
    "rgba(142, 255, 206, 0.1)",
    "rgba(165, 232, 255, 0.1)",
];
const chartDistrict = ref(null);
let chartDom = null;
const initAccess = () => {
    let result = props.resultData
    chartDom = echarts.init(chartDistrict.value);
    let option = {
        color: colorList,
        tooltip: {
            show: true,
            trigger: "item",
            axisPointer: {
                type: "shadow",
                textStyle: {
                    color: "#fff",
                },
            },
            textStyle: {
                color: '#fafafa',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            extraCssText: 'backdrop-filter: blur(6px);',
            confine: true,
            formatter: "{b}<br />使用场数：{c}",
        },
        legend: {
            show: false,
        },
        grid: {
            left: "2%",
            right: "2%",
            top: "6%",
            bottom: "0%",
        },
        xAxis: [
            {
                splitLine: {
                    show: false,
                },
                type: "value",
                show: false,
            },
        ],
        yAxis: [
            {
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                type: "category",
                axisTick: {
                    show: false,
                },
                inverse: true,
                data: result.map((item) => item.name),
                axisLabel: {
                    fontSize: 14,
                    inside: true,
                    formatter: (name, index) => {
                        const id = index + 1;
                        return `{count${id}|${id}}`;
                    },
                    rich: {
                        count1: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[0],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count2: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[1],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count3: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[2],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count4: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[3],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count5: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[4],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                    },
                },
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    verticalAlign: "bottom",
                    padding: [0, 5, 10, 0],
                    inside: true,
                    formatter: function (value) {
                        return `{name|使用场数：}{value|${value}}`;
                    },
                    rich: {
                        name: {
                            align: "center",
                            color: "#D3E5FF",
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        value: {
                            align: "center",
                            color: "#fff",
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                    },
                },
                data: result.map((item) => item.count),
            },
        ],
        series: [
            {
                name: "",
                type: "bar",
                barWidth: 5, // 柱子宽度
                MaxSize: 0,
                showBackground: true,
                barBorderRadius: [30, 0, 0, 30],
                backgroundStyle: {
                    color: "rgba(50, 60, 86, 1)",
                },
                label: {
                    show: true,
                    offset: [40, -17],
                    color: "#D3E5FF",
                    fontWeight: 500,
                    position: "left",
                    align: "left",
                    fontSize: 14,
                    fontFamily: "Source Han Sans CN",
                    formatter: function (params) {
                        return params.data.name;
                    },
                },
                data: result.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.count,
                        itemStyle: {
                            barBorderRadius: [3, 0, 0, 3],
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: colorListA[index],
                                    },
                                    {
                                        offset: 1,
                                        color: colorList[index],
                                    },
                                ],
                            },
                        },
                    };
                }),
            },
            {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                showSymbol: true,
                symbol: "circle",
                symbolSize: 8, // 进度条白点
                z: 2,
                data: result.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.count,
                        itemStyle: {
                            color: colorListB[index],
                            borderColor: colorListC[index],
                            borderWidth: 12,
                            shadowColor: colorListC[index],
                            shadowBlur: 10,
                            opacity: 1,
                        },
                    };
                }),
                animationDelay: 500,
            }, {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                showSymbol: true,
                symbol: "circle",
                symbolSize: 3, // 进度条白点
                z: 3,
                data: result.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.count,
                        itemStyle: {
                            color: colorListB[index],
                            borderColor: colorListC[index],
                            borderWidth: 30,
                            shadowColor: colorListC[index],
                            shadowBlur: 10,
                            opacity: 1,
                        },
                    };
                }),
                animationDelay: 500,
            },
        ],
    };
    chartDom.setOption(option)
};
watch(() => props.resultData, (newVal) => {
    let arrData = newVal
    if (chartDom) {
        chartDom.setOption({
            yAxis: [{
                data: arrData.map((item) => item.name)
            }, {
                data: arrData.map((item) => item.count),
            }],
            series: [{
                data: arrData.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.count,
                        itemStyle: {
                            barBorderRadius: [3, 0, 0, 3],
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: colorListA[index],
                                    },
                                    {
                                        offset: 1,
                                        color: colorList[index],
                                    },
                                ],
                            },
                        },
                    }
                })
            }, {
                data: arrData.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.count,
                        itemStyle: {
                            color: colorListB[index],
                            borderColor: colorListC[index],
                            borderWidth: 12,
                            shadowColor: colorListC[index],
                            shadowBlur: 10,
                            opacity: 1,
                        },
                    }
                })
            }, {
                data: arrData.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.count,
                        itemStyle: {
                            color: colorListB[index],
                            borderColor: colorListC[index],
                            borderWidth: 30,
                            shadowColor: colorListC[index],
                            shadowBlur: 10,
                            opacity: 1,
                        },
                    }
                })
            }],
        })
    }
}, { deep: true, immediate: true } // 开启深度监听
)
onUnmounted(() => {
    chartDom.clear()
    chartDom = null
})
// 生命周期
onMounted(() => {
    initAccess()
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>