<script>
/**
 * vs-line-bone 2022-10-19
 *
 * width 图表宽度 330
 * height 图表高度 280
 * data 数据 []
 * symbolSize 线节点大小 [15, 15]
 * markPoint 是否展示最大值，最小值 false
 * lineColor 折线颜色以及节点颜色 二维数组   [['#FAFF52', '#1A1835'], ['#37a2ff', '#1A1835'], ['#C357F6', '#1A1835'], ['#ff0087', '#1A1835']]  内置4个，超过自定义
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 *  setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-line-bone",
};
</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,
    },
    symbolSize: {
        type: Array,
        default: [15, 15],
    },
    markPoint: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Array,
        default: () => [
            {
                name: "事项一", value: [
                    {
                        name: '2021',
                        value: 787
                    }, {
                        name: '2022',
                        value: 567
                    },
                ]
            },
            {
                name: "事项二", value: [
                    {
                        name: '2021',
                        value: 256
                    }, {
                        name: '2022',
                        value: 423
                    },
                ]
            },
            {
                name: "事项三", value: [
                    {
                        name: '2021',
                        value: 644
                    }, {
                        name: '2022',
                        value: 567
                    },
                ]
            },
            {
                name: "事项四", value: [
                    {
                        name: '2021',
                        value: 443
                    }, {
                        name: '2022',
                        value: 232
                    },
                ]
            },
        ]
    },
    lineColor: {
        type: Array,
        default: () => [['#FAFF52', '#1A1835'], ['#37a2ff', '#1A1835'], ['#C357F6', '#1A1835'], ['#ff0087', '#1A1835']]
    }
});


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 xAxisData = [];
    let seriesData = [];
    props.data.map((item) => {
        xAxisData.push(item.name);
        item.value.forEach((element, index) => {
            if (!seriesData[index]) {
                seriesData[index] = {};
                seriesData[index].name = element.name;
                seriesData[index].value = []
            }
            seriesData[index].value.push(element.value)
        });
    });

    const series = [];
    const legend = [];
    seriesData.forEach((item, index) => {
        legend.push(item.name);
        let seriesItem = [{
            name: item.name,
            type: "effectScatter",
            symbolSize: props.symbolSize,
            rippleEffect: {
                period: 1,
                scale: 0,
                brushType: "fill",
            },
            itemStyle: {
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                    {
                        offset: 0,
                        color: props.lineColor[index][0],
                    },
                    {
                        offset: 1,
                        color: props.lineColor[index][1],
                    },
                ]),
            },
            data: item.value,
        }, {
            name: item.name,
            type: "line",
            symbolSize: [0, 0],
            itemStyle: {
                color: props.lineColor[index][0],
            },
            data: item.value,
        },];

        if (props.markPoint) {
            seriesItem[0].markPoint = {
                symbolSize: 40,
                label: {
                    normal: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                data: [
                    {
                        type: "max",
                        name: "最大值",
                    },
                    {
                        type: "min",
                        name: "最小值",
                    },
                ],
            }
        }
        series.push(...seriesItem)
    });


    let option = {
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                console.log(params);
                var rValue = params[0].name + "<br>";
                params.forEach(function (v, i, a) {
                    if (v.data !== 0 && v.data !== "-" && v.seriesType == "line") {
                        rValue +=
                            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                            v.color +
                            '"></span>' +
                            v.seriesName +
                            "：" +
                            v.data +
                            "<br>";
                    }
                });
                return rValue;
            },
        },
        grid: {
            top: "20%",
            left: "5%",
            right: "8%",
            bottom: "5%",
            containLabel: true,
        },
        legend: {
            width: '90%',
            type: 'scroll',
            pageTextStyle: {
                color: '#FFFFFF'
            },
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
                color: '#FFFFFF',
                width: 100,
                overflow: 'truncate',

            },
            data: legend,
        },
        xAxis: [
            {
                type: "category",
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.3)",
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: "#FFFFFF",
                    },
                },
                axisTick: { show: false },
                data: xAxisData,
            },
        ],
        yAxis: [
            {
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.3)",
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                    },
                },
                nameTextStyle: {
                    color: "#FFFFFF",
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series,
    };

    _echarts.setOption(option);

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

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

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

defineExpose({
    setEchartsRefresh
});
</script>

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

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

.vsLineBone {}
</style>
