<template>
    <div class="container2">
        <div class="title">
            <img :src="u918" alt="">
            <span>甲醛/TVOC监测</span>
        </div>
        <div class="content">
            <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
        </div>
    </div>
</template>

<script setup>
import u918 from './../image/u918.png';
import { computed } from 'vue';

const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                ch2o: [],
                tvoc: []
            }
        }
    }
})

const options = computed(() => {
    return {
        tooltip: {
            trigger: 'axis'
        },
        // legend: {
        //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        backgroundColor: 'transparent',
        xAxis: {
            type: 'time',
            boundaryGap: false,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '甲醛',
                type: 'line',
                areaStyle: {
                    opacity: 0.3
                },
                data: prop.data.ch2o
            },
            {
                name: 'TVOC',
                type: 'line',
                areaStyle: {
                    opacity: 0.3
                },
                data: prop.data.tvoc
            }
        ]
    };
})
</script>

<style lang="scss" scoped>
.container2 {
    width: 408px;
    height: 268px;

    .title {
        width: 408px;
        height: 35px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
            font-size: 20px;
            color: #2affff;
            font-weight: 700;
            margin-left: 10px;
        }
    }

    .content {
        width: 100%;
        height: 222px;
    }
}
</style>
