<template>
    <echart :options="lineOption" id="center-total-line"></echart>
</template>

<script>
export default {
    props: {
        chartWeekData: {
            type: Array,
            default: []
        }
    },

    data() {
        return {
            lineOption: {}
        }
    },

    methods: {
        chartOption() {
            const data = this.chartWeekData;

            this.lineOption = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        }
                    }
                },
                grid: {
                    height: '68%',
                    top: '15%'
                },
                legend: {
                    show: false
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: data.map(item => item.riqi),
                    axisLabel: {
                        color: "#fff",
                        fontSize: 14,
                        formatter: function (value) {
                            return value.split('年')[1]
                        }
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        color: "#fff",
                        fontSize: 14
                    },
                    name: '%',
                    nameTextStyle: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        name: "计划",
                        data: data.map(item => item.jihualeijiwancheng),
                        type: "line",
                        smooth: true,
                        areaStyle: {
                            opacity: 0.2,
                        },
                    },
                    {
                        name: "实际",
                        data: data.map(item => item.shijileijiwancheng),
                        type: "line",
                        smooth: true,
                        areaStyle: {
                            opacity: 0.2,
                        },
                    },
                ],
            };
        }
    },

    mounted() {
        this.chartOption()
    }
}
</script>