<template>
    <v-chart :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: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        backgroundColor: 'transparent',
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            name: 'h',
            type: 'value',            
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: '工作',
                type: 'bar',
                stack: 'total',
                barWidth: '30%',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '待机',
                type: 'bar',
                stack: 'total',
                barWidth: '30%',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '停机',
                type: 'bar',
                stack: 'total',
                barWidth: '30%',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '故障',
                type: 'bar',
                stack: 'total',
                barWidth: '30%',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [150, 212, 201, 154, 190, 330, 410]
            }
        ]
    }
});
</script>

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