<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-16 11:00:36
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-16 17:57:44
 * @FilePath: \vue3portal\src\pages\layouts\components\Produce.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 } = props.lineoptions;
    const { legend, xAxis, data } = props.datas ?? {};
    let processedData = [];
    legend?.forEach((item, i) => {
        let el = i == legend?.length - 1 ? {
            name: legend[i],
            type: 'line',
            label: {
                show: false,
                position: 'insideRight'
            },
            smooth,
            areaStyle,
            data: data[i],
            yAxisIndex: 1
        } : {
            name: legend[i],
            type: 'bar',
            label: {
                show: false,
                position: 'insideRight'
            },
            data: data[i],
            barWidth:6
        }
        processedData.push(el)
    });
    state.chartOption.series = processedData;
    state.chartOption.xAxis.data = xAxis;
    state.chartOption.legend.data = legend;
}

const processOption = () => {
    state.chartOption = {
        color: ["#EB9750", "#9DFABD", "#61B6F7"],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '16%',
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data: []
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: [
            {
                type: 'value',
                name: '数量',
                nameTextStyle: {
                    color: "#47c1eb"
                },
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '%',
                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>
