<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-16 11:00:36
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-16 18:02:38
 * @FilePath: \vue3portal\src\pages\layouts\components\Line.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
const props = defineProps({
    lineoptions: {
        type: Object,
        default: {}
    },
    datas: {
        type: Object,
        default: {}
    }
});
const state = reactive({
    chartOption: {}
});
const flag = ref(false);
const processData = () => {
    const { areaStyle, smooth, showLegend,showSymbol,legendoptions } = props.lineoptions;
    const { legend, xAxis, data } = props.datas ?? {};
    let processedData = [];
    legend?.forEach((item, i) => {
        processedData.push({
            name: legend[i],
            type: 'line',
            label: {
                show: false,
                position: 'insideRight'
            },
            smooth,
            areaStyle: areaStyle ? areaStyle?.[i] : null,
            data: data[i],
            showSymbol
        })
    });
    state.chartOption.series = processedData;
    state.chartOption.xAxis.data = xAxis;
    state.chartOption.legend.data = showLegend ? legend : [];
}

const processOption = () => {
    state.chartOption = {
        color: props.lineoptions.colors,
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '16%',
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data: [],
            ...(props.lineoptions.legendoptions ?? {})
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
            name: props.lineoptions.unit,
            nameTextStyle: {
                color: "#47c1eb"
            },
            splitLine: {
                show: false
            }
        },
        series: []
    }
    processData();
}
watch(() => props.datas, (newValue, oldValue) => {
    flag.value = true;
    processOption();
    nextTick(() => {
        flag.value = false;
    })
}, { immediate: true, deep: true });
</script>
<template>
    <echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
