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

<script setup>
import * as echarts from 'echarts'
defineProps({
    title: {
        type: String,
        default: '暂无数据'
    }
})
const chartAccess = ref(null);
let chartDom = null;
const initAccess = () => {
    const hexToRgb = hex => {
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b)
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result
            ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16),
            }
            : null
    }
    let xData = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00']
    const yData = [
        {
            name: '每日总量',
            data: [100, 120, 200, 210, 130, 160, 280, 240, 260, 200, 270, 280, 120],
        },
        {
            name: '累计总量',
            data: [60, 80, 100, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275, 100],
        },
    ]
    const xAxisFn = xData => {
        return [
            {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    color: '#ffffff', //x轴label文字颜色
                },
            },
        ]
    }
    const colorList = ['#107FFF', '#55D1FD',]
    chartDom = echarts.init(chartAccess.value);
    let option = {
        series: yData.map((item, index) => {
            const rgb = hexToRgb(colorList[index])
            const end = `rgba(${rgb.r},${rgb.g},${rgb.b},0)`
            return {
                name: item.name,
                data: item.data,
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbolSize: 10,
                emphasis: { focus: 'series' },
                animationDuration: 2500,
                animationEasing: 'cubicInOut',
                lineStyle: {
                    width: 3,
                },
                areaStyle: {
                    width: 4,
                    opacity: 0.25,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0.389, color: colorList[index] },
                            { offset: 1, color: end },
                        ],
                        global: false,
                    },
                },
            }
        }),
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
            },
            textStyle: {
                color: '#fafafa',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            extraCssText: 'backdrop-filter: blur(6px);',
        },
        grid: {
            top: '15%',
            left: '2%',
            right: '6%',
            bottom: '0%',
            containLabel: true,
        },
        legend: {
            show: true,
            top: 13,
            right: 20,
            icon: 'roundRect',
            itemHeight: 5,
            itemWidth: 10,
            itemGap: 40,
            textStyle: {
                fontSize: 12,
                color: '#ffffff',
            },
            itemStyle: {
                borderColor: 'transparent',
                borderWidth: 6,
            },
        },
        xAxis: xAxisFn(xData),
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: '#ffffff',
                },
                splitLine: {
                    show: false, //不显示grid竖向分割线
                },
            },
        ],
    };
    chartDom.setOption(option)
};
// 生命周期
onMounted(() => {
    initAccess()
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

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