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

<script setup>
import { computed } from 'vue';
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
                series: [{
                    type: '温度',
                    value: [20, 22, 23, 24, 25, 26, 27]
                }, {
                    type: '湿度',
                    value: [30, 32, 33, 34, 35, 36, 37]
                }]
            };
        }
    }
});

const options = computed(() => {
    let seriesData = [];
    prop.data.series.forEach(res => {
        seriesData.push({
            name: res.type,
            type: 'line',
            showSymbol: false,
            data: prop.data.date.map((key, value) => [key, res.value[value]]),
            smooth: true,
        })
    })

    return {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
        },
        
        grid: {
            top: "15%",
            left: "5%",
            right: "5%",
            bottom: "5%",
            containLabel: true,
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
        },
        series: seriesData
    };
});
</script>

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