<template>
    <v-chart autoresize :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed, ref } from 'vue';
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                xAxis: [],
                series: []
            };
        }
    }
});


const options = computed(() => {
    return {
        tooltip: {
            trigger: 'axis',

            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {},
        backgroundColor: 'transparent',
        grid: {
            left: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: prop.data.xAxis,
        },
        yAxis: {
            name: 'min',
            type: 'value',
        },
        series: prop.data.series.map((item, index) => {
            return {
                name: item.name,
                type: 'line',
                // stack: 'Total',
                data: item.data
            };
        })
    }
});
</script>

<style lang="scss" scoped></style>